アコーディオンメニューとは?アコーディオンメニューの効果と作り方アコーディオンメニューとは?アコーディオンメニューの効果と作り方Webサイト制作サイト制作2020.10.28「アコーディオンメニューってどうやって作るの?」ホームページなどでよく利用されるアコーディオンメニュー。この記事では、上記の様な悩みを持った方に向けて、HTMLとCSSのみで作るアコーディオンメニュの作り方について解説しています。コピーしてそのまま使用できるようコードも記載しておりますので、是非参考にしてみてください。jQueryを使用しアコーディオンメニューを作成する方法については下記の記事で解説しています。jqueryで作るアコーディオンメニュー|コピペ用サンプル付きユーザーにとって見やすいWebページを作るために覚えておきたいのが、「アコーディオンメニュー」。まとめアコーディオンメニューとはそもそも何?アコーディオンメニューとは、ナビゲーションメニューの種類の1つのことで、クリックすることで開けたり閉じたりすることができるメニューのことです。最近のサイトでは、アコーディオンメニューを使っているサイトも多く見受けられます。アコーディオンメニューの3つの効果ではまずアコーディオンメニューを使うことでどのような効果が得られるのか、具体的に解説していきます。たくさんの情報を収納できるナビゲーションバーからさまざまなページに飛ばせるようにしたいと思った場合に、それらをすべて並べて表示してしまうと1つ1つが見づらくなってしまいますよね。そんな時にアコーディオンメニューが活躍します。アコーディオンメニューを活用すると、大枠のワードが表示されるように設定し、そこからクリックしたら詳細なキーワードが表示するということができます。サービス内容を表示したい場合には、大枠をサービスとしクリックすると具体的なサービスの種類を表示することができるので、コンパクトなデザインでたくさんの情報をまとめることができます。ユーザーがほしい情報だけを見ることができるユーザーは自分の問題解決のために、ページを閲覧します。たくさんの情報が羅列しているサイトでは、自分の必要な情報を見つけづらくなってしまいます。そのようなユーザーのストレスはサイトからの離脱につながる可能性があります。アコーディオンメニューを活用することによって、ユーザーが自分の必要な情報をすぐに見つけることができ閲覧することができるため、サービスの認知や商品の購入につながりやすくなります。ページを短くすることができる大半のサイトはPC版とスマホ版で表示方法を変えていると思います。PCとスマホでは1つの画面に表示できる分量がかなり変わってしまうので、PCの分量をスマホで表示しようとすると、どうしてもページが長くなってしまいます。長いページの場合、ユーザーは下部の情報までスクロールして最後まで見てくれる可能性は低くなってしまうため、ユーザーが必要な情報に行きつくことなくページから離脱してしまうことが考えられます。アコーディオンメニューを使うことによって、たくさんの情報を1つのページに表示することなく、必要な情報をまとめることができるので、よりユーザーに必要な情報を見つけてもらいやすくなる可能性を高めることができます。アコーディオンメニューの作り方では、アコーディオンメニューの作り方を解説していきます。アコーディオンメニューの作り方はさまざまありますが、大きく分けると「cssのみで作る方法」と「jQueryを使う方法」の2つがあります。今回はCSSのみで作ることができるアコーディオンメニューについて、その作り方を詳しく解説していきます。HTMLまずはdivでアコーディオンメニューを作成する親要素を用意しておきましょう。</div>次にメニュー部分を押すことで反応するようにボタンにする必要があります。そのため、ラベルを使います。「メニュー1」と書いてある部分には、自分がそのボタン部分に表示したい言葉を入力してください。for="menu1">メニュー1</label>ボタンを作成した後は、そのボタンを押したら動作するように指示する必要があります。id="menu1">動くボタンを作成したら、ボタンを押した時に表示する中身を記載していきましょう。表示させたい数に合わせて複製して入力しましょう。id="link_menu1"><li>ここに表示させたい内容を記入します</li></ul>HTMLは以上になります。コピーして使用したいという方は以下のコードを書き換えて使ってください。id="link_menu3"><li>ここに表示させたい内容を記入します</li></ul></div>CSSまずは先ほどボタンにした部分に装飾をしていきます。displayでブロックを指定することによって、ボタンの幅を調整することができるようになります。margin(ボタンの外側の余白)とpadding(ボタンの内側の余白)は下記のように省略して記述することも可能です。15px;文字のカラーとボタンの背景部分のカラーを自分の好みの色に指定しておきましょう。:pointer;}現状だと、input要素を使ってボタンを動作させているので、装飾したボタンにチェックボックスがついている状態になっています。ボタンをクリックした時にこのチェックボックスにチェックがつくと、紐づけが完了しているということを意味します。この部分はお好みになりますが、このチェックボックスを表示させたくないという場合には、下記のCSSで非表示とします。}今の段階でメニューボタンを押すと、HTMLの時に入力した内容が箇条書きで羅列されている状態になっていると思います。次はこの部分を装飾していきます。noneの記述をすることによって、点を非表示にすることができます。}次に行うのは、ボタンを押す前の段階では隠しておきたいメニューを非表示にする作業です。この記述を入れていないと、常に表示されてしまいますので、それではアコーディオンメニューの意味がなくなってしまうため、必ず記載するようにしましょう。}cssは以上になります。コピーして使用したいという方は以下のコードを書き換えて使ってください。}まとめアコーディオンメニューの作り方について解説してきましたがいかがでしたでしょうか?アコーディオンメニューを使うことによって、ユーザーに必要な情報を適切に伝えることができます。2016年9月ご質問やご相談などお気軽にお問い合わせください。