CSS: タブパネル
概略
JavaScript を使用せず HTML と CSS だけでタブパネルを作る話です。
前置きでページ内リンクやHTML 要素の表示・非表示の話もあります。
a タグ: ページ内へのリンク
CSS: 要素の表示・非表示
タブパネルなどの表示は :focus を使うよりも input
タグのラジオボタン (type="radio") を使った方が操作性が安定します。
input タグ: type="radio" ラジオボタン
サンプル
JavaScript を使用しないサンプルです。
input タグのラジオボタン (type="radio") を組み合わせます。
dl, dt, dd タグのタブパネル
dt, dd, dl タグとラジオボタンを組み合わせた例。
dt がタブの項目名、dd がコンテントになります。
HTML: dl, dt, dd タグ
目次と本文を左右に並べたサンプル。
ul, li タグのタブパネル
ul,li とラジオボタンを組み合わせた例。
HTML: ul,ol,li タグ
ul, li でタブパネルのサンプル。