ミギムキ

[CSS] CSSだけでタブ形式の表示切り替えをしたい

サンプルコード

html

<div class="tab"> <input type="radio" name="tabs" id="tab_01" checked> <input type="radio" name="tabs" id="tab_02"> <input type="radio" name="tabs" id="tab_03"> <div class="tab_btns"> <label for="tab_01" class="tab_btn">タブ1</label> <label for="tab_02" class="tab_btn">タブ2</label> <label for="tab_03" class="tab_btn">タブ3</label> </div> <div class="tab_pages"> <div class="tab_page"> <p>タブ1の内容</p> </div> <div class="tab_page"> <p>タブ2の内容</p> </div> <div class="tab_page"> <p>タブ3の内容</p> </div> </div> </div>
  • タブの数分inputタグを用意しています。このinputタグはCSSで非表示にされます
  • 「tab_btns」クラスの中にタブの数分ラベルを用意します。for属性で前述のinputタグと連動させます。これで、ラベルをクリックしたときに連動するinputタグがチェックされるようになります
  • 「tab_pages」クラスの中にタブの数分ページを用意します。これらのページにはタグの番号と紐づけるようなクラス設定は不要です
スポンサー広告

CSS

.tab > input[type="radio"] { display: none; } .tab_btns { display: flex; margin: 0px -2px -1px; } .tab_btn { padding: 1em; margin: 0px 2px; width: 100%; border: 1px solid #3388dd; text-align: center; } .tab_btn:hover { cursor: pointer; } .tab_pages { position: relative; z-index: 1; border: 1px solid #3388dd; background-color: #fff; } .tab_page { display: none; } .tab > #tab_01:checked ~ .tab_btns > label[for="tab_01"], .tab > #tab_02:checked ~ .tab_btns > label[for="tab_02"], .tab > #tab_03:checked ~ .tab_btns > label[for="tab_03"] { position: relative; z-index: 2; border-bottom: 1px solid #fff; } .tab > #tab_01:checked ~ .tab_pages > .tab_page:nth-of-type(1), .tab > #tab_02:checked ~ .tab_pages > .tab_page:nth-of-type(2), .tab > #tab_03:checked ~ .tab_pages > .tab_page:nth-of-type(3) { display: block; }
  • 「tab_pages」の中の「tab_page」は「display: none;」で非表示にしています。タブに対応したページを表示させるために以下のようなスタイルを指定します
<input type="radio" name="tabs" id="tab_01" checked> <input type="radio" name="tabs" id="tab_02"> <input type="radio" name="tabs" id="tab_03">
  • ラベルをクリックすると対応するinputにチェックがつき、「:checked」セレクタが有効になります
  • 「~」でinputタグの後ろにある同階層の要素「tag_pages」を特定し、その配下にある「tag_page」の「display」を「block」にすることで表示を有効にします
  • inputタグにつけたIDのページ番号(#tab_00)と同じn番目(nth-of-type)の「tag_page」を紐づけてタグとページを連動させています

タブの数を増やしたい場合

html

<label for="tab_01" class="tab_btn">タブ1</label> <label for="tab_02" class="tab_btn">タブ2</label> <label for="tab_03" class="tab_btn">タブ3</label> <div class="tab_page"> <p>タブ1の内容</p> </div> <div class="tab_page"> <p>タブ2の内容</p> </div> <div class="tab_page"> <p>タブ3の内容</p> </div>
スポンサー広告

CSS

.tab > #tab_01:checked ~ .tab_pages > .tab_page:nth-of-type(1), .tab > #tab_02:checked ~ .tab_pages > .tab_page:nth-of-type(2), .tab > #tab_03:checked ~ .tab_pages > .tab_page:nth-of-type(3) { display: block; } .tab > #tab_01:checked ~ .tab_pages > .tab_page:nth-of-type(1), .tab > #tab_02:checked ~ .tab_pages > .tab_page:nth-of-type(2), .tab > #tab_03:checked ~ .tab_pages > .tab_page:nth-of-type(3) { display: block; }