Web制作・開発会社 プレスマンのスタッフブログ

PRESSMAN*Tech

CSSでラジオボタンをタブメニューに変える

先日、ラジオボタンで実装済みのUIを急遽タブメニューにしたいというご要望をいただき、CSSを利用してタブメニュー風のデザインとして見せることにしました。
ラジオボタンを元にCSSでタブメニューを作成する場合、JavaScriptが必要ないため動作も軽く、比較的簡単に実装することができます。欠点としては、擬似クラスや隣接セレクタなどを多用するため、残念ながらIE8以下のブラウザでは動作しません。

DEMO:

MENU1TEXT1MENU2TEXT2MENU3TEXT3
対応ブラウザ:
IE9〜FirefoxChormeSafariOperaiOSAndroid

HTML:

一部の環境ではlabelタグのfor属性がうまく動作しないため、ラジオボタン&タブ&内容をまとめてlabelタグで囲うのがポイントです。
デモでは1つ目のラジオボタンにchecked属性を指定していますが、他のラジオボタンに指定することで、デフォルトでアクティブなタブを変えることができます。
なお、labelタグはインライン要素ですので、ブロック要素を内包することができません。そのため、ここではemタグとspanタグを使用しています。

CSS:

Webkit系のブラウザの不具合を回避するため、ラジオボタンcheck時のスタイル指定の際は、隣接セレクタではなく間接セレクタを利用しています。
参考::checked擬似クラスの隣接セレクターのWebkit系での挙動とか

まとめ:

今回はラジオボタンを利用した、CSSだけで構築するタブメニューの作成方法をご紹介いたしました。
ちょっとしたシンプルなタブメニューが必要なときや、タブメニューだけのためにわざわざ新しいJavaScriptを追加したくないときに、手軽に設置できるCSSのタブメニューはいかがでしょうか。