CSSだけでスライドするタブ切り替えを考えてみた

汎用性の高いタブ切り替えを元にスライドして切り替わる動きをCSSだけで出来ないかなぁって事で考えてみました。

ちゃんと左右にスクロールしたようにスライドします。

この記事の目次

サンプル
基本構造
CSS解説
動作確認
さいごに

サンプル

See the Pen CSSだけでスライドするタブ切り替え by 草村 (@kusamura_mono) on CodePen.38847

目次に戻る

基本構造

サンプル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">ボタン１</label>
    <div class="tab-content">
        <p>コンテンツ１</p>
    </div>
    <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">ボタン２</label>
    <div class="tab-content">
        <p>コンテンツ２</p>
    </div>
    <input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">ボタン３</label>
    <div class="tab-content">
        <p>コンテンツ３</p>
    </div>
</div>

HTMLはこんな感じの構造です。実際の動作はサンプル(CodePen)で確認出来ます。

DIV.tab-wrap >
  INPUT[type="radio"].tab-switch + LABEL.tab-label + DIV.tab-content +
  INPUT[type="radio"].tab-switch + LABEL.tab-label + DIV.tab-content +
  INPUT[type="radio"].tab-switch + LABEL.tab-label + DIV.tab-content

ラジオボックスで表示が切り替わる仕組みです。
ボタン部分(.tab-label)はorder: -1;で並べています。

このタブ切り替えは以前記事にした汎用性の高いタブ切り替えのHTMLを使用しています。

基本的なタブ切り替えの構造についてはこちらの記事でざっくり解説していますのでよろしければご覧ください。

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

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

目次に戻る

CSS解説

CSS全体をみる

.tab-wrap {
	background: White;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}

.tab-label {
	color: Gray;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.tab-label:hover {
	background: rgba(0, 191, 255,.1);
}

.tab-switch:checked + .tab-label {
	color: DeepSkyBlue;
}

.tab-label::after {
	background: DeepSkyBlue;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}

.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	height:0;
	opacity:0;
	padding: 0 20px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}

.tab-switch {
	display: none;
}

ここではスライドするように見えるCSSの指定について解説していきます。

アクティブなタブより前のタブ
アクティブなタブより後のタブ
アクティブなタブ

にはそれぞれ以下のコードでスタイルを適用出来ます。

ボタン部分

/* 1.ボタン・アクティブなタブより前のボタン */
.tab-label {}

/* 2.アクティブなタブより後のボタン(アクティブなタブ含む) */
.tab-switch:checked ~ .tab-label {}

/* 3.アクティブなタブのボタン */
.tab-switch:checked + .tab-label {}

コンテンツ部分

/* 1.コンテンツ・アクティブなタブより前のコンテンツ */
.tab-content {}

/* 2.アクティブなタブより後のコンテンツ(アクティブなタブ含む) */
.tab-switch:checked ~ .tab-content {}

/* 3.アクティブなタブのコンテンツ */
.tab-switch:checked + .tab-label + .tab-content {}