シンプルな可変タブメニュー

目的

シンプルなタブメニューが欲しい。
最も高さ(height)があるタブメニューに合わせて、他のタブメニューも高さを統一したい。
タブメニューの個数を変えても、各タブを均等幅にしたい。

実行結果

TOP

HOME 新着情報お問い合わせ

構造

パンくずリストタブメニュー

装飾

見出しテキスト+画像画像メニューリスト

その他

コンテンツ内に複数の情報をコンパクトにまとめたい時や、スマホ版のフッターメニューなどに使いやすいです。タブの個数を変える場合は、HTMLとCSSを編集する必要があります。また、このタブメニューは最もheightの値が高いタブに合わせて高さが固定されています。

解説

コンテンツ内に複数の情報をコンパクトにまとめたい時や、スマホ版のフッターメニューなどにオススメです。

HTML

<div class="structure_2_1">
	<div>
		<input id="tab-1" type="radio" name="tab-radio" checked>
			<label for="tab-1">TOP</label>
				<div>
					<a href="https://note-book.foo/">HOME</a>
					<a href="https://note-book.foo/#news">新着情報</a>
					<a href="https://note-book.foo/inquiry/">お問い合わせ</a>
				</div>
	</div>
	<div>
		<input id="tab-2" type="radio" name="tab-radio">
			<label for="tab-2">構造</label>
				<div>
					<a href="https://note-book.foo/structure/1/">パンくずリスト</a>
					<a href="https://note-book.foo/structure/2/">タブメニュー</a>
				</div>
	</div>
	<div>
		<input id="tab-3" type="radio" name="tab-radio">
			<label for="tab-3">装飾</label>
				<div>
					<a href="https://note-book.foo/layout/2/">見出し</a>
					<a href="https://note-book.foo/layout/4/">テキスト+画像</a>
					<a href="https://note-book.foo/layout/5/">画像メニュー</a>
					<a href="https://note-book.foo/layout/3/">リスト</a>
				</div>
	</div>
	<div>
		<input id="tab-4" type="radio" name="tab-radio">
			<label for="tab-4">その他</label>
				<div>
					<span class="tab-text">コンテンツ内に複数の情報をコンパクトにまとめたい時や、スマホ版のフッターメニューなどに使いやすいです。タブの個数を変える場合は、HTMLとCSSを編集する必要があります。また、このタブメニューは最もheightの値が高いタブに合わせて高さが固定されています。</span>
				</div>
	</div>
</div>

タブを追加したらidとlabelの数字を1つ増やしてください。現在はタブが4個ですが、5個目を追加したらinput idとlabel forをtab-5にします。
name="tab-radio"のtab-radioは任意の文字列です。全てのタブで文字列を統一する必要があります。

CSS

.structure_2_1 {
	text-align: center;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 90%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

.structure_2_1 > div {
	display: contents;
}

.structure_2_1 label {
	font-size: 16px;
	background-color: #F3F3F3;
	grid-row: 1;
	cursor: pointer;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
	border-top: solid 1px #999999;
	border-left: solid 1px #999999;
	border-right: none;
	border-bottom: none;
}

/* 最後のタブグループ(div)の中にあるlabelだけ、右側の線を足す */
.structure_2_1 > div:last-of-type label {
	border-right: solid 1px #999999;
}

.structure_2_1 label:hover {
	opacity: 0.7;
}

.structure_2_1 input:checked + label {
	font-weight: bold;
	color: #FFFFFF;
	background-color: #064458;
}

.structure_2_1 > div > div {
	font-size: 16px;
	line-height: 1.7;
	background-color: #FFFFFF;
	text-align: left;
	grid-column: 1 / -1;
	grid-row: 2;
	pointer-events: none;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	visibility: hidden;
	opacity: 0;
	border: solid 1px #999999;
	box-sizing: border-box;
}

.structure_2_1 input:checked ~ div {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.structure_2_1 input[type="radio"] {
	display: none;
}

.structure_2_1 > div > div a {
	text-decoration: none;
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
}

.structure_2_1 > div > div span {
	display: block;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 20px;
	margin-left: 0px;
}

タブの個数を変えた場合は4行目のrepeatの数字とタブ数を同じにしてください。例えばタブを5個にしたらgrid-template-columns: repeat(4, 1fr);の4を5に変えます。

.structure_2_1 {
	text-align: center;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 90%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

.structure_2_1 > div {
	display: contents;
}

.structure_2_1 label {
	font-size: 16px;
	background-color: #F3F3F3;
	grid-row: 1;
	cursor: pointer;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
	border-top: solid 1px #999999;
	border-left: solid 1px #999999;
	border-right: none;
	border-bottom: none;
}

/* 最後のタブグループ(div)の中にあるlabelだけ、右側の線を足す */
.structure_2_1 > div:last-of-type label {
	border-right: solid 1px #999999;
}

.structure_2_1 label:hover {
	opacity: 0.7;
}

.structure_2_1 input:checked + label {
	font-weight: bold;
	color: #FFFFFF;
	background-color: #064458;
}

.structure_2_1 > div > div {
	font-size: 16px;
	line-height: 1.7;
	background-color: #FFFFFF;
	text-align: left;
	grid-column: 1 / -1;
	grid-row: 2;
	pointer-events: none;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	visibility: hidden;
	opacity: 0;
	border: solid 1px #999999;
	box-sizing: border-box;
}

.structure_2_1 input:checked ~ div {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.structure_2_1 input[type="radio"] {
	display: none;
}

.structure_2_1 > div > div a {
	text-decoration: none;
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
}

.structure_2_1 > div > div span {
	display: block;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 20px;
	margin-left: 0px;
}

スマホ版の解説内容はPC版と同じなので、PC版をご覧ください。