【コーディング解説】HTMLとCSSでタブグループをつくる

今回は、HTMLとCSSを使ってタブグループ(TabGroup)をコーディングしていきます。プログラミング初学者やコーディング練習として模写をしたい駆け出しエンジニアにもおすすめです。

タブのUIはブログ記事をカテゴリ別の表示に切り替えたり、マイページや管理画面で情報量が多い時にコンテンツを整理する目的でつかわれます。角丸(border-radius)を上下左右個別に指定する方法やCSSでパーツの状態管理をする方法が学べます。

タブグループのデザイン

完成形のデザインを確認しましょう

マイページにでてくるようなタブを想定したデザインです。３つのうちのいずれかが常に活性化しています。

タブグループのCSS基本情報

配置/ポジション情報

タブグループ全体を中央寄せ

形/サイズ情報

タブグループ全体の横幅は100%、最大幅は640px
タブ一つ一つの横幅は自動(auto)で伸縮する。最小幅は80px。
文字の周りの余白は縦が10px、横は8px
タブの左上と右上に角丸8px

配色/装飾情報

タブの背景色は黒(#333)、文字色は白(#FFF)
下ボーダーを3px、#888、solid(直線)
活性化したタブは背景色は白(#FFF)、文字色は黒(#333)
活性化したタブは上、左、右、それぞれにボーダーを3px、#888、solid(直線)

文字情報

通常の文字サイズは16px
活性化時は文字サイズは20px、太字

実際のソースコード

実際のソースコードは以下の通りです。
コーディングのお手本として参考にしてください。

HTML

<div class="tab-group">
  <div class="tab-item is-active">会員情報</div>
  <div class="tab-item">お気に入り</div>
  <div class="tab-item">閲覧履歴</div>
</div>

CSS

.tab-group{
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
}
.tab-item{
  margin-bottom: 10px;
  flex: auto;
  min-width: 80px;
  padding: 10px 8px;
  text-align: center;
  background: #333;
  font-size: 16px;
  color: #fff;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid 3px #888;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.tab-item.is-active{
    background: #fff;
    color: #333;
    border-top: solid 3px #888;
    border-left: solid 3px #888;
    border-right: solid 3px #888;
    border-bottom: none;
    font-weight: bold;
    font-size: 20px;
}

HTMLとCSSのコーディング解説

タブグループのコーディングで必要となるいくつかポイントを解説していきます。

タブの左上と右上にborder-radius(角丸)をつける

.tab-item{
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

border-top-left-radius(左上)とborder-top-right-radius（右上）とすることで個別に角丸が指定できます。

活性化しているタブだけスタイルを変える

.tab-item{
   /* 非活性な通常タブのスタイル */
}
.tab-item.is-active{
   /* 活性化したタブのスタイル */
}

活性化しているタブにのみis-activeというクラスをつけてスタイルをあてています。これによってis-activeクラスの付け替えのみでタブの状態を表現することができます。

YutoSeta

Tab Item is Active.(タブはアクティブな状態です)
要素の状態を表す時には「is-」という接頭辞をつけたクラスを元の要素のクラスと併せて付与しています。SMACSS（スマックス）のステートクラスというCSS設計の概念を取り入れています。

CodePenで完成品デモをみる。

まとめ

今回はタブグループのコーディングをしてみました。そして、CSSのクラス付け替えによるコンポーネントの状態(ステートメント)管理を解説しました。パーツごとにコーディングをして、パーツの状態ごとにセレクタを分けてあげるとソースコードも綺麗に読みやすくなります。

この記事をかいてみての感想

Yuto Seta

HTMLやCSSに関する質問やブログ記事として書いて欲しいテーマなどあれば、ぜひコメントまってます！

▼感想
いつものパーツコーディングの記事のスタイルを変えてみたんだけど、前のと比べて読みやすくなったかな？まだ文章量減らしてもいい気がしている。

▼書き足したい記事や内容のメモ
・タブの切り替えのjQueryの記事
・UIごとの参考クラス名を一覧できる記事