HTMLとCSSのみで作るタブ表示

  • 投稿日
  • 更新日
  • 著者 Takafumi Higa
  • カテゴリー HTML/CSS

ラジオボタンとは

  • <input>タグのtype属性
  • 複数用意された選択肢の中からひとをつを選択できるボタンのこと

お問い合わせフォームなどに良く実装されている場合があります。

【参考】

http://www.htmq.com/html/input_radio.shtml

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio

例

See the Pen
Untitled by 比嘉貴文 (@taka239133)
on CodePen.

解説

作り方は

  1. id（※labelのfor=”tab1″と合わせる）をつける
  2. typeとはラジオボタンを作る（それ以外にもcheckboxなどもある）
  3. name フォームの部品に名前をつける
  4. checked 初期値で選択された状態にする

タブを作る

ラジオボタンの機能を利用して、HTMLとCSSのみでタブを実装することができます。

分かりやすくするためにCSSは最低限にしております。

HTML

<section class="tab wrapper">
        <input id="tab1" type="radio" name="tab" checked="checked">
        <label class="tab-item" for="tab1">タブ1</label>
        <input id="tab2" type="radio" name="tab">
        <label class="tab-item" for="tab2">タブ2</label>
        <div class="tab-content" id="tab-content1">コンテンツ1の中身</div>
        <div class="tab-content" id="tab-content2">コンテンツ2の中身</div>
</section>

なるべく、Flexboxで横並びにすることを考えましたが、そうすると階層が変わるため、for属性が効かなくなります。なので、input、label、コンテンツが入る、divは同一階層にする必要があります。

CSS

.wrapper {
  padding: 40px 20px;
  height: 50vh;
}

ul {
  padding: 20px;
}

.tab-item {
  background-color: gray;
  padding: 20px;
  float: left;
  //タブの数で割る数字を変える
  width: calc(100% / 2);
}

//ラジオボタンにチェックが付くといろが変わる
// + は指定した要素に隣接した要素に装飾が適用される
input:checked + .tab-item {
  background-color: black;
  color: white;
}

//タブの中身

.tab-content {
  border: solid 2px black;
  padding: 40px;
  //非表示にする
  display: none;
  //非表示にする
  clear: both;
}

//すべのラジオボタンを非表示
input[name="tab"] {
  display: none;
}

// 〜 は#c-tab1:checked 以降にあるすべての#c-tab-content1に装飾が適用される

#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2 {
  display: block;
}

See the Pen
Untitled by 比嘉貴文 (@taka239133)
on CodePen.

.tab-contentにあります、clear:both;というプロパティを知らなかったために苦労しました。

clear – CSS: カスケーディングスタイルシート | MDN
clear は CSS のプロパティで、要素をその前にある浮動要素の下に移動 (clear) する必要があるかどうかを設定します。clear プロパティは、浮動要素と非浮動要素のどちら…
developer.mozilla.org
セレクタについて
input:checked + .tab-item

こちらは隣接兄弟結合子 + の後ろに続く要素にスタイルを当てるセレクタです。

例 div + p とするとdivタグのすぐ後ろのpタグにスタイルが適応されます。

See the Pen
Untitled by 比嘉貴文 (@taka239133)
on CodePen.

input[name=”tab”]
tab1:checked ~ #tab-content1,
tab2:checked ~ #tab-content2

の「〜」は一般兄弟結合子

同じ親要素をもつ兄弟子要素を選択します。

（ 参考サイト）https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors

See the Pen
Untitled by 比嘉貴文 (@taka239133)
on CodePen.

最低限のコードで一旦完成

See the Pen
CSSのみで作るタブ by 比嘉貴文 (@taka239133)
on CodePen.

タブとスタイルの追加

タブの数を4つに増やすし、現在のタブに下線を追加しました。

See the Pen
Untitled by 比嘉貴文 (@taka239133)
on CodePen.