アコーディオンメニューはクリック時に項目を表示させる機能です。必要な情報をすぐに得られるためユーザーに優しい設計となります。
アコーディオンメニューの作成はjQueryを使う場合が多いですが、HTMLとCSSのみでも実装可能です。JavaScriptが苦手な方も簡単に作成できます。
この記事ではJavaScriptが苦手な方でもアコーディオンメニューを作成できるよう、HTMLとCSSのみを用いる方法を解説します。
- CSSでアコーディオンメニューを作成する方法
- CSSでアコーディオンメニューを作成する時の応用
- CSSでアコーディオンメニューを作成するメリット・デメリット
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
CSSでアコーディオンメニューを作成する方法
デモ
クリック時に項目を開くアコーディオンメニューです。こちらを例として解説していきます。
See the Pen cssアコーディオン by ZeroPlus (@zeroplus-programming) on CodePen.
HTMLとCSSをそれぞれ以下で解説します。
HTML
<input id="check-a" type="checkbox" class="check">
<label class="label "for="check-a">テキストが入ります。</label>
<p class="text">テキストが入ります。</p>
<input id="check-b" type="checkbox" class="check">
<label class="label "for="check-b">テキストが入ります。</label>
<p class="text">テキストが入ります。</p>
<input id="check-c" type="checkbox" class="check">
<label class="label "for="check-c">テキストが入ります。</label>
<p class="text">テキストが入ります。</p>
<input id="check-d" type="checkbox" class="check">
<label class="label "for="check-d">テキストが入ります。</label>
<p class="text">テキストが入ります。</p>ポイントは以下の2つです。
- <input>タグのtype属性の値を"checkbox"にする
- <input>タグのid属性の値と<label>タグのfor属性の値を合わせる
<input>タグのtype属性の値を"checkbox"にする
アコーディオンメニューはクリックで項目を開く機能です。このとき、クリックされたかどうかを判定する機能が重要となります。
本来JavaScriptを使用して実装しますが、HTMLとCSSのみで実装する場合はcheckboxの機能を利用します。
checkboxにはクリックされたかどうか判定する機能が備わっています。この機能を利用するため各項目にcheckboxの記述をします。
<input>タグのid属性の値と<label>タグのfor属性の値と合わせる
<input>タグのid属性の値と<label>タグのfor属性の値を同じ名前にすることでお互いを結びつけます。表示している項目にcheckboxの機能を追加するためです。
アコーディオンメニューにcheckboxが表示されていると見栄えも使い勝手も悪くなります。そのためcheckboxはCSSで非表示にします。checkboxの機能は表示している項目に結びついているので、非表示にしてもクリックの判定は可能です。
このようにして各項目をクリックしたかどうかを判定する機能を追加します。
CSS
CSSを用いて、通常時とクリックされた時の表示分けをします。
.check{
display: none;
}
.label{
background: rgb(9, 9, 94);
color: #fff;
display: flex;
align-items: center;
margin-bottom: 10px;
height: 50px;
padding: 20px;
}
.text{
background: orange;
display: flex;
align-items: center;
height: 0;
overflow: hidden;
margin-bottom: 10px;
transition: 0.5s;
}
.check:checked + .label + .text{
height: 60px;
padding: 20px;
}CSSでは項目の表示・非表示を切り替えるスタイルとアニメーションを追加します。隣接クラスタを使用してクリック時にスタイルを付与します。
ポイントは以下の2つです。
- display: none;でcheckboxを非表示にする
- 隣接クラスタの指定でクリック時にスタイルを付与する
display: none;でcheckboxを非表示にする
checkboxの表示は不要なのでdisplay: none;で非表示にします。
.check{
display: none;
}隣接クラスタの指定でクリック時にスタイルを付与する
クリックした状態は擬似クラスの:chekedで指定できます。加えて隣接クラスタでチェックされている項目の隣の要素を取得します。
擬似クラスの使い方とセレクタの指定方法はそれぞれ以下の記事で詳しく解説しています。ぜひ学習にお役立てください。
擬似クラスの解説記事
セレクタの指定方法の解説記事
隣接クラスタは隣の要素を取得する指定方法です。checkから2つ隣のtextにスタイルを指定するには以下のように記述します。
.check:checked + .label + .text{
height: 80px;
padding: 20px;
}クラスタの+が2つあることがポイントです。このような書き方で、チェックされた項目（check）の隣の要素（label）の隣の要素（text）にスタイルを指定できます。
CSSでアコーディオンメニューを作成する時の応用
この記事で紹介したサンプルではtransitonプロパティを使用しています。項目を開く時のアニメーションを追加するためです。このようにtransitionを使用すると要素にアニメーションを追加できます。アコーディオンメニューにも有効なので学習してみましょう。
transitionの使い方はこちらの記事で詳しく解説しています。
CSSでアコーディオンメニューを作成するメリット・デメリット
HTMLとCSSのみでアコーディオンメニューを作成するメリットはJavaScriptの記述が不要な点です。JavaScriptが苦手な方でも簡単に作成することができます。
しかしHTMLとCSSのみだと実装できる動きに限りがあります。例えば1つの項目を開く時に他の項目を閉じる動きは実装できません。
JavaScriptでアコーディオンメニューを作成すれば実装できる動きの幅が広がります。苦手意識のある方でも一度チャレンジしてみてはいかがでしょう。
下記記事ではJavaScript（jQuery）を用いたアコーディオンメニューの実装方法を解説しています。
まとめ
アコーディオンメニューはFAQやQ&Aでよく使われる機能です。HTMLとCSSだけで簡単に実装することができるのでぜひ試してみてください。
CSSでアコーディオンメニューを作成する方法まとめ
- HTMLのcheckboxを使用してクリック判定機能をつける
- <label>タグをcheckboxと結びつける
- checkbox自体は非表示にする
- 隣接クラスタでクリック時にスタイルを付与する
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
