どうもおはようポテト(@ohayoupoteto22)です。
CSSだけでタブ機能を作りたい…
「CSSだけでタブ機能を作りたい」
「jsとか使わずにササっとコピペできるものを探してる」
という方に向けて「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つ。
くるみ
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要素を親要素のクラスに指定します。
ブログ主
(省略)
<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つそれぞれに適用します。
くるみ
.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);
}
}
これで完成です。
くるみ
まとめ
以上、CSSだけで切り替えができるタブメニューを実装する方法でした。参考になれば幸いです!では⸝⸝- ̫ -⸝⸝