cssだけでタブの切り替えのデザイン(codepenサンプル)

プログラミング学習

タブのデザインはいろいろな方法があり、部位によって実装が違うものも多く、どれがいいのか迷いましたね。最終的な実装を紹介してしていきます。

cssだけでタブの切り替えのデザイン

このようなタブを作りたいです。

  • 横幅いっぱいに広がる
  • 角丸のタブをつくる

htmlとcss

<div class="tab-wrap">
    <input id="tab-a" type="radio" name="tab" class="tab-switch" checked="checked" />
    <input id="tab-b" type="radio" name="tab" class="tab-switch" />

    <div class="tab-item-wrap">
        <label class="tab-label tab-label-a" for="tab-a">タブa</label>
        <label class="tab-label tab-label-b" for="tab-b">タブb</label>
    </div>

    <div class="tab-content tab-content-a">
        <div class="tab-content-layout">
          aです。
        </div>
    </div>
    <div class="tab-content tab-content-b">
        <div class="tab-content-layout">
          bです。
        </div>
    </div>
</div>
.tab-wrap {
  position: relative;
  display: flex;
}

.tab-item-wrap {
  display: flex;
  flex: 1;
}

.tab-label {
  display: inline-block;
  flex: 1;
  height: 100px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  background: #bfbfbf;
  border-radius: 24px 24px 0 0;
}

.tab-content {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  min-height: 100px;
  background-color: #bfbfbf;
  border-radius: 24px;
  opacity: 0;
}

.tab-content-layout {
  margin: 10px;
}

#tab-a:checked ~ .tab-item-wrap .tab-label-a,
#tab-b:checked ~ .tab-item-wrap .tab-label-b {
  background-color: #aab828;
}

#tab-a:checked ~ .tab-content-a,
#tab-b:checked ~ .tab-content-b {
  background-color: #aab828;
  opacity: 1;
}

.tab-switch {
  display: none;
}

解説

input、label、コンテンツとひとつづつ書いている人も結構いましたが、各々まとめることにしました。ややCSSが複雑になりますが、htmlはすっきりとします。

チェックボックスはdisplay:none;で消します。

コンテンツの中身も表示非表示はdisplay:none;もできますが、少しアニメーションをかけたい場合はopacityが融通がききます。

display:flexは内容量によって伸び縮みしてしまいます。

横幅いっぱい均等にするのには、子要素にflex:1;を指定するか、width;100%;を指定するかです。

flex:1;は余白を補完してくれるものです。厳密には、flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0という意味です。flex-grow以外はデフォルト値なのでflex-growが変わると覚えるとよいでしょう。flex:1;は横幅を均等する以外にあまり使ったことないため、これ専用と覚えてしまってもいいかもしれません。

今回はflex:1;が入れ子構造にしてあります。ラベルはインライン要素のため ブロック要素display: inline-block;にしつつ、flex: 1;にしないと効かないです。

タブの中身はdisplay:none:で消すわけではありません。opacityです。文章がそこに存在するわけで、そのままだと透明にした文字量エリアが確保されて、後ろに書かれた文字下にさげってしまいます。そのため、position: absolute;で配置します。

最後に角丸を重ねるため、高さを若干調整します。

タブ内にリンクなどが含まれる場合、opacityはクリックできてしまいます。

pointer-events: none;とauto;の切り替えで制御します。

スポンサーリンク

cssだけでタブの切り替えのデザイン(codepenサンプル)

気になるサンプルをピックアップしました。

やっぱ角丸がわりと好きですね。作り方は全然違います。inputすら使わずリンクでやっていますね。

JavaScriptを使ったもの。

参考ツイート

コメント

タイトルとURLをコピーしました