いくつかやり方がありますが、結論から言ってしまうと、ボタンのカレントやアンカーの問題、マークアップの自由度を考えると、JavaScriptを使うことをお勧めいたします。

それでも「CSSでやりたい!」という状況があると思うので、まとめてみました。

CSSのタブ切り替えは、2種類

CSSで行えるタブ切り替えの方法は、2種類あります。

  • 「:checked」を使用したもの
  • 「:target」を使用したもの

どちらもIE9以降から使えます。
(:checkedの方は、Androidで問題があるという話を聞きましたが、シミュレータのAndroid4.4では大丈夫でした)
仕様としては、一長一短といったところがあります。
見ていきましょう。

checked

radioボタンと:checkedを利用して、タブ切り替えを行います。
radioボタンの代わりにlabelを使うと、良い感じで押せるようになります。

デモはここから

ポイントはradioボタンの:checkedに関連した要素を、隣接セレクタ (E + F)と間接セレクタ (E ~ F)で、スタイルを変えるところです。
細かい部分は、デモを参考にしてください。
マークアップは、radioボタンごとにそれに関する要素を近づけることです。

メリット
あらかじめHTML内にchecked=”checked”(もしくはcheckedのみでも可)と入れておくことで、カレント表示を設定できるのが便利。
マークアップに気を付ければ、シンプルに実装できる。

デメリット
checkedを使うためには、radioボタンの兄弟、子、子孫にボタンやコンテンツを配置しなくてはならず、マークアップに制限が出てしまう。
その場合、絶対配置でレイアウトする可能性が高いため、高さを明示的に指定しないと、後に続く要素を配置できない。

target

アンカーを切り替えた時、targetを使って、選ばれたアンカーIDを元にスタイルを変更します。
また、履歴として登録されるので、ブラウザのバックボタンでタブが切り替わります。

デモはここから

こちらは、ボタンとコンテンツを別にマークアップすることができます。
切り替えるためのアンカーIDを入れ子にすることで、子孫セレクタ(E F)の優先度を利用して、カレントのボタンを設定することができます。
細かい部分は、デモを参考にしてください。

メリット
checkedと比べて比較的マークアップが自由。

デメリット
指定したアンカーIDのタグを入れ子にしないと、カレント表示の設定が面倒。
スクロール位置が変わり、URLでぺージを管理しているサイトだと使いにくい。

まとめ

高さの変化に問題が無ければ、checkedが良いです。
targetはマークアップの観点から見ると悪くないですが、アンカーの切り替わりによるデメリットが大きいです。
それが問題ない状況であれば、targetでも問題ないでしょう。

細かい調整をしたいのであれば、残念ながらJavaScriptを使ったほうが早そうです。

では、そんな感じで、またねー。

6ステップでマスターする 「最新標準」HTML+CSSデザイン
エビスコム
マイナビ出版 (2016-08-30)
売り上げランキング: 129,614