CSSタブメニューのコピペサンプル5選【レスポンシブ対応】

web
CSSタブメニューのコピペサンプル5選【レスポンシブ対応】

「CSSでタブメニューををデザインしたい。」
「できればレスポンシブ対応したタブメニューを作成したい。」

そんな方へ向けた記事です。

どうもー。WEB制作10年以上になってしまったガッチ(@gatchsite)です。

CSSフェードインアニメーションの記事が好評だったので、WEBサイトでよく使用するタブメニューのサンプルを作成しました。

CSS初心者でも簡単に使えるコピペサンプルを紹介してます。

ぜひ使ってみてください。コメントやシェアしてもらえたら泣いて喜びます(T ^ T)

CSSフェードインアニメーションが気になる方はこちらもどうぞ。

»cssでフェードインアニメーションの実装方法[コピペサンプルあり]

記事の内容はこちら

タブメニューとは

タブメニューとはページ遷移をしないで画面内の表示を切り替える表現方法です。

厳密に言うとページ遷移があるかどうかは関係ないのですが。。。

ページ遷移する場合はaタグのリンクで終わってしまうので、この記事では紹介していません。m(_ _)m

CSSタブメニューを作る際の考え方・設計

タブメニューは「クリックするタブの部分」「表示を切り替えるボディー部分」の2つから構成されます。

と言うことで、タブと表示させるボディーを1対1でペアリングする感じですね。

タブ①に対してはボディー①、タブ②に対してはボディー②のように決めてしまいます。

あとはクリックされたタブが「何番か」と、切り替えるボディーは「何番か」を判断できればOKですよね。

判断を行うのはJavascriptで行います。

タブメニューをクリックした際の流れ

  1. タブ①をクリックされたとします。
  2. JavaScriptのclickイベントでクリックを検知します。
  3. タブ自体の表示切り替えを行います。
  4. 全てのタブを非アクティブ(クリックされていない表示)に切り替えます。
  5. クリックされたタブのみアクティブ(クリック表示)にします。
  6. ボディーの表示切り替えを行います。
  7. クリックされたタブのdata属性(data-body)から表示させたいbodyの番号を取得します。
  8. 全てのボディーを非アクティブに切り替えます。
  9. 表示させたいボディーのみアクティブにします。

CSSタブメニューのデザインサンプル5選【レスポンシブ】

CSSで作成できるレスポンシブ対応したタブメニューを5つ載せています。

コピペで使用可ですので、気になった方はぜひ使ってくださいね。

タブメニューデザイン① 付箋のようなよく見かけるタイプ

タブの基本形サンプルです。

  • タブ1
  • タブ2
  • タブ3
  • タブ4
  • タブ5
タブのコンテンツ1
タブのコンテンツ2
タブのコンテンツ3
タブのコンテンツ4
タブのコンテンツ5
<ul class="tab1">
  <li class="tab1__item on"><span class="tab1__link" data-tab-body="1">タブ1</span></li>
  <li class="tab1__item"><span class="tab1__link" data-tab-body="2">タブ2</span></li>
  <li class="tab1__item"><span class="tab1__link" data-tab-body="3">タブ3</span></li>
  <li class="tab1__item"><span class="tab1__link" data-tab-body="4">タブ4</span></li>
  <li class="tab1__item"><span class="tab1__link" data-tab-body="5">タブ5</span></li>
</ul>
<div class="tab1-body">
  <div class="tab1-body__item tab1-body__item--1 on">
    タブのコンテンツ1
  </div>
  <div class="tab1-body__item tab1-body__item--2">
    タブのコンテンツ2
  </div>
  <div class="tab1-body__item tab1-body__item--3">
    タブのコンテンツ3
  </div>
  <div class="tab1-body__item tab1-body__item--4">
    タブのコンテンツ4
  </div>
  <div class="tab1-body__item tab1-body__item--5">
    タブのコンテンツ5
  </div>
</div>
<style>
.tab1{
  display: flex;
  flex-direction: row;
  text-align: center;
  background-color:#fff !important;
  margin:0 !important;
}
.tab1__item{
  flex:1;
  flex-basis: 120px;
}
.tab1__link{
  display: block;
  text-decoration: none;
  color: #fff;
  background-color:#65c6ba;
  cursor:pointer;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}
.tab1__link.on{
  background-color:#b1e2dc;
}
.tab1-body__item{
  margin: 30px 15px;
  display:none;
  text-align:center;
}
.tab1-body__item.on{
  display:block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
  var $tab__link = $(".tab1__link");
  var $tab_body_item = $(".tab1-body__item");
  $tab__link.on("click",function(e){
    var target = $(e.currentTarget);
    //タブの表示非表示
    $tab__link.removeClass("on");
    target.addClass("on");
    //タブの中身の表示非表示
    var num = target.data("tab-body");
    $tab_body_item.removeClass("on");
    $(".tab1-body__item--"+num).addClass("on");
  });
});
</script>

タブメニューデザイン② ボタンタイプ

ボタンタイプもよく見かけますね。

フラットデザインを取り入れたサイトで取り入れられている印象があります。

  • タブ1
  • タブ2
  • タブ3
  • タブ4
  • タブ5
タブのコンテンツ1
タブのコンテンツ2
タブのコンテンツ3
タブのコンテンツ4
タブのコンテンツ5
<ul class="tab2">
  <li class="tab2__item on"><span class="tab2__link" data-tab-body="1">タブ1</span></li>
  <li class="tab2__item"><span class="tab2__link" data-tab-body="2">タブ2</span></li>
  <li class="tab2__item"><span class="tab2__link" data-tab-body="3">タブ3</span></li>
  <li class="tab2__item"><span class="tab2__link" data-tab-body="4">タブ4</span></li>
  <li class="tab2__item"><span class="tab2__link" data-tab-body="5">タブ5</span></li>
</ul>
<div class="tab2-body">
  <div class="tab2-body__item tab2-body__item--1 on">
    タブのコンテンツ1
  </div>
  <div class="tab2-body__item tab2-body__item--2">
    タブのコンテンツ2
  </div>
  <div class="tab2-body__item tab2-body__item--3">
    タブのコンテンツ3
  </div>
  <div class="tab2-body__item tab2-body__item--4">
    タブのコンテンツ4
  </div>
  <div class="tab2-body__item tab2-body__item--5">
    タブのコンテンツ5
  </div>
</div>
<style>
.tab2{
  display: flex;
  flex-direction: row;
  text-align: center;
  background-color:#fff !important;
  margin:0 !important;
}
.tab2__item{
  flex:1;
  flex-basis: 120px;
}
.tab2__link{
  display: block;
  text-decoration: none;
  color: #fff;
  background-color:#65c6ba;
  cursor:pointer;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}
.tab2__link.on{
  background-color:#b1e2dc;
}
.tab2-body__item{
  margin: 30px 15px;
  display:none;
  text-align:center;
}
.tab2-body__item.on{
  display:block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
  var $tab__link = $(".tab2__link");
  var $tab_body_item = $(".tab2-body__item");
  $tab__link.on("click",function(e){
    var target = $(e.currentTarget);
    //タブの表示非表示
    $tab__link.removeClass("on");
    target.addClass("on");
    //タブの中身の表示非表示
    var num = target.data("tab-body");
    $tab_body_item.removeClass("on");
    $(".tab2-body__item--"+num).addClass("on");
  });
});
</script>

タブメニューデザイン③ アニメーションを取り入れたタイプ

アニメーションが加わるとグッと印象が変わりますね。

  • タブ1
  • タブ2
  • タブ3
  • タブ4
  • タブ5
タブのコンテンツ1
タブのコンテンツ2
タブのコンテンツ3
タブのコンテンツ4
タブのコンテンツ5
<ul class="tab3">
  <li class="tab3__item"><span class="tab3__link on" data-tab-body="1">タブ1</span></li>
  <li class="tab3__item"><span class="tab3__link" data-tab-body="2">タブ2</span></li>
  <li class="tab3__item"><span class="tab3__link" data-tab-body="3">タブ3</span></li>
  <li class="tab3__item"><span class="tab3__link" data-tab-body="4">タブ4</span></li>
  <li class="tab3__item"><span class="tab3__link" data-tab-body="5">タブ5</span></li>
</ul>
<div class="tab3-body">
  <div class="tab3-body__item tab3-body__item--1 on">
    タブのコンテンツ1
  </div>
  <div class="tab3-body__item tab3-body__item--2">
    タブのコンテンツ2
  </div>
  <div class="tab3-body__item tab3-body__item--3">
    タブのコンテンツ3
  </div>
  <div class="tab3-body__item tab3-body__item--4">
    タブのコンテンツ4
  </div>
  <div class="tab3-body__item tab3-body__item--5">
    タブのコンテンツ5
  </div>
</div>
<style>
.tab3{
  position:relative;
  display: flex;
  flex-direction: row;
  text-align: center;
  background-color:#fff !important;
  margin:0 !important;
  padding:10px 0 !important;
}
.tab3:after{
  content:"";
  position:absolute;
  top:10px;
  left:0;
  display:block;
  width:20%;
  height:32px;
  border:solid 1px #444;
  border-radius:4px;
  transition:all 0.6s ease;
}
.tab3--1:after{
  left:0;
}
.tab3--2:after{
  left:20%;
}
.tab3--3:after{
  left:40%;
}
.tab3--4:after{
  left:60%;
}
.tab3--5:after{
  left:80%;
}
.tab3__item{
  flex:1;
}
.tab3__link{
  display: block;
  text-decoration: none;
  color: #444;
  cursor:pointer;
}
.tab3__link.on{
}
.tab3-body__item{
  margin: 30px 15px;
  display:none;
  text-align:center;
}
.tab3-body__item.on{
  display:block;
}

</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
  var $tab = $(".tab3");
  var $tab__link = $(".tab3__link");
  var $tab_body_item = $(".tab3-body__item");
  $tab__link.on("click",function(e){
    var target = $(e.currentTarget);
    //タブの中身の表示非表示
    var num = target.data("tab-body");
    $tab_body_item.removeClass("on");
    $(".tab3-body__item--"+num).addClass("on");
    //タブの表示非表示
    $tab.removeClass();
    $tab.addClass("tab3 tab3--"+num);

  });
});
</script>

タブメニューデザイン④ フェードインフェードアウト

タブのボディー部分にフェードインアニメーションを取り入れたタイプです。

タブにもちょっとしたアニメーションを追加してリッチな表現を。

  • タブ1
  • タブ2
  • タブ3
  • タブ4
  • タブ5
タブのコンテンツ1
フェードインの切り替えができます。コンテンツ2
コレはコンテンツ3です。
コンテンツ4です。
タブ5です。
<ul class="tab4">
  <li class="tab4__item"><span class="tab4__link on" data-tab-body="1">タブ1</span></li>
  <li class="tab4__item"><span class="tab4__link" data-tab-body="2">タブ2</span></li>
  <li class="tab4__item"><span class="tab4__link" data-tab-body="3">タブ3</span></li>
  <li class="tab4__item"><span class="tab4__link" data-tab-body="4">タブ4</span></li>
  <li class="tab4__item"><span class="tab4__link" data-tab-body="5">タブ5</span></li>
</ul>
<div class="tab4-body">
  <div class="tab4-body__item tab4-body__item--1 on">
    タブのコンテンツ1
  </div>
  <div class="tab4-body__item tab4-body__item--2">
    フェードインの切り替えができます。コンテンツ2
  </div>
  <div class="tab4-body__item tab4-body__item--3">
    コレはコンテンツ3です。
  </div>
  <div class="tab4-body__item tab4-body__item--4">
    コンテンツ4です。
  </div>
  <div class="tab4-body__item tab4-body__item--5">
    タブ5です。
  </div>
</div>
<style>
.tab4{
  display: flex;
  flex-direction: row;
  text-align: center;
  background-color:#fff !important;
  margin:0 !important;
}
.tab4__item{
  flex:1;
}
.tab4__link{
  position:relative;
  display: block;
  text-decoration: none;
  color: #444;
  cursor:pointer;
}
.tab4__link:before{
  content:"";
  position:absolute;
  bottom:0;
  right:50%;
  width:0;
  height:2px;
  background-color:#444;
  transition:all 0.4s ease-out;
}
.tab4__link:after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  width:0;
  height:2px;
  background-color:#444;
  transition:all 0.4s ease-out;
}
.tab4__link.on:before{
  width:50%;
}
.tab4__link.on:after{
  width:50%;
}
.tab4-body{
  position:relative;
  height:120px;
}
.tab4-body__item{
  position:absolute;
  width:100%;
  margin: 30px 15px;
  text-align:center;
  opacity:0;
  transition:all 0.6s ease-out;
}
.tab4-body__item.on{
  opacity:1;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
  var $tab__link = $(".tab4__link");
  var $tab_body_item = $(".tab4-body__item");
  $tab__link.on("click",function(e){
    var target = $(e.currentTarget);
    //タブの表示非表示
    $tab__link.removeClass("on");
    target.addClass("on");
    //タブの中身の表示非表示
    var num = target.data("tab-body");
    $tab_body_item.removeClass("on");
    $(".tab4-body__item--"+num).addClass("on");
  });
});
</script>

タブメニューデザイン⑤ 横スクロールタイプ

スライドに似ていますが、ボディー内を横に移動するタイプも見かけますね。

サンプルでは、永遠に右から左へ受け流しています。

  • タブ1
  • タブ2
  • タブ3
  • タブ4
  • タブ5
タブのコンテンツ1
フェードインの切り替えができます。コンテンツ2
コレはコンテンツ3です。
コンテンツ4です。
タブ5です。
<ul class="tab5">
  <li class="tab5__item"><span class="tab5__link" data-tab-body="1">タブ1</span></li>
  <li class="tab5__item"><span class="tab5__link" data-tab-body="2">タブ2</span></li>
  <li class="tab5__item"><span class="tab5__link" data-tab-body="3">タブ3</span></li>
  <li class="tab5__item"><span class="tab5__link" data-tab-body="4">タブ4</span></li>
  <li class="tab5__item"><span class="tab5__link" data-tab-body="5">タブ5</span></li>
</ul>
<div class="tab5-body">
  <div class="tab5-body__item tab5-body__item--1 in">
    タブのコンテンツ1
  </div>
  <div class="tab5-body__item tab5-body__item--2">
    フェードインの切り替えができます。コンテンツ2
  </div>
  <div class="tab5-body__item tab5-body__item--3">
    コレはコンテンツ3です。
  </div>
  <div class="tab5-body__item tab5-body__item--4">
    コンテンツ4です。
  </div>
  <div class="tab5-body__item tab5-body__item--5">
    タブ5です。
  </div>
</div>
<style>
.tab5{
  position:relative;
  display: flex;
  flex-direction: row;
  text-align: center;
  background-color:#fff !important;
  margin:0 !important;
  padding:10px 0 !important;
}
.tab5:after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:20%;
  height:2px;
  background-color:#444;
  transition:all 0.6s ease;
}
.tab5--1:after{
  left:0;
}
.tab5--2:after{
  left:20%;
}
.tab5--3:after{
  left:40%;
}
.tab5--4:after{
  left:60%;
}
.tab5--5:after{
  left:80%;
}
.tab5__item{
  flex:1;
}
.tab5__link{
  position:relative;
  display: block;
  text-decoration: none;
  color: #444;
  cursor:pointer;
}
.tab5-body{
  overflow:hidden;
  position:relative;
  height:120px;
}
.tab5-body__item{
  position:absolute;
  top:0;
  left:100%;
  width:100%;
  height:120px;
  text-align:center;
}
.tab5-body__item.in{
  left:0;
  transition:all 0.6s ease-out;
}
.tab5-body__item.out{
  left:-100%;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
  var $tab = $(".tab5");
  var $tab__link = $(".tab5__link");
  var $tab_body_item = $(".tab5-body__item");
  $tab__link.on("click",function(e){
    var target = $(e.currentTarget);
    //タブの中身の表示非表示
    var num = target.data("tab-body");
    $(".tab5-body__item.in").addClass("out");
    $(".tab5-body__item--"+num).addClass("in");
    //タブの表示非表示
    $tab.removeClass();
    $tab.addClass("tab5 tab5--"+num);
  });
  $tab_body_item.on("transitionend",function(e){
    console.log(e);
    $(".tab5-body__item.out").removeClass("in out");
  })

});
</script>

CSSダブメニューのまとめ

CSSタブメニューのサンプルを5つ紹介してきました。

全てレスポンシブ対応のデザインを採用してCSSのflex:box;を使ったものです。

タブだけでもまだまだデザインを変更してWEBサイトにあったものができそうですね。

ではでは、ガッチ(@gatchsite)でした。

オススメプログラミングスクール
  • SkillHacks : Rubyを学びたい方。動画教材とLINE@による無制限サポート
  • TechAcademy : php/wordpressを学びたい方。現役エンジニアのマンツーマン
  • CodeCamp : Pythonを学びたい方。データサイエンス初級をオンラインで

関連の記事を読んでみる