INSPIRATION

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

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

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

アコーディオンメニュー

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

hello.world!hello.world!hello.world!hello.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行目

labelforinputの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.

 

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

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

hello.world!hello.world!hello.world!hello.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;
}

10行目

アイコンをposition: absolute;で配置するので、ラベルはposition: relative;にしておきます。
 

12行目〜

ラベルに:after擬似要素でアイコンを設定します。アイコンはFont Awesomeを使用しました。

Font Awesome

 

33行目〜

チェックが入った時のアイコンを変更しています。
 

まとめ

というわけで、CSSだけで作るアコーディオンメニューをやってみました。

今回のポイントはCSSの擬似クラスや隣接セレクタを使っている点です。意外と知らなかったり、忘れている擬似クラスやセレクタがあったりするので、これを機に調べてみると新しい発見があるかもです。
 

今回の記事に関連して「【jQuery・CSS】jQueryとCSSで作るアコーディオンメニュー」という記事も書いていますので、興味がある方はぜひチェックしてみてくださいね。

それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!
 

【Web デザイン】アイソメトリックのイメージを取り入れた素敵なWebサイト10選
NEXT INSPIRATION
【CSS】animation・keyframesを徹底解説
PREVIOUS INSPIRATION