タブ切り替えする方法（CSSのみ）

タブ切り替え

タブ切り替えメニューを実装するにはさまざまな方法があります
従来は、「jQuery」や「JavaScript」を利用して実装するのが一般的でしたが、「HTML」や「CSS」の技術が進化し「CSS」のみでタブ切り替えメニューを実装でき、表示速度の遅延防止に繋がります

今回は、CSSのみ（JavaScript無し）でタブ切り替えメニューを実装する2つの方法を解説します
（見た目はほぼ一緒に見えますが。。。）

「ラジオボタン」と「コンテンツ内容」を一致させての方法

「input（ラジオボタン）」のid属性に「menu01」を記述したらClass要素「id（コンテンツ内容）」にも「menu01」を記述することで、タブを選択した際にidが一致しているコンテンツ内容を開くことができます

See the Pen タブ切り替え CSSのみ by ちいうさ (@zqnixpal-the-looper) on CodePen.

「ラジオボタン」直下にある「コンテンツ内容」を方法

「input（ラジオボタン）」のタブを選択した際に、直下にあるClass要素に記述されている「id（コンテンツ内容）」を開くことができます

See the Pen タブ切り替え CSSのみ 02 by ちいうさ (@zqnixpal-the-looper) on CodePen.