css3でタブ表示を実装してみる

引き続きcss3を色々と弄ってみる．今回はタブ表示の実現について探ってみる．

一般的なタブ表示を考えてみると，複数のタブの中からひとつだけタブを表示させるのが基本的な動きだ．この点に着目すると次のような仕組みが利用できそうだ．

1. a要素と:target擬似クラスを使い，タブの単一選択を実現する．
2. input[type="radio"]と:checked擬似クラスを使って単一選択を実現する．
3. li要素にtabindex属性をつけ，:focus擬似クラスを使って単一選択を実現する．

１の方法は１ページ内に１つのタブビューがある場合に使えるパターン．既にいろいろなサイトで紹介されているようなので，ここでは２の方法で実装してみた．この方法であれば，１ウィンドウに複数のタブを配置しても動作するはず．
３の方法はHTML5においては任意の要素にtabindexが指定可能であることを利用したもの．フォーカスがブラウザ内で唯一であることや，初期位置を与えるのにjavascriptの力を借りたりする必要があるために若干使いにくい．

前回と同様にinput要素そのものは非表示とし，関連付けしたlabel要素をクリックすることでレイアウトが変化するように細工しておき，label要素をタブの見出しとして振る舞うように設定した．



こんな感じでわざわざjavascriptを使わなくても実装可能だ．css3の:checked擬似クラスと:target擬似クラスはこのように実に便利な機能なのだ．

#tabList{
 display:block;
 position:relative;
 padding:0;
 margin:0;
 width:304px;
 height:224px;
 overflow:hidden;
}
#tabList input[type="radio"],
#tabList input:not(:checked)~div{
 display:none;
}
#tabList input:not(:checked)+label{
 left:2px;
 top:2px;
 z-index:0;
}
#tabList input:checked+label{
 z-index:2;
}
#tabList input:checked+label:after{
 z-index:2;
}
#tabList>li{
 display:inline;
}
#tabList>li>label{
 display:block;
 float:left;
 height:20px;
 padding-left:10px;
 padding-right:10px;
 position:relative;
 color:white;
 text-shadow:1px 1px 0 black;
 font-weight:bold;
 text-align:center;
 border:solid 1px black;
 border-bottom:none;
 border-top-left-radius:10px;
 border-top-right-radius:10px;
}
#tabList>li>div{
 position:absolute;
 top:20px;
 width:300px;
 height:200px;
 border:solid 1px black;
 z-index:1;
 box-shadow:2px 2px 0 black;
}
#tabList>li:nth-child(1)>*{
 background-color:yellow;
}
#tabList>li:nth-child(2)>*{
 background-color:red;
}
#tabList>li:nth-child(3)>*{
 background-color:green;
}
#tabList>li:nth-child(4)>*{
 background-color:blue;
}
#tabList>li:nth-child(5)>*{
 background-color:purple;
}