【CSS】CSSだけで作るアコーディオンメニュー

レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。

ということで、今回はjQueryなしでCSSだけで作るアコーディオンメニューをやっていきたいと思います。

Contents

1 アコーディオンメニュー
2 基本的なやり方
3 ベースのHTML・CSS
- 3.1 HTML
- 3.2 CSS
4 応用編　アイコンで表示・非表示状態をわかりやすく
- 4.1 HTML
- 4.2 CSS
5 まとめ

アコーディオンメニュー

今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。

クリックで開く1hello.world!クリックで開く2hello.world!クリックで開く3hello.world!クリックで開く4hello.world!

基本的なやり方

どうやって実装するかを簡単に説明します。

labelをクリックする

アコーディオンメニューのクリック部分になります。

labelクリックでチェックボックスにチェックを付けたり外したりする

チェックボックスはアコーディオンメニューの表示・非表示を切り替えるフラグとして使います。あくまでフラグとして使うので、Web上には表示しません。

CSSの隣接セレクタでチェックボックスにチェックがついているかいないかで、コンテンツの表示・非表示のスタイルを変更する

CSSの擬似クラス:checkedと、隣接セレクタを使います。擬似クラス:checkedと隣接セレクタは下記リンクより詳細を確認してみてください。

:checked – CSS: カスケーディングスタイルシート | MDN
隣接兄弟結合子 – CSS: カスケーディングスタイルシート | MDN

ベースのHTML・CSS

次にソースコードを見ていきます。

HTML

<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check1">クリックで開く1</label>
<div class="acd-content">
	<p>hello.world!</p>
</div>
<input id="acd-check2" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check2">クリックで開く2</label>
<div class="acd-content">
	<p>hello.world2!</p>
</div>
以下同じ

2行目

labelはforにinputのID名を入れることでラベルをクリックしてもチェックボックスにチェックを付け外しできます。これを利用して、非表示のチェックボックスにチェックを付け外しします。

サンプルです。下の「ここをクリック！」の文字をクリックして、チェックを付け外ししてみてください。

ここをクリック！

CSS

.acd-check{
	display: none;
}
.acd-label{
	background: #333;
	color: #fff;
	display: block;
	margin-bottom: 1px;
	padding: 10px;
}
.acd-content{
	border: 1px solid #333;
	height: 0;
	opacity: 0;
	padding: 0 10px;
	transition: .5s;
	visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
	height: 40px;
	opacity: 1;
	padding: 10px;
	visibility: visible;
}

2行目

チェックボックスは前述のとおり、表示・非表示を切り替えるフラグとして使うだけですので、CSSでdisplay: none;にします。

11行目〜

表示・非表示を切り替えるボックス要素acd-contentは、チェックが入っていない状態（非表示）の時は、
height: 0;
opacity: 0;
visibility: hidden;
としています。

またアニメーションさせるため
transition: .5s;
も設定しています。

19行目〜

.acd-check:checked + .acd-label + .acd-contentと指定することで、チェックボックスにチェックが入った状態のacd-contentという指定ができます。

そして、
height: 40px;
opacity: 1;
visibility: visible;とすることで非表示から表示へアニメーションさせています。

注意点は、height: auto;ではアニメーションがおかしくなってしまうので、明確な数値を指定する必要があります。

では、改めて確認してみましょう。わかりやすくするため、こちらはあえてチェックボックスを非表示にしていません。

See the Pen
accordion menu2 by Kiyonobu Kasuga (@kiyonobu-kasuga)
on CodePen.

チェックボックスを非表示にしました。

See the Pen
accordion menu by Kiyonobu Kasuga (@kiyonobu-kasuga)
on CodePen.

応用編　アイコンで表示・非表示状態をわかりやすく

基本的な動きは実装できました。ただこれだけではあれなんで、アコーディオンメニューの開閉状態をアイコンでわかりやすくしてみたいと思います。

クリックで開く1hello.world!クリックで開く2hello.world!クリックで開く3hello.world!クリックで開く4hello.world!

HTML

HTMLは変更なしです。

CSS

.acd-check{
	display: none;
}
.acd-label{
	background: #0068b7;
	color: #fff;
	display: block;
	margin-bottom: 1px;
	padding: 10px;
	position: relative;
}
.acd-label:after{
	background: #00479d;
	box-sizing: border-box;
	content: '\f067';
	display: block;
	font-family: "Font Awesome 5 Free";
	height: 52px;
	padding: 10px 20px;
	position: absolute;
	right: 0;
	top: 0px;
}
.acd-content{
	border: 1px solid #333;
	display: block;
	height: 0;
	opacity: 0;
	padding: 0 10px;
	transition: .5s;
	visibility: hidden;
}
.acd-check:checked + .acd-label:after{
	content: '\f068';
}
.acd-check:checked + .acd-label + .acd-content{
	height: 50px;
	opacity: 1;
	padding: 10px;
	visibility: visible;
}