簡単実装：CSSだけでタブ切り替え

てっちゃん
てっちゃん

jQueryを使わずに、CSSだけで簡単にタブ切り替えを実装する方法をご紹介します。

今回は3タイプを用意しました！
では早速ご紹介です。

横並びタイプ：タブ切り替え（typeA）

一般的なタブ切り替えになります。

横並びタイプ：タブ切り替え

HTML

<section class="typeA">
	<input id="TAB-A01" type="radio" name="TAB-A" checked="checked">
	<label class="tabLabel" for="TAB-A01">不思議の国のアリス</label>
	<div class="content">
		<p>【不思議の国のアリスの内容が見れます。】<br>
		アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈（たいくつ）しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。「絵や会話のない本なんて、なんの役にもたたないじゃないの」とアリスは思いました。</p>
	</div>
	<input id="TAB-A02" type="radio" name="TAB-A">
	<label class="tabLabel" for="TAB-A02">坊ちゃん</label>
	<div class="content">
		<p>【坊ちゃんの内容が見れます。】<br>
		親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）</p>
	</div>
	<input id="TAB-A03" type="radio" name="TAB-A">
	<label class="tabLabel" for="TAB-A03">徒然草</label>
	<div class="content">
		<p>【徒然草の内容が見れます。】<br>
		つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）</p>
	</div>
</section>

CSS

/*ベース*/
section.typeA{
	display: flex;
	flex-wrap: wrap;
}
section.typeA::after {
	content: '';
	width: 100%;
	height: 3px;
	order: -1;
	display: block;
	background: rgba(0,137,167,.7);
}
section.typeA .tabLabel {	/* タブ */
	margin-right: 3px;
	padding: 3px 12px;
	flex: 1;
	order: -1;
	border-radius: 3px 3px 0 0;
	color: #444;
	background: rgba(0,137,167,.3);
	transition: .5s ;
	cursor: pointer;
}
section.typeA .tabLabel:nth-last-of-type(1){ margin-right: 0; }
section.typeA input {		/* ラジオボタン非表示 */
	display: none;
}
section.typeA .content {	/* 本文 */
	width: 100%;
	height: 0;
	overflow: hidden;
	opacity: 0;
}
/*アクティブ設定*/
section.typeA input:checked + .tabLabel {
	color: #fff;
	background: rgba(0,137,167,.7);
}
section.typeA input:checked + .tabLabel + .content {
	padding: 15px;
	height: auto;
	overflow: auto;
	box-shadow: 0 0 5px rgba(0,0,0,.2);
	transition: .5s opacity;
	opacity: 1;
}

デモページ

横並びスライドタイプ：タブ切り替え（typeB）

typeAの本文エリアがスライドして表示するパターンです。

横並びスライドタイプ：タブ切り替え

HTML

<section class="typeB">
	<input id="TAB-B01" type="radio" name="TAB-B" checked="checked">
	<label class="tabLabel" for="TAB-B01">不思議の国のアリス</label>
	<div class="content"><div>
		<p>【不思議の国のアリスの内容が見れます。】<br>
		アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈（たいくつ）しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。「絵や会話のない本なんて、なんの役にもたたないじゃないの」とアリスは思いました。</p>
	</div></div>
	<input id="TAB-B02" type="radio" name="TAB-B">
	<label class="tabLabel" for="TAB-B02">坊ちゃん</label>
	<div class="content"><div>
		<p>【坊ちゃんの内容が見れます。】<br>
		親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）</p>
	</div></div>
	<input id="TAB-B03" type="radio" name="TAB-B">
	<label class="tabLabel" for="TAB-B03">徒然草</label>
	<div class="content"><div>
		<p>【徒然草の内容が見れます。】<br>
		つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）</p>
	</div></div>
</section>

CSS

/*ベース*/
section.typeB{
	display: flex;
	flex-wrap: wrap;
}
section.typeB::after {
	content: '';
	width: 100%;
	height: 3px;
	display: block;
	order: -1;
	background: rgba(0,0,0,.1);
}
section.typeB .tabLabel {	/* タブ */
	margin-right: 3px;
	padding: 3px 12px;
	flex: 1;
	order: -1;
	border-radius: 3px 3px 0 0;
	color: #444;
	background: rgba(0,137,167,.3);
	position: relative;
	transition: .5s ;
	cursor: pointer;
}
section.typeB .tabLabel::after {
	content: '';
	width: 100% ;
	height: 3px;
	display: block;
	pointer-events: none;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	background: #EFBB24;
	position: absolute;
	left: 0;
	bottom: -3px;
	z-index: 10;
	opacity: 0;
}
section.typeB .tabLabel:nth-last-of-type(1){ margin-right: 0; }
section.typeB input {		/* ラジオボタン非表示 */
	display: none;
}
section.typeB .content {	/* 本文 */
	width: 100%;
	height:0;
	overflow:hidden;
	box-shadow: 0 0 5px rgba(0,0,0,.2);
	opacity:0;
}
section.typeB .content > div {
	pointer-events:none;
	transform: translateX(30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
}
/*アクティブ設定*/
section.typeB input:checked + .tabLabel {		/*タブ*/
	color: #fff;
	background: rgba(0,137,167,.7);
}
section.typeB input:checked ~ .tabLabel::after {
	transform: translateX(-100%);
}
section.typeB input:checked + .tabLabel::after {
	opacity: 1;
	transform: translateX(0);
}
section.typeB input:checked + .tabLabel + .content {	/*本文*/
	height: auto;
	padding: 15px;
	order: 1;
	opacity: 1;
}
section.typeB input:checked ~ .content > div {
	transform: translateX(30%);
}
section.typeB input:checked + .tabLabel + .content > div {
	pointer-events:auto;
	transform: translateX(0);
}

デモページ

アコーディオンタイプ：タブ切り替え（typeC）

最後は、アコーディオンで開くタイプです。

アコーディオンタイプ：タブ切り替え

HTML

<section class="typeC">
	<input id="TAB-C01" type="radio" name="TAB-C" checked="checked">
	<label class="tabLabel" for="TAB-C01">不思議の国のアリス</label>
	<div class="content">
		<p>【不思議の国のアリスの内容が見れます。】<br>
		アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈（たいくつ）しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。「絵や会話のない本なんて、なんの役にもたたないじゃないの」とアリスは思いました。</p>
	</div>
	<input id="TAB-C02" type="radio" name="TAB-C">
	<label class="tabLabel" for="TAB-C02">坊ちゃん</label>
	<div class="content">
		<p>【坊ちゃんの内容が見れます。】<br>
		親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）</p>
	</div>
	<input id="TAB-C03" type="radio" name="TAB-C">
	<label class="tabLabel" for="TAB-C03">徒然草</label>
	<div class="content">
		<p>【徒然草の内容が見れます。】<br>
		つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）</p>
	</div>
</section>

CSS

/*ベース*/
section.typeC .tabLabel {	/*タブ*/
	margin-bottom: -1px;
	padding: 5px 10px ;
	display: block;
	color: #444;
	background: rgba(0,137,167,.3);
	cursor: pointer;
	transition: .3s;
}
section.typeC .tabLabel::before {
	margin-right: .5em;
	font-weight: 700;
	font-family: 'Font Awesome 5 Free';
	content: "\f105";
}
section.typeC input {		/* ラジオボタン非表示 */
	display: none;
}
section.typeC .content {		/*本文*/
	height: 0;
	padding: 0 15px;
	overflow: hidden;
	opacity: 0;
	transition: .3s;
}
/*アクティブ設定*/
section.typeC input:checked + .tabLabel {
	color:#fff;
	background: rgba(0,137,167,.7);
}
section.typeC input:checked + .tabLabel::before {
	margin-right: .5em;
	font-weight: 700;
	font-family: 'Font Awesome 5 Free';
	content: "\f107";
}
section.typeC input:checked + .tabLabel + .content {
	height: auto;
	margin-bottom: -1px;
	padding: 15px;
	overflow: auto;
	border: 1px solid LightGray;
	opacity: 1;
}

デモページ

いかがでしたか？
やってることはどれもほぼ一緒で、CSSを工夫するだけで見せ方を変えられるので一度試してみてください。

関連記事