戻る

「アコーディオンメニュー」は、クリックなどに反応して、折りたたまれていたコンテンツが展開表示される仕組みです。

展開したり戻したりする際に伸び縮みする様子がアコーディオンの蛇腹部分に似ているせいか、そのように名付けられているようです。

具体的には以下のようなものです。
「クリックして詳細を確認する」の部分をクリックすると折りたたまれていた文章が展開表示されます。

詳しい情報などをアコーディオンの中に入れてしまえば、必要に応じて画面に表示できるので、ページのコンテンツをスッキリまとめる効果があります。

こちらの仕組みも、従来はプログラムなどを使わないと実現できませんでしたが、最新の環境では、なんと CSS だけで実現できます！

それでは作り方を見ていってみましょう。

少々仕組みがややこしいので、詳しい手順を紹介していきます。

まずHTMLを作ります。
とりあえずそれっぽい文章を書いておきます。

この文章は自由なものでＯＫです。

次に、チェックボックスを作ります。
チェックボックスとは、「」 このようになものです。 クリックすると、チェックのＯＮ／ＯＦＦを切り替えられます。
後でデザインするために、とりあえずクラス名を付けておきます。ここでは acd-check としています。

上の実行結果にある「□クリックして詳細を確認する」の「□」部分をクリックすると、チェックボックスをＯＮ／ＯＦＦできます。

こういった入力用のパーツ全般を「フォーム」と呼びます。この授業では今までほとんど扱ってきませんでしたが、通常の HTML で使用できる基本的なパーツです。
<input type="checkbox"> でチェックボックスを作ることができます。HTML では他にもいろんな入力用のパーツを作れるので、詳しくは「HTML フォーム」などで検索してみましょう。
今回はさらにクラス名 acd-check を付けています。

「えっ？完成例にチェックボックスなんてあったっけ？」と思った人、鋭いです。😄

今回の課題は、このチェックボックスのＯＮ／ＯＦＦの状態に合わせて CSS を切り替える構造になっているため、仕組みのうえでどうしても必要なチェックボックスとなっています。ですが見た目的には邪魔なので、後で CSS を使って見えない状態にします。なので今は気にしなくてＯＫです。とりあえず次に進みましょう。

小さなチェックボックスにマウスカーソルを合わせてクリックするのはやりにくいので、近くの文字をクリックしてもチェックボックスをＯＮ／ＯＦＦできるようにします。

そのためのクリック可能な文字を「ラベル」と呼びます。クリック対象部分を <label>～</label> で囲うことで実装できます。

今回の「ラベル」は、「クリックして詳細を確認する」という文字列とします。

画面上で見た目の変化はありませんが、「クリックして詳細を確認する」という文字の部分をクリックしてもチェックボックスをＯＮ／ＯＦＦ出来るようになっています（上の実行結果で試してみましょう）。 これがラベルの効果です。

どのラベルをクリックすると、どのチェックボックスが反応するかは、固有の id を付けることで管理します。上の例では acd01 という共通した id が、チェックボックスとラベルの両方に付けられている事が分かると思いますが、これらがお互いに関連付けられたラベルとチェックボックスということになります。

もしこのアコーディオン構造を複数ページ内に作りたい場合は、この id を acd02 のように別のものに変えていけば良いでしょう。

伸び縮みして表示される内容を追加します。これは単に <div>～</div> で囲って記入するだけです。
後でデザインしやすいように、クラス名を付けておきます。ここでは acd-content としています。

<div> の中身は、通常の HTML を使って自由に何でも書けます。

現時点では、単に <div> の中身が表示されているだけで何も起きませんが、あとで CSS を使って折りたたまれるように加工します。

以上で HTML の準備は完了です。CSS の編集に移りましょう。

チェックボックスは CSS の都合上で配置していますが、見た目的には不要なので、CSS を使って見えなくします。

チェックボックスが見えなくなりました！ 存在はしていますが、画面上には映りません。今ＯＮかＯＦＦかも見えませんが、とりあえず見えない所で動いてはいます。

このように display: none; を指定することで、CSS では要素を隠すことができます。

伸び縮みして表示される内容をそれっぽくデザインします。これはお好みのデザインをしてもらうと良いでしょう。

今回はこんな感じのデザインにしてみました。

コンテンツ部が折りたたまれた状態を再現するために、せっかく作ったコンテンツ部を見えなくなるようにデザインします。
アコーディオン・コンテンツ部の設定に以下のように追加します。

コンテンツの部分が綺麗さっぱり見えなくなりました。ちょっぴり悲しいですが、次で表示できるようにします！

ちなみに見えなくする設定を色々追加していますが、さまざまな端末を使った場合でも、それっぽく伸び縮みしているように見せるための措置です。
設定内容の詳細は次の通り。

• 要素の高さ height をゼロにする。
• 透明度opacity をゼロにして、完全透明にする。
• 不可視属性を付与。visibility: hidden;
• はみ出した部分は表示しない。overflow: hidden;

いよいよここが今回の肝です。
チェックがＯＮ状態になった時に、コンテンツ部分が表示されるようにします。

「クリックして詳細を確認する」の部分をクリックしてみましょう。
コンテンツ部が開いたり閉じたりするようになりました。 素晴らしい！

ちなみにセレクタ部分 .acd-check:checked + .acd-label + .acd-content に注目をすると、今回は特殊なセレクタを使用していることが分かるでしょう。
これはどういう意味なのでしょうか？

• :checked
  要素がチェックされている場合に限り、設定が有効になることを意味します。

  このようにセレクタに付加して状況を限定したりできるオプションのことを「擬似クラス」と呼びます。

  以前にリンクの色を設定する練習問題で、a:visited や a:hover のようなセレクタを使用したことがありますが、その visited や hover も擬似クラスの仲間です。それぞれ「アクセスしたことがあるリンク」や「マウスカーソルが上に重なっている状態のリンク」に状況を限定するものですね。

  • これにより、チェックボックスがＯＮになっているときだけ、「コンテンツ部 開状態」に記載した設定が有効になります。
  • 設定内容は、一つ前に行った「見えなくする設定」を全て打ち消す物となっています（＝通常の表示状態に戻します）。
  • つまりチェックボックスがＯＦＦのときは見えない状態ですが、ＯＮになると後から書かれた設定の効果が上書きされ、見える状態になるというわけです。
• +
  セレクタ上でプラス + という記号を使用すると「ある要素の直後に隣接している要素」を意味します。
  • これにより「acd-check クラスの隣りにある acd-label クラスの隣りにある acd-content 要素」をセレクタが指し示すようになります。要するに acd-content 部分のデザインに影響を与えたかったわけです。
  • この + の仕様上、HTML では、チェックボックスとラベルとコンテンツ部を連続で並べておく必要があります。
• :checked と + を組み合わせることで「チェックボックスがＯＮのときに、コンテンツ部のデザインを変更する」ことが可能になるわけです。

各セレクタの詳細について気になった場合は、以下を参考にすると良いでしょう。
checked - MDN
隣接兄弟結合子＋ - MDN

一応、コンテンツが表示されたり消えたりするアコーディオン構造ができましたが、一瞬でパカパカ開閉するため、見ている人にとっては何が起こっているのか分からないと感じるかも知れません。

たとえばコンテンツの内容がたくさん書かれていて、画面の大部分が一瞬で書き換わったりすると、ページの閲覧者に「別のページにアクセスしてしまったか？」と誤解されてしまうかもしれません。

そこで、開閉アニメーションがなめらかに行われるようにします。
設定は簡単で、transition プロパティを acd-content クラスに対して追加するだけです。
ちなみに過去にはＣＳＳ練習１の リンクの色を変える 課題で transition プロパティを使用したことがあります。

「クリックして詳細を確認する」の部分をクリックしてみましょう。表現が難しいですが「ぬるっと」伸び縮みするようになったかと思います。

これで、どの部分がアコーディオンで開閉しているのか、視覚的に分かりやすくなったかと思います。

この例では transition: 0.2s; で、0.2秒で開閉するよう設定しています。アニメーション速度はこのパラメーターを変えることで、より素早くしたり遅くしたり調整できます。

そもそも「クリックして詳細を確認する」の部分をクリックしなければいけないことが分かりにくいです。いちいち文字で説明するのも面倒ですね。

そこでここに「いかにも」な感じの特徴的なマークを設置して、アコーディオン構造があると分かりやすくします。
具体的には ＋ マークを CSS を使って表示させます。

ラベルの前方 before に ＋ マークが付きました。
このように CSS 側からの設定で、要素の周囲に新たな要素を追加することもできます。これら CSS で追加される要素のことを「疑似要素」と呼びます。
HTML 側は何も編集していないのに、ページに新しいものを表示させられるなんて不思議な感じですね。

疑似要素 - MDN

ちなみに content: "＋"; で指定した文字が表示されるので、別のマークに変える事もできます。
例えば content: "開"; とすれば、「開」マークが表示されることでしょう。

コンテンツ部を閉じたときには別のマークが出るようにして、開閉状態が分かりやすいようにしましょう。
プラス・マイナスで切り替える感じが良さそうなので、－ を表示させてみます。

「クリックして詳細を確認する」をクリックしてアコーディオンを開閉すると ＋ － マークが切り替わるようになりました。
ここでも上で使用した :checked と + を使って「チェックボックスがＯＮのとき、隣接する acd-label 要素のデザインを変更する」挙動を実現しています。

設定内容は content で表示される文字を書き換え、背景色を red に変えているだけです。

マークがカクカクしているのが気になります。また、「クリックして詳細を確認する」という文字と密着しすぎているのが気になりますので、デザインを調整します。 このあたりは自己満足ですね。😅

マークが丸くなり、よりそれっぽくなりました。
ラベルとの間隔を５ピクセル開けた margin-right: 5px; で、マークと文字の密着感もなくなったかと思います。

以上でアコーディオンメニューの完成です！

同じページの中に複数のアコーディオンメニューを設置したい場合は、checkbox と label についている id を、それぞれ同一ページ内で重複しない固有のものに変更してください。

どのラベルがどのチェックボックスに対応しているかを識別するために必要なので、関連するチェックボックスとラベルの id は同じものに揃えておいてください。

とりあえずコピー・貼り付けした後、id だけ後から修正するのが楽かもしれません。

CSSの変更は不要です。

このように一度作ってしまえば、アコーディオンを複数作ることはとても簡単です。

参考にしてください。

戻る