【ITニュース解説】Pure Responsive CSS Accordion Tutorial: Interactive, Fast & No JS!

アコーディオンとは、ウェブサイト上で多くの情報を整理し、見やすく表示するための一般的なインターフェースの一つである。通常、質問と回答の形式でよく見られるFAQ（よくある質問）セクションや、限られたスペースに多数のメニュー項目を表示したい場合などに活用される。コンテンツを普段は隠しておき、ユーザーが特定のタイトルや見出しをクリックすると、その下に隠されていた詳細な情報が滑らかに表示される仕組みを提供する。これにより、ウェブページ全体の縦幅を抑え、ユーザーが必要な情報に素早くアクセスできる利点がある。

従来、このようなアコーディオン機能をウェブサイトに実装する場合、HTMLでコンテンツの構造を作り、CSSで見た目を整え、そしてJavaScriptを使ってコンテンツの表示・非表示を切り替えるのが一般的だった。JavaScriptは、ユーザーの操作（クリックなど）に応じて動的な振る舞いをウェブページに与える強力なプログラミング言語である。例えば、「このボタンがクリックされたら、この要素を表示する」といった命令をJavaScriptで記述し、アコーディオンの開閉を実現する。しかし、JavaScriptを使用すると、ページ全体の読み込み速度に影響を与える可能性があったり、コードが複雑になりメンテナンスが難しくなったりするケースもある。

今回解説するアプローチは、このアコーディオン機能をJavaScriptを一切使わず、HTMLとCSSの純粋な機能だけで実現するという、非常に洗練された方法である。システムエンジニアを目指す上で、このような工夫を知ることは、限られたリソースの中で最大限のパフォーマンスを引き出すための発想力や、技術的な選択肢を広げる上で非常に役立つだろう。

この「Pure CSSアコーディオン」の核心は、「隠されたチェックボックス」と「CSSの特定のセレクタ」を組み合わせる点にある。ウェブページの要素がどのように構成されているかを示すHTMLには、フォーム部品としてチェックボックス（input type="checkbox"）が存在する。これは通常、ユーザーが項目を選択する際に使うもので、チェックが入った状態と入っていない状態を切り替えることができる。この状態変化こそが、アコーディオンの開閉を制御する「トリガー」となるのだ。

具体的なHTMLの構造を見てみよう。アコーディオンの各セクションは、通常一つのdiv要素でまとめられている。その中に、input type="checkbox"が一つ、label要素が一つ、そしてコンテンツ本体を格納するもう一つのdiv要素が含まれる。

まず、input type="checkbox"要素は、アコーディオンの開閉状態を保持する役割を担う。このチェックボックスは、ユーザーが直接操作できるようには画面に表示されないようにCSSで隠されている。しかし、その状態（チェックされているか、されていないか）はCSSから検出可能である。

次に、label要素は、アコーディオンの「タイトル」や「見出し」として表示される部分である。このlabelは、HTMLのfor属性を使って、先ほどの隠されたチェックボックスのidと紐付けられている。この紐付けがあるおかげで、ユーザーが画面に表示されているlabelをクリックすると、それに紐付いた隠れたチェックボックスの状態が自動的に切り替わる。つまり、labelがチェックボックスの「操作ボタン」として機能するのだ。ユーザーはタイトルをクリックするだけで、裏でチェックボックスがON/OFFされるという仕組みである。

そして、div要素で囲まれたaccordion-contentというクラスを持つ部分には、実際にユーザーに表示したいテキスト、画像、動画などのコンテンツが配置される。このdivは、初期状態ではCSSによって非表示に設定されている。

この仕組を動かす肝となるのが、CSSのセレクタである。特に重要なのは、次のコードに見られるようなセレクタだ。

Copy
1.accordion-input:checked ~ .accordion-content {
2  max-height: 500px;
3  padding: 1em;
4  overflow: visible;
5}

このCSSセレクタが意味するのは、「.accordion-inputというクラスを持つチェックボックスが、:checked（チェックされた）状態のとき、そのチェックボックスと同じ親要素の中にあり、かつそのチェックボックスの後ろに続く兄弟要素である.accordion-contentというクラスを持つ要素に対して、このスタイルを適用する」ということだ。

少し分解して説明しよう。

• .accordion-input:checked: これは、クラス名がaccordion-inputであるinput要素のうち、現在チェックされている状態のものだけを指す。
• ~: これは「一般兄弟セレクタ」と呼ばれるもので、指定した要素の後に続く、同じ親要素を持つ兄弟要素を選択する。つまり、チェックされている.accordion-inputの後に続く兄弟要素を探す。
• .accordion-content: そして、その兄弟要素の中から、クラス名がaccordion-contentである要素を選択する。

このセレクタによって、チェックボックスがチェックされた場合にのみ、accordion-contentのスタイルが変化し、コンテンツが表示されるようになる。具体的には、max-heightプロパティを大きな値に設定することで、元々max-height: 0やheight: 0、あるいはoverflow: hiddenなどで非表示にされていたコンテンツ領域が広がり、中身が見えるようになる。paddingはコンテンツの余白を設定し、overflow: visibleは、コンテンツがはみ出した際にも表示されるようにする役割がある。このようにして、チェックボックスのON/OFFという単純な状態変化が、アコーディオンの開閉という視覚的な変化に直結する。

このHTMLとCSSのみでアコーディオンを実装する方法には、いくつかの明確な利点がある。

第一に、JavaScriptを一切使用しないため、ウェブページの「読み込み速度」が非常に速くなる。JavaScriptファイルは通常、サイズが大きく、ウェブブラウザがそれをダウンロードして実行するのに時間がかかる場合がある。JavaScriptがない分、サーバーへのリクエストも減り、ページの表示がよりスムーズになるのだ。これは、ユーザー体験の向上に直結する重要な要素である。

第二に、コードがシンプルになり、メンテナンスが容易になる。JavaScriptの複雑なロジックを記述する必要がなく、HTMLで構造を定義し、CSSで見た目と振る舞いを記述するだけで済むため、後から機能を追加したり、デザインを変更したりする際の作業負担が軽減される。

第三に、この方法はすべての「モダンブラウザ」でスムーズに動作する。HTMLとCSSの標準的な機能のみを使用しているため、Chrome、Firefox、Safari、Edgeなど、現在広く利用されている主要なウェブブラウザであれば、特別な対応なしに期待通りに機能する。また、PCだけでなく、スマートフォンやタブレットなどのさまざまなデバイスでも問題なく動作するため、「レスポンシブデザイン」にも自然に対応できる。フォントサイズやパディングなどもCSSで柔軟に調整することで、あらゆる画面サイズに適した表示を実現可能である。

第四に、「アクセシビリティ」が高いという点も大きなメリットだ。label要素とinput要素を適切に紐付けているため、スクリーンリーダーなどの支援技術を利用するユーザーにとっても、アコーディオンの開閉状態や内容が正しく伝わる。キーボード操作だけでも開閉できるため、マウスが使えないユーザーにも配慮された設計となる。ウェブコンテンツのアクセシビリティは、今日では非常に重要な要素の一つであり、このような標準的なHTMLの機能を活用することで、自然と高いアクセシビリティが確保できる。

このように、HTMLとCSSだけでアコーディオンを実現するテクニックは、シンプルながらも非常に強力であり、多くのウェブプロジェクトで活用できる汎用性を持っている。システムエンジニアの学習者にとって、このような「既存の技術を創造的に活用する」視点は、問題解決能力を高める上で非常に重要だ。提供されているデモを実際に操作し、コードをコピーして自分のプロジェクトに組み込んだり、スタイルやコンテンツをカスタマイズしたりすることで、この技術をより深く理解し、実践的なスキルとして身につけることができるだろう。HTMLとCSSの持つ可能性を再認識させられる、素晴らしいアプローチである。