制作のご相談はこちら
CSSを使ってタブ切り替えを実装する方法【レスポンシブ対応】

公開日 : 2018年10月23日

CSSを使ってタブ切り替えを実装する方法【レスポンシブ対応】


情報が多い場合にクリックだけで表示切替できるタブ機能を実装する方法をメモします。
レスポンシブ対応にさせました。

DEMO

HTML

<div class="tabs">
	<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
	<label for="tab-1" class="tab-label-1">タブ1</label>

	<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
	<label for="tab-2" class="tab-label-2">タブ2</label>

	<div class="clear-shadow"></div>

	<div class="content">
		<div class="content-1">
			<h2>コンテンツ1</h2>
			<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
		</div>
		<div class="content-2">
			<h2>コンテンツ2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
</div>

タブボタンをinput(ラジオボタン)にすることによって切り替えの動作をcssで制御できるようにしています。

CSS

body {
background-color: #e9e9e9;
}

.tabs {
position: relative;
margin: 40px auto;
width: 750px;
}

.tabs input {
position: absolute;
z-index: 1000;
width: 120px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
cursor: pointer;
}

.tabs input#tab-2{
left: 120px;
}

.tabs label {
background: #5ba4a4;
background: -moz-linear-gradient(top, #5ba4a4 0%, #1abc9c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#1abc9c));
background: -webkit-linear-gradient(top, #5ba4a4 0%,#1abc9c 100%);
background: -o-linear-gradient(top, #5ba4a4 0%,#1abc9c 100%);
background: -ms-linear-gradient(top, #5ba4a4 0%,#1abc9c 100%);
background: linear-gradient(top, #5ba4a4 0%,#1abc9c 100%);
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
width: 80px;
color: #0c4d40;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tabs label:after {
content: '';
background: #fff;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
display: block;
}

.tabs input:hover + label {
background: #5ba4a4;
}

.tabs label:first-of-type {
z-index: 4;
box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
z-index: 3;
}

.tabs input:checked + label {
background: #fff;
z-index: 6;
}

.clear-shadow {
clear: both;
}

.content {
background: #fff;
position: relative;
width: 100%;
height: 240px;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}

.content div {
position: absolute;
top: 0;
left: 0;
padding: 25px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity linear 0.1s;
-moz-transition: opacity linear 0.1s;
-o-transition: opacity linear 0.1s;
-ms-transition: opacity linear 0.1s;
transition: opacity linear 0.1s;
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2 {
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity ease-out 0.2s 0.1s;
-moz-transition: opacity ease-out 0.2s 0.1s;
-o-transition: opacity ease-out 0.2s 0.1s;
-ms-transition: opacity ease-out 0.2s 0.1s;
transition: opacity ease-out 0.2s 0.1s;
}

.content div h2{
color: #0c4d40;
margin: 0 0 10px 0;
font-weight: bold;
}

.content div p {
font-size: 14px;
line-height: 22px;
font-style: italic;
text-align: left;
margin: 0;
color: #777;
padding-left: 15px;
font-family: Cambria, Georgia, serif;
border-left: 8px solid rgba(12,77,64, 0.1);
}

スマホ対応させる場合はこのメディアクエリを追記してください。

@media only screen and (max-width: 767px) {
body {
padding: 0 10px;
}

.tabs {
margin: 40px 0;
width: 100%;
}

.tabs input {
margin: 0;
}

.content {
min-height: 450px;
}

.content div {
padding: 20px;
}
}

今回作成したデモはこちらです。
DEMO

こちらのページを参考に作成しました。
Animated Content Tabs with CSS3