【初心者向け】CSSだけで切り替えができるタブメニューを実装する方法

どうもおはようポテト(@ohayoupoteto22)です。

CSSだけでタブ機能を作りたい…

というわけで今回は

「CSSだけでタブ機能を作りたい」

「jsとか使わずにササっとコピペできるものを探してる」

という方に向けて「CSSだけで切り替えができるタブメニューを実装する方法」をまとめました。

初学者の備忘録ゆえに至らない点もあると思いますが参考になれば幸いです⸝⸝- ̫ -⸝⸝

ブログ主

早速いってみよう！

お品書き

タブメニューの完成イメージ
タブメニューのコード
- HTML
- CSS
タブメニューの作成手順
CSSだけでタブメニューを実装する方法
まとめ

タブメニューの完成イメージ

鶏肉牛肉豚肉

こんな感じで、タブを選択すると下の内容が移り変わるものです。

お腹減ってきた…

くるみ

タブメニューのコード

とりあえずコードが知りたいんじゃぁという方向けに。結論から。

HTML

コードはこちら

<div class="tab">
  <input type="radio" name="tab" id="meat1" checked>
  <label for="meat1">鶏肉</label>
  <input type="radio" name="tab" id="meat2">
  <label for="meat2">牛肉</label>
  <input type="radio" name="tab" id="meat3">
  <label for="meat3">豚肉</label>
  <div class="foods">
    <ul>
      <li>唐揚げ</li>
      <li>竜田揚げ</li>
      <li>フライドチキン</li>
    </ul>
    <ul>
      <li>牛タン</li>
      <li>肉まん</li>
      <li>サイコロステーキ</li>
    </ul>
    <ul>
      <li>生姜焼き</li>
      <li>酢豚</li>
      <li>チャーシュー</li>
    </ul>
  </div>
</div>

CSS

コードはこちら

.tab{
  margin:2em auto;
  text-align: center;
}
.tab label{
  margin:3em .2em;
  padding:.7em 3em;
  border: 3px solid rgba(255,179,107,.5);
  border-radius:5px;
  box-shadow: 0 2px 2px rgba(0,0,0,.01);
  color:#555;
}
.tab label:hover{
  background-color:rgba(255,179,107,.5);
  transform:scale(1.1);
  opacity:.7;
}
.tab input{
  display:none;
}
.foods{
  display:block;
  margin-top:2em;
  text-align:center;
}
.foods ul{
  display:none;
  color:#333;
  text-align:center;
  list-style: none;
  -webkit-animation: slide 0.5s ease-in-out 0s;
  animation:slide 0.5s ease-in-out 0s;
}
.foods ul li:before{
  font-family: "Font Awesome 5 Free";/*Font Awesomeの読み込み必要*/
    content: "f105";
    color: #f8c678;
    font-weight: 900;
    padding-right:7px;
    padding-left:10px;
}
.tab input:nth-of-type(1):checked ~ .foods ul:nth-child(1),
.tab input:nth-of-type(2):checked ~ .foods ul:nth-child(2),
.tab input:nth-of-type(3):checked ~ .foods ul:nth-child(3){
  display:block;
}
.tab input:checked + label{
  background-color:rgba(255,179,107,.7);
  color:#fff;
}
@keyframes slide{
  0%{
    opacity:0;
    transform:translateY(20px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}

タブメニューの作成手順

ステップは大きく分けて3つ。

手順

step1

ラジオボタンをラベルを用意

step2

中身を非表示にする

step3

タブが選択されたら中身を表示する

レッツゴー！

くるみ

CSSだけでタブメニューを実装する方法

ラジオボタンとラベルを用意

<div class="tab">
  <input type="radio" name="tab" id="meat1" checked>
  <label for="meat1">鶏肉</label>
  <input type="radio" name="tab" id="meat2">
  <label for="meat2">牛肉</label>
  <input type="radio" name="tab" id="meat3">
  <label for="meat3">豚肉</label>
　(省略)

今回はラジオボタンと関連付けたラベルをタブにし、それがクリックされたら切り替わるようにします。

なのでまずタブの数ぶんラジオボタンをそれに関連付けたラベルを用意します。

更に、ラジオボタンのグループ化のためにそれぞれのname要素を親要素のクラスに指定します。

ブログ主

とりま一つ目の項目を「checked」にしておくよ

(省略)
<div class="foods">
    <ul>
      <li>唐揚げ</li>
      <li>竜田揚げ</li>
      <li>フライドチキン</li>
    </ul>
    <ul>
      <li>牛タン</li>
      <li>肉まん</li>
      <li>サイコロステーキ</li>
    </ul>
    <ul>
      <li>生姜焼き</li>
      <li>酢豚</li>
      <li>チャーシュー</li>
    </ul>
  </div>
</div>

そしたら次にタブの切り替えで表示させる中身を書いてあげます。

今回はそれぞれの肉に対しての料理をリストとして用意。

中身を非表示にする

.tab input{
  display:none;
}
.foods ul{
  display:none;
}

ラジオボタンは表示させる必要が無いので非表示に。

そしてリスト達も最初は非表示にしてあげます。

タブが選択されたら中身を表示する

.tab input:nth-of-type(1):checked ~ .foods ul:nth-child(1),
.tab input:nth-of-type(2):checked ~ .foods ul:nth-child(2),
.tab input:nth-of-type(3):checked ~ .foods ul:nth-child(3){
  display:block;
}

そしてそれぞれのタブが選択された時にそれに対応するリストが表示されるようにします。

「nth-of-type」と「nth-child」を使って「1つ目のタブが選択されたら一つ目のリストを表示する」、これを3つそれぞれに適用します。

displayを「block」にすることで非表示じゃなくなるんだね

くるみ

.tab input:checked + label{
  background-color:rgba(255,179,107,.7);
  color:#fff;
}

選択中のタブを分かりやすくしてあげれば、タブ機能としては完成です。

デザインを整える

上の手順のものだけだとあまりにも見た目が酷いので、おまけとしてタブ全体の装飾を。

アニメーションやらなんやら付けてそれっぽくしてあげます。

.tab{
  margin:2em auto;
  text-align: center;
}
.tab label{
  margin:3em .2em;
  padding:.7em 3em;
  border: 3px solid rgba(255,179,107,.5);
  border-radius:5px;
  box-shadow: 0 2px 2px rgba(0,0,0,.01);
  color:#555;
}
.tab label:hover{/*ホバー*/
  background-color:rgba(255,179,107,.5);
  transform:scale(1.1);
  opacity:.7;
}
.tab input{
  display:none;
}
.foods{
  display:block;
  margin-top:2em;
  text-align:center;
}
.foods ul{
  display:none;
  color:#333;
  text-align:center;
  list-style: none;
  -webkit-animation: slide 0.5s ease-in-out 0s;
  animation:slide 0.5s ease-in-out 0s;
}
.foods ul li:before{
  font-family: "Font Awesome 5 Free";/*Font Awesomeの読み込み必要*/
    content: "f105";
    color: #f8c678;
    font-weight: 900;
    padding-right:7px;
    padding-left:10px;
}
.tab input:nth-of-type(1):checked ~ .foods ul:nth-child(1),
.tab input:nth-of-type(2):checked ~ .foods ul:nth-child(2),
.tab input:nth-of-type(3):checked ~ .foods ul:nth-child(3){
  display:block;
}
.tab input:checked + label{
  background-color:rgba(255,179,107,.7);
  color:#fff;
}
@keyframes slide{
  0%{
    opacity:0;
    transform:translateY(20px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}

鶏肉牛肉豚肉

これで完成です。

お疲れ様!

くるみ