ピュアCSSによる切り替え可能なタブ

CSS3から :target セレクタが導入され、ターゲット（URL末尾の #hogehoge）のIDを持つ要素を選択できるようになりました。:targetセレクタを使うと、簡単なタブ切り替えが実装できます。

今回は次のようなタブを作りたいと思います。完成品はこちらから。ピュアCSSのみでタブの切り替えもできます。

HTML

タブの各アイテムは<nav>タグ内に存在し、各タブのリンク先は href='#******'で指定します。現在の状態はURLが持ちます。タブ内のコンテンツは、.content クラスが指定された <div> で記述し、各ターゲットに対応したIDをそれぞれの要素が持ちます。

html

<nav>
  <a href='#home'>Home</a>
  <a href='#about'>About</a>
  <a href='#members'>Members</a>
  <a href='#links'>Links</a>
</nav>

<div id='home' class='content'>Home here</div>
<div id='about' class='content'>About here</div>
<div id='members' class='content'>Members here</div>
<div id='links' class='content'>Links here</div>

CSS

タブの内容の要素にCSSを適用するだけで、タブ切り替えができます。大事なところだけ抜粋するので、細かいスタイルの指定は、サンプルを参照して下さい。

タブ内容の.contentはデフォルトでdisplay:noneして隠します。そしてURLで指定された要素 .content:target のみ、display: block で表示します。ターゲットは<a>リンクで変更されるので、タブのアイテムをクリックするとタブの内容が切り替わるというカラクリです。

css

.content {
  display: none;
}

.content:target {
  display: block;
}

おわりに

:targetセレクタを使ってタブができましたが、スクロールが発生したりといまいちです。タブの実装は別の手段のほうが良いかもしれませんね。<input type='radio'>でもできそうと思って調べてみたら、先人達が既に実装していました。

CSS-TRICKSに:targetを使った別のサンプルがありました。こちらのほが :target の正しい使い方かもしれませんね。