HTMLとCSSだけで作るシンプルなタブ切り替え

Javascriptを使わず、HTMLとCSSだけで実装するタイプのタブ切り替え。
よく使うのに忘れてしまうので、自分用にメモしておきます。

なぜJSを使わなくても実装できるのかというと、ラジオボタン要素の、「ひとつのラジオボタンにチェックが入っていると、他のラジオボタンのチェックが自動的にはずれる」という性質をうまく利用しているためです。

サンプル

すぐ使えるように、できるだけシンプルで短いコードのデザインにしました。
必要に応じてカスタマイズしてお使い下さい。

コード

HTML

<div class="tab_contents_box">
<input id="tab_a" type="radio" name="tab_menu" checked>
<label class="tab_menu" for="tab_a">タブA</label>
<input id="tab_b" type="radio" name="tab_menu">
<label class="tab_menu" for="tab_b">タブB</label>
<div id="tab_a_content" class="tab_content">
タブAの内容
</div>
<div id="tab_b_content" class="tab_content">
タブBの内容
</div>
</div>

CSS

.tab_menu {
    z-index: 2;
    position: relative;
    width: 120px;
    margin: 0 5px;
    background-color: #eee;
    line-height: 36px;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
    border: solid 2px #ccc;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    box-sizing: border-box;
}
.tab_menu:hover {
    color: #838383;
}
.tab_menu:first-of-type{
margin: 0 5px 0 20px;
}
input:checked + .tab_menu {
    background-color: #fff;
    border-bottom: solid 2px #fff;
}
input[name="tab_menu"] {
  display: none;
}
.tab_content {
    display: none;
    z-index: 1;
    clear: both;
    border: solid 2px #ccc;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 0 0 30px 0;
    position: relative;
    top: -2px;
}
#tab_a:checked ~ #tab_a_content,
#tab_b:checked ~ #tab_b_content {
    display: block;
}

※wordpressで使用する際の注意事項あり（後述）

簡単な解説

• inputの「id」と、labelの「for」の値を揃えます（idが「tab_a」だったら、forも「tab_a」にします）。
• 「#tab_a:checked ~ #tab_a_content」というCSSセレクタがこのコーディングの要となります。
  ややこしいセレクタですが、「『tab_a』というidの要素がチェックされている場合、『tab_a』と同じ親要素を持ち、『tab_a_content』というidを持つ兄弟要素に」という意味の指定です。
  基本的にはコンテンツエリアが非表示になっていますが、上記のセレクタによって、チェックの入ったタブと対応するコンテンツエリアだけ表示させるようになっています。

wordpressで使う時の注意

1. wordpressでは、コードの途中で改行をすると自動的に「br」や「p」が入ってしまって、予期せぬエラーを生じますので、「input」部分は以下のように、すべて改行せずにつなげて書きましょう↓

   <input id="tab_a" type="radio" name="tab_menu" checked><label class="tab_menu" for="tab_a">タブA</label><input id="tab_b" type="radio" name="tab_menu"><label class="tab_menu" for="tab_b">タブB</label>

2. 「#tab_a:checked ~ #tab_a_content」というセレクタがこのコードの要となることは上述しましたが、このセレクタは「同じ親要素を持つ兄弟要素に」効くセレクタです。
   しかしwordpressの場合、「input」が「div」や「p」に囲まれていないと、勝手に「p」コードを追加されてしまい、「同じ親要素を持つ兄弟要素」ではなくなってしまう場合があります。
   そのため、必ず「input」と「contents」をひとつの「div」でくるむように注意しましょう（※上記のコードはすでにくるまれています）。

タブを増やす場合

タブを増やしたい場合は、HTMLの

<input id="tab_a" type="radio" name="tab_menu" checked>
<label class="tab_menu" for="tab_a">タブA</label>
<input id="tab_b" type="radio" name="tab_menu">
<label class="tab_menu" for="tab_b">タブB</label>
<div id="tab_a_content" class="tab_content">
タブAの内容
</div>
<div id="tab_b_content" class="tab_content">
タブBの内容
</div>

の部分を、

<input id="tab_a" type="radio" name="tab_menu" checked>
<label class="tab_menu" for="tab_a">タブA</label>
<input id="tab_b" type="radio" name="tab_menu">
<label class="tab_menu" for="tab_b">タブB</label>
<input id="tab_c" type="radio" name="tab_menu">
<label class="tab_menu" for="tab_c">タブC</label>
<input id="tab_d" type="radio" name="tab_menu">
<label class="tab_menu" for="tab_d">タブD</label>
<div id="tab_a_content" class="tab_content">
タブAの内容
</div>
<div id="tab_b_content" class="tab_content">
タブBの内容
</div>
<div id="tab_c_content" class="tab_content">
タブCの内容
</div>
<div id="tab_d_content" class="tab_content">
タブDの内容
</div>

と増やし、CSSの

#tab_a:checked ~ #tab_a_content,
#tab_b:checked ~ #tab_b_content {
    display: block;
}

の部分を

#tab_a:checked ~ #tab_a_content,
#tab_b:checked ~ #tab_b_content,
#tab_c:checked ~ #tab_c_content,
#tab_d:checked ~ #tab_d_content {
    display: block;
}

と編集します。

Tweet