AboutデジタルIT・インターネットホームページ作成スマホ対応も!アコーディオンメニューの簡単な作り方ホームページ作成スマホ対応も!アコーディオンメニューの簡単な作り方HTML+CSSだけでアコーディオンメニューを作る方法を解説。スクリプトは一切不要。アコーディオンメニューは、質問をクリックすると回答がスライド表示されたり、題名をクリックすると対応コンテンツが表示されたりするUIによく使われます。jQueryなどを活用してJavaScriptを書く必要があると思いがちですが、ラジオボタンやチェックボックスを活用するという意外なテクニックを使うことで、CSSだけで作成できます。文宏ホームページ作成ガイドアコーディオンメニューをスクリプトなしのCSSだけで作る方法があるアコーディオンメニューが採用されているGoogleヘルプページの例アコーディオンメニューというインターフェイスがあります。質問をクリックすると回答がスライド表示されたり、題名をクリックすると対応コンテンツが表示されたりするUI(ユーザ・インターフェイス)として、様々なウェブサイトでよく使われています。楽器のアコーディオンのように蛇腹状に見えるメニュー項目が伸縮することから付けられた名称で、例えばユーザのクリックに応じて下図のように動作します。1」がクリックされた際には、それに対応する内容だけが展開され、それ以外の項目は折りたたまれています(上図の左上)。2」がクリックされた際には、それに対応する内容だけが展開され、それ以外の項目は自動で折りたたまれて見えなくなります(上図の中央)。このような動作のUIを、アコーディオンメニューと呼びます。■作成にはスクリプトが必要そうに思えるが、実はCSSだけで実現できるJavaScriptは使わずにCSSで作成できるこのアコーディオンメニューの作成に、スクリプトは不要です。jQueryなどのライブラリを活用したJavaScriptを書いて実現する方法もありますが、そこまで大がかりなことをしなくても「input要素で作るラジオボタンやチェックボックスの仕様を活用する」という意外なテクニックを使うことで、CSSによる装飾だけで作成できます。そこで今回は、スクリプトを使わずにHTML+CSSだけを使ってアコーディオンメニューを作る方法をご紹介いたします。簡単に実現できますので、ぜひ試してみて下さい。具体的な作成方法を解説する前に、「なぜラジオボタンやチェックボックスを使うことでアコーディオンメニューになるのか?」について、概要をご紹介しておきます。関係なさそうな「ラジオボタン」や「チェックボックス」でアコーディオンメニューが作成できる理由このアクロバットな裏技を最初に考え出した人が誰なのかは分かりませんが、とてもおもしろいテクニックです。ご紹介するまでもないでしょうが、HTMLのinput要素を使って作成できるラジオボタンやチェックボックスとは、以下のようなものです。ラジオボタン:ラジオボタンAラジオボタンBラジオボタンCチェックボックス:チェックボックスaチェックボックスbチェックボックスc上記のままでは、アコーディオンメニューとはまったく関係なさそうに見えます。ラジオボタンやチェックボックスをCSSで装飾する際の特徴として、チェック状態(選択状態か非選択状態か)によって装飾を分けられるという点があります。ここが大きなポイントです。この仕様を利用することで、CSSだけでアコーディオンメニューが作成できます。■選択中の場合にだけ、対応するボックスを表示するCSSを作るラジオボタンやチェックボックスがONの状態であるときにだけ、対応する文章を動的に表示すれば、スクリプトを使わずに「選択中の項目に対応するコンテンツだけを表示する」というUIが実現できます。実際に各項目をクリックしてみて下さい。上記の状態でもアコーディオンメニューには見えませんが、動作はアコーディオンメニューにかなり近づきました。具体的な記述方法は後述しますが、上記の表示例にスクリプトは一切使っていません。「チェックが入っている際の装飾」と「チェックが入っていない際の装飾」の2種類をCSSで作成しただけです。■アコーディオン状に見えるよう装飾を加えると上記のラジオボタンやチェックボックスとそれらに属するボックス群を、さらにアコーディオンメニューに見えるように装飾すると、例えば下図のようになります。上図の左側はラジオボタン「メニュー項目A」がONの状態で、上図の右側はラジオボタン「メニュー項目B」をONにした状態です。それぞれ、選択された項目だけが展開されていることが分かります。上図の状態からラジオボタンそのものを非表示にすれば、アコーディオンメニューらしく見えるようになります。JavaScriptを使わずにCSSだけでアコーディオンメニューを作成できる上記でご紹介した概要が、HTMLにCSSを加えるだけでアコーディオンメニューを作成できる仕組みです。jQueryなどを駆使してJavaScriptソースを書く必要は一切ありません。それでは次のページから、アコーディオンメニューを作る具体的なHTML+CSSソースをご紹介いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。