CSSとHTMLだけでタブUIを作る

See the Pen 2014-09-11 by nju33 (@nju33) on CodePen.

HTML

HTMLは次のようにしています。

<div class="wrapper">

<div class="section-">
  <input class="section-radio" id="tab1" name="tab" type="radio" checked>
  <label class="section-name section-one" for="tab1">Tab1</label>
  <div class="section-content">
    <span class="section-inner">Contents 1 display</span>
  </div>
</div>

<div class="section-">
  <input class="section-radio" id="tab2" name="tab" type="radio">
  <label class="section-name section-two" for="tab2">Tab2</label>
  <div class="section-content">
    <span class="section-inner">Contents 2 display</span>
  </div>
</div>

<div class="section-">（略）</div>
</div>

Radioボタンとそのラベル、タブの内容で１つのグループにします。（以降、タブグループと呼びます）

最初から表示させたい内容のグループにあるRadioボタンに、checkedをつけておきます。
また、すべてのRadioボタンのname属性は同じ値にします。

最後に、<label>には出てきた順番にsection-one、section-twoのようなclassを振っておきます。

CSS

見た目的に整えてるだけの部分とかが混じっているので、要点だけ。（少し変えてる部分があります）

すべてのタブグループを重ね合わせる

.wrapper {
  position: relative;
  height: 100vh    /* 要素の高さ */
}

すべてのタブグループを覆っている要素、.wrapperにposition: relativeを設定します。
タブグループにはposition: absoluteを設定して高さが無くなってしまうので、heightの値は微調整が必要かもしれません。

.section- {
  position: absolute;
  top: 0;
}

タブグループの親要素にposition: absoluteとtopを設定して、同じ高さですべてのタブグループを重ねます。

Radioボタンを消す

Radioボタンのid値と<label>のfor値を一緒にすることで、<label>をクリックしてもRadioボタンをチェックできるようになります。
見た目的にもいらないのでRadioボタンはすべて消してしまいます。

.section-radio {
  display: none;
}

タブボタンのレイアウト

.section-name {
  position: relative;
  z-index: 10;
  /* 他、選択されていない時のCSSを記述 */
}

<label>はそのままでは最後に重ねたタブグループの<label>しか押すことができません。
押せるようにするには、position: relative、z-index: 10として重なりの一番上へ<label>を持ってきます。

選択されていない時のスタイルもここへ記述します。

.section-two {
  margin-left: 66px;
}

.section-three {
  margin-left: 132px;
}

２つ目以降のタブグループの<label>には、適当なmargin-leftを掛けて綺麗に横並びになるように調整します。

Radioボタンがチェックされた時のスタイルは次のセレクタの中へ記述します。

.section-radio:checked + .section-name {
  /* 選択された時のCSSを記述 */
}

+を使うことで、チェックされたRadioボタンと同じ階層の次の要素へスタイルを設定できます。
今回は、+ .section-nameとすることで次の要素である、<label>要素へスタイルを設定してます。

内容部分のレイアウト

まず、すべてのタブグループの内容をdisplay: noneで消してしまい、選択されたタブの内容はdisplay: blockと上書きして表示させます。

.section-content {
  display: none;
}

.section-radio:checked ~ .section-content {
  display: block;
}

~を使うことで、チェックされたRadioボタンの後にある同じ階層の要素へスタイルを設定することができます。今回は、~ .section-contentとすることで２つ後の要素な、内容要素へスタイルを設定してます。

CODEPENのすべてのCSSを見たい場合は、Sassタブを選択して右下にある「VIEW COMPILED」をクリックすると見ることができるます。よかったら参考にどどどどうぞ！

Milk+ea

Weblog Is My Hobby.