【CSS】アコーディオンデザインの作り方・サンプル
クリックするとコンテンツを開いてくれる、アコーディオンデザイン。
便利なデザインなので、シンプルなCSSでの作り方とポイントを記録しておきます。
目次
デザインの概要
まずは実際に見てみましょう
HTML のコンテンツ記述
<div class="menu">
<label for="list1">メインメニュー1 Click</label>
<input type="checkbox" id="list1">
<ul>
<li>リスト1-1
<li>リスト1-2
<li>リスト1-3
</ul>
<label for="list2">メインメニュー2 Click</label>
<input type="checkbox" id="list2">
<ul>
<li>リスト2-1
<li>リスト2-2
<li>リスト2-3
</ul>
</div>CSS による装飾
/* メニュー全体 */
.menu {
width: 20em;
}
/* チェックボックス */
.menu input {
display: none;
}
/* 開いた状態のリスト-クリック時 */
.menu input:checked + ul {
line-height: 1.5;
padding: 1em;
}
/* 閉じた状態のリスト-初期表示 */
.menu ul {
overflow: hidden;
line-height: 0;
padding: 0 1em;
transition: 0.2s;
/* 開閉によらず共通の設定 */
background: #EEE;
list-style: none;
margin: 0;
}
/* 親メニューの装飾 */
.menu label {
display: block;
margin: 0.1em;
padding: 0.5em;
color: #FFFFFF;
background: #0000FF;
cursor: pointer;
}
/* labelタグ マウスオーバー時の装飾 */
.menu label:hover {
background: #87ceeb;
}
作り方のポイント
チェックボックスは隠す:display: none
/* チェックボックス */
.menu input {
display: none;
}
何もしないとチェックボックスが見えるため、display プロパティで隠します。
リストは開いた状態と閉じた状態の2種類をスタイルする
/*開いた状態のリスト */
.menu input:checked + ul {
line-height: 1.5;
padding: 1em;
}
/* 閉じた状態のリスト */
.menu ul {
overflow: hidden;
line-height: 0;
padding: 0 1em;
transition: 0.2s;
/* 開閉によらず共通の設定 */
background: #EEE;
list-style: none;
margin: 0;
}
閉じた状態は普通にスタイル、開けた状態はチェックONに対してスタイルする
アコーディオンデザインのポイントです。
ページを表示した初期状態は閉じているため、リスト要素<ul>に対してスタイルします。
開けた状態は、input 要素にチェックを入れた状態を拾うよう :checkd 擬似クラスを指定します。
更に、チェックボックスと紐づくメインメニューのみ開けるため、隣接セレクタ「+」を使います。
参考:E:checkdチェックされてるユーザインタフェース要素
参考:隣接セレクタ 直後の要素を選択する
閉じてる時は表示を隠す:overflow: hidden
チェックボックス同様、何もしないとリストが見えるため、overflowプロパティでリストを隠します。
参考:【CSS】overflowの使い方
リストの高さを 0 にして無くす:line-height
こちらも同様です。あえて line-height プロパティの値を 0 にすることで閉じた状態を作ります。
参考:line-height プロパティ-行の高さを指定する
リストの位置を調整する:padding
閉じた状態は、メインメニューよりもリストの位置を右にずらすよう調整します。(padding: 0 1em)
クリックして開けると、リストがメインメニューの子要素に見えます。
参考:padding パディングに関する指定をまとめてする
クリック時とマウスオーバー時のスタイルに変化を与える
クリック時の変化：transition
/* 閉じた状態のリスト */
.menu ul {
overflow: hidden;
line-height: 0;
transition: 0.2s;
}
メインメニューをtransition 要素を指定することで、開閉時の動きに滑らかさを与えます。
参考：transition効果(時間的変化)をまとめて指定する
マウスオーバー時の変化：hover
/* labelタグ マウスオーバー時の装飾 */
.menu label:hover {
background: #87ceeb;
}
メインメニューの上にマウスが来た時に背景色をすこし変化させます。
HTML の Labelタグに対して hover擬似クラス を使います。
アコーディオンのクリック実行前にちょっとした変化が作れます。
参考:hover擬似クラス カーソルが乗ってる要素にスタイルを適用する
補足
ラジオボックスか、チェックボックスか
今回は、HTMLのinput要素をチェックボックスにしましたが、ラジオボックスにすると、開閉するメニューを1つに制限したアコーディオンデザインが作れたりもします。ぜひお試しください。