CSS Programming Advent Calendar 2012 – 06日目

JavaScriptを使わず、CSSを駆使してそれっぽい事をやるCSSプログラミングのアドベントカレンダーへの投稿記事です。

いわゆるタブ的な動きを、CSSだけで組みました。（※実務で使っちゃ駄目ですよ！）

タブのCSS自体の組み方はこちらをどうぞ:

デモ

どーん！

仕組み

.tab-switch:nth-of-type(1):checked ~ .tab-button:nth-of-type(1),
.tab-switch:nth-of-type(2):checked ~ .tab-button:nth-of-type(2),
.tab-switch:nth-of-type(3):checked ~ .tab-button:nth-of-type(3) {
    background-color: #f9f9f9;
    font-weight: bold;
    margin-bottom: -1px;
    padding-bottom: 3px;
}
.tab-switch:nth-of-type(1):checked ~ .tab-panel:nth-of-type(1),
.tab-switch:nth-of-type(2):checked ~ .tab-panel:nth-of-type(2),
.tab-switch:nth-of-type(3):checked ~ .tab-panel:nth-of-type(3) {
    display: block;
}

タブボタンがlabelになっていて、非表示のラジオボタンを切り替えています。

でもってn番目のラジオボタンが選択されていたら、n番目のタブボタンとn番目のタブパネルを表示、とします。

順序は疑似セレクターの:nth-of-type()で指定しています。これは同じ種類のタグのうち何番目か、という指定です。

ラジオボタンとタブボタン、パネルとの関連は、関節隣接接合子 (General sibling combinator) ~で指定します。

これは”E1 ~ E2“と書いた場合、「E1より後ろの兄弟のE2」を表します。今回だとE1が「n番目のラジオボタンかつチェックの付けられたもの」に、E2が「n番目のタブボタン、パネル」になります。

おしまい

同じ仕組みでアコーディオンメニューとか作れそうですね。はい。

あ、もう一回言いますけど、CSSプログラミングは実務で使っちゃ駄目ですよ！　ちゃんとスクリプトでやるべき事はスクリプトでやりましょう。（タブCSSのチュートリアルの方ではJavaScript + jQueryで書いてます。）

明日は青い魚の人です。

参考