CSSでタブ切り替えを設置するカスタマイズ

大まかに分けると【釣り】と【ブログ】について書いている当サイト。

トップページを開いたときにごちゃごちゃ記事が混ざっているのは嫌だったので、ざっくりとカテゴリを分けるためにタブ切り替えにしたいなぁと思っていて。

今回、思い切って導入いたしました！

Contents

タブ切り替えのイメージ
参考にさせていただいたサイト
1. HTML
2. CSS
タブを入れ子にして複数設置しました！

タブ切り替えのイメージ

ボタン 1

ボタン１のコンテンツを表示します

ボタン 2

ボタン２のコンテンツを表示します

ボタン 3

ボタン３のコンテンツを表示します

こんな感じでクリックしたコンテンツが下部に表示されます！

参考にさせていただいたサイト

オシャレなサイトでとても分かりやすい『ものぐさWEBノート』さんから知恵をお借りしました！！ヾ(*・∀・)

CSSだけで使いやすく汎用性の高いタブ切り替え(複数設置対応)を実装する

先日コメントにてCocoonで使えるのオプションと使い方まとめで実装しているタブ切り替えについて質問をいただきました。これ↓このタブ切り替えは、ラジオボタンを利用してCSSだけで切り替えを実装出来るこちらのページを参考にカスタマイズしたもの

HTML

<div class="tab-wrap">
    <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">ボタン 1</label>
    <div class="tab-content">
        コンテンツ 1
    </div>
    <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">ボタン 2</label>
    <div class="tab-content">
        コンテンツ 2
    </div>
    <input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">ボタン 3</label>
    <div class="tab-content">
        コンテンツ 3
    </div>
</div>

CSS

タブのデザインはこのサイトに合わせたピンク系吹き出しにするためにコードを変更しました。

/**************************
 タブ切り替え
***************************/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
margin:5px 0;
}

.tab-label {
color: White;
background:lightgray;
  text-align: center;
padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
	flex: 1;
border-radius: 2px;
position: relative;
}

.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
 background:#ff9999;
}
.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 10px solid transparent;
border-top:10px solid #ff9999;
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
padding: 15px 0 0 0;
  opacity: 1;
  transition: .5s opacity;
}


/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}