コピペだけ！CSSでアイコン付きタブメニューをつくる方法

1 CSSのみで表現タブメニュー
- 1.1 HTML
- 1.2 CSS

CSSのみで表現タブメニュー

タブのみだけでなくアイコンもつけてます

HTML

<div class="tabs_mi"><input id="tab01" checked="checked" name="tab_mik_switch" type="radio" />
<label class="tab_mik_label" for="tab01">詳細情報</label>
<input id="tab02" name="tab_mik_switch" type="radio" />
<label class="tab_mik_label" for="tab02">アクセス</label>
<input id="tab03" name="tab_mik_switch" type="radio" />
<label class="tab_mik_label" for="tab03">口コミ</label>
<div id="tab01_content" class="tab_mik_content">

タブ01の内容

</div>
<div id="tab02_content" class="tab_mik_content">

タブ02の内容
</div>
<div id="tab03_content" class="tab_mik_content">

タブ03の内容

</div>
</div>

CSS

アイコンの設定はこの箇所

.tab_mik_label[for=”tab01″]::before { content: “\f1ad”; }
.tab_mik_label[for=”tab02″]::before { content: “\f1ad”; }
.tab_mik_label[for=”tab03″]::before { content: “\f1ad”; }

Unicodeを使用

.tabs_mi { margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.tab_mik_label {font-size: 12px; 
  color: #cc8294;
  font-weight: bold;
  border: solid 2px #cc8294;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  padding: 5px 10px;
  margin: 0 3px; 
  text-align: center; /* テキストを中央揃え */
}

.tab_mik_label:hover {
  opacity: 0.75;
}

.tab_mik_content {padding-top:30px; 
  flex: 100%;
  display: none;
  overflow: hidden;



  position: relative;
  animation: fadeIn 1s ease;  
}


input[name="tab_mik_switch"] {
  display: none;
}

.tabs_mi input:checked + .tab_mik_label {
  color: #fff;
  background-color: #cc8294;
}
.tabs_mi input:checked + .tab_mik_label::after {
  content: '';
  width: 0;
  
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #cc8294 transparent transparent transparent;
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  transition: all 0.3s ease 0s;
}

#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content {
  display: block;
}






.tab_mik_label[for="tab01"]::before {
    content: "\f1ad"; 
    font-family: "Font Awesome 5 Free";
    margin-right: 5px; /* アイコンとテキストの間のスペース */
}

.tab_mik_label[for="tab02"]::before {
    content: "\f276"; 
    font-family: "Font Awesome 5 Free"; 
    margin-right: 5px; 
}

.tab_mik_label[for="tab03"]::before {
    content: "\f086"; 
    font-family: "Font Awesome 5 Free"; 
    margin-right: 5px; 
}
@media only screen and (max-width: 767px) {
  .tab_mik_label {
    font-size: 12px; /* スマートフォンの場合のテキストサイズ */
  }
}