システム Edit : 2021.02.08 Update : 2024.11.07

cssでタブ型をつくってみる

先日、ノートの付箋?のようなタブの形をcssで作る機会があったので、作り方をまとめます📝 切り替え方法はjsガチガチで書いてますが、その時々に合わせて色々やり方があると思うので、もっとスマートに作るのがいいかと思います。作ろうとしているタブは、👇のようなデザインで、タブを切り替えると内容が変わるようなものです。

MENU01

MENU02

白飯
あさりの味噌汁
鮭フレーク
きんぴらごぼう

食パン
コーンスープ
イチゴジャム
目玉焼き

Contents

HTML
css
js

HTML

MENU01

MENU02

白飯
あさりの味噌汁
鮭フレーク
きんぴらごぼう

食パン
コーンスープ
イチゴジャム
目玉焼き

css

.tab_menu .wrap_menu {
  border-bottom: 2px solid #0b367f;
  position: relative;
  padding: 25px;
}
.tab_menu .wrap_menu .tab {
  position: absolute;
  right: 5%; /* タブの位置を固定 */
  bottom: -2.0px;
  background: #fff;
  color: #0b367f;
  border-left: 2px solid #0b367f;
  border-right: 2px solid #0b367f;
  border-top: 2px solid #0b367f;
  border-bottom: 2px solid #0b367f;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 43%;
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  text-align: center;
  padding: 15px 0 10px;
  cursor: pointer;
}
.tab_menu .wrap_menu .tab.t01 {
  left: 5%;　/* MENU01側のタブは左に固定 */
 }
.tab_menu .wrap_menu .tab.display {
  border-bottom: 0;　/* 選択されているタブの場合、border-bottomを消す */
}
.tab_menu .wrap_menu .tab p {
　margin-bottom: 0;
}
.content_tab {
  color: #0b367f;
  padding: 50px 20px;
  font-size: 18px;
  display: none;
}
.content_tab.display {
  display: block;
}

.tab_menu .wrap_menu {

border-bottom: 2px solid #0b367f;

position: relative;

padding: 25px;

}

.tab_menu .wrap_menu .tab {

position: absolute;

right: 5%; /* タブの位置を固定 */

bottom: -2.0px;

background: #fff;

color: #0b367f;

border-left: 2px solid #0b367f;

border-right: 2px solid #0b367f;

border-top: 2px solid #0b367f;

border-bottom: 2px solid #0b367f;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

width: 43%;

font-size: 20px;

font-weight: 600;

position: absolute;

text-align: center;

padding: 15px 0 10px;

cursor: pointer;

}

.tab_menu .wrap_menu .tab.t01 {

left: 5%;　/* MENU01側のタブは左に固定 */

}

.tab_menu .wrap_menu .tab.display {

border-bottom: 0;　/* 選択されているタブの場合、border-bottomを消す */

}

.tab_menu .wrap_menu .tab p {

　margin-bottom: 0;

}

.content_tab {

color: #0b367f;

padding: 50px 20px;

font-size: 18px;

display: none;

}

.content_tab.display {

display: block;

}

js

$(function(){
  $('.tab').click(function(){
    var tab_name = $(this).data('tab');  //.tabのdata-tabの内容を取得
    if(tab_name == 't01') {              //data-tabの値によって、displayクラスを切り替えて表示する内容を変更する
      $(this).addClass('display');
      $('.t02').removeClass('display');
      $('#t01').addClass('display');
      $('#t02').removeClass('display');
    } else {
      $(this).addClass('display');
      $('.t01').removeClass('display');
      $('#t02').addClass('display');
      $('#t01').removeClass('display');
    }
  });
});