アコーディオンメニューとは？アコーディオンメニューの効果と作り方

「アコーディオンメニューってどうやって作るの？」

ホームページなどでよく利用されるアコーディオンメニュー。

この記事では、上記の様な悩みを持った方に向けて、HTMLとCSSのみで作るアコーディオンメニュの作り方について解説しています。

コピーしてそのまま使用できるようコードも記載しておりますので、是非参考にしてみてください。

また、jQueryを使用しアコーディオンメニューを作成する方法については下記の記事で解説しています。

アコーディオンメニューとはそもそも何？

アコーディオンメニューとは、ナビゲーションメニューの種類の１つのことで、クリックすることで開けたり閉じたりすることができるメニューのことです。

最近のサイトでは、アコーディオンメニューを使っているサイトも多く見受けられます。

アコーディオンメニューの３つの効果

ではまずアコーディオンメニューを使うことでどのような効果が得られるのか、具体的に解説していきます。

たくさんの情報を収納できる

ナビゲーションバーからさまざまなページに飛ばせるようにしたいと思った場合に、それらをすべて並べて表示してしまうと１つ１つが見づらくなってしまいますよね。

そんな時にアコーディオンメニューが活躍します。アコーディオンメニューを活用すると、大枠のワードが表示されるように設定し、そこからクリックしたら詳細なキーワードが表示するということができます。

例えば、サービス内容を表示したい場合には、大枠をサービスとしクリックすると具体的なサービスの種類を表示することができるので、コンパクトなデザインでたくさんの情報をまとめることができます。

ユーザーがほしい情報だけを見ることができる

ユーザーは自分の問題解決のために、ページを閲覧します。

たくさんの情報が羅列しているサイトでは、自分の必要な情報を見つけづらくなってしまいます。そのようなユーザーのストレスはサイトからの離脱につながる可能性があります。

アコーディオンメニューを活用することによって、ユーザーが自分の必要な情報をすぐに見つけることができ閲覧することができるため、サービスの認知や商品の購入につながりやすくなります。

ページを短くすることができる

大半のサイトはPC版とスマホ版で表示方法を変えていると思います。

ただ、PCとスマホでは1つの画面に表示できる分量がかなり変わってしまうので、PCの分量をスマホで表示しようとすると、どうしてもページが長くなってしまいます。

長いページの場合、ユーザーは下部の情報までスクロールして最後まで見てくれる可能性は低くなってしまうため、ユーザーが必要な情報に行きつくことなくページから離脱してしまうことが考えられます。

アコーディオンメニューを使うことによって、たくさんの情報を１つのページに表示することなく、必要な情報をまとめることができるので、よりユーザーに必要な情報を見つけてもらいやすくなる可能性を高めることができます。

アコーディオンメニューの作り方

では、アコーディオンメニューの作り方を解説していきます。

アコーディオンメニューの作り方はさまざまありますが、大きく分けると「cssのみで作る方法」と「jQueryを使う方法」の2つがあります。今回はCSSのみで作ることができるアコーディオンメニューについて、その作り方を詳しく解説していきます。

HTML

まずはdivでアコーディオンメニューを作成する親要素を用意しておきましょう。

<div class="accordion_menu"> </div>

次にメニュー部分を押すことで反応するようにボタンにする必要があります。そのため、ラベルを使います。
「メニュー１」と書いてある部分には、自分がそのボタン部分に表示したい言葉を入力してください。

<label for="menu1">メニュー１</label>

ボタンを作成した後は、そのボタンを押したら動作するように指示する必要があります。

<input type="checkbox" id="menu1">

動くボタンを作成したら、ボタンを押した時に表示する中身を記載していきましょう。表示させたい数に合わせて複製して入力しましょう。

<ul id="link_menu1">
<li>ここに表示させたい内容を記入します</li>
</ul>

HTMLは以上になります。コピーして使用したいという方は以下のコードを書き換えて使ってください。

<div class="accordion_menu">
<label for="menu1">メニュー1</label>
<input type="checkbox" id="menu1">
<ul id="link_menu1">
<li>ここに表示させたい内容を記入します</li>
</ul>
<label for="menu2">メニュー2</label>
<input type="checkbox" id="menu2">
<ul id="link_menu2">
<li>ここに表示させたい内容を記入します</li>
</ul>
<label for="menu3">メニュー3</label>
<input type="checkbox" id="menu3">
<ul id="link_menu3">
<li>ここに表示させたい内容を記入します</li>
</ul>
</div>

CSS

まずは先ほどボタンにした部分に装飾をしていきます。displayでブロックを指定することによって、ボタンの幅を調整することができるようになります。

margin(ボタンの外側の余白)とpadding(ボタンの内側の余白)は下記のように省略して記述することも可能です。

 margin: 0 0 3px 0;
  padding : 15px;

文字のカラーとボタンの背景部分のカラーを自分の好みの色に指定しておきましょう。

.accordion_menu label {
    display: block;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px
    padding-top:15px;
    padding-left :15px;
    padding-right:15px;
    padding-bottom:15px;
    color :#ffffff;
    background-color: #ff7f50;
　text-align: center;
    cursor :pointer;
}

現状だと、input要素を使ってボタンを動作させているので、装飾したボタンにチェックボックスがついている状態になっています。

ボタンをクリックした時にこのチェックボックスにチェックがつくと、紐づけが完了しているということを意味します。

この部分はお好みになりますが、このチェックボックスを表示させたくないという場合には、下記のCSSで非表示とします。

.accordion_menu  input { display: none; }

今の段階でメニューボタンを押すと、HTMLの時に入力した内容が箇条書きで羅列されている状態になっていると思います。
次はこの部分を装飾していきます。

デフォルトの段階で、文字列の前に点がついていますので、それを消したい場合には list-style: noneの記述をすることによって、点を非表示にすることができます。

.accordion_menu ul {
background-color: #f5f5dc;
margin: 0; 
padding: 0;
 list-style: none; 
text-align: center;
 }

次に行うのは、ボタンを押す前の段階では隠しておきたいメニューを非表示にする作業です。

この記述を入れていないと、常に表示されてしまいますので、それではアコーディオンメニューの意味がなくなってしまうため、必ず記載するようにしましょう。

.accordion_menu li { 
height: 0; 
overflow: hidden; 
line-height: 3; 
transition: all 0.5s; }

cssは以上になります。コピーして使用したいという方は以下のコードを書き換えて使ってください。

.accordion_menu label {
    display: block;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px
    padding-top:15px;
    padding-left :15px;
    padding-right:15px;
    padding-bottom:15px;
    color :#ffffff;
    background-color: #ff7f50;
　text-align: center;
    cursor :pointer;
}

.accordion_menu  input { display: none; }

.accordion_menu ul {
background-color: #f5f5dc;
margin: 0; 
padding: 0;
 list-style: none; 
text-align: center;
 }

.accordion_menu li { 
height: 0; 
overflow: hidden; 
line-height: 3; 
transition: all 0.5s; }

まとめ

アコーディオンメニューの作り方について解説してきましたがいかがでしたでしょうか？アコーディオンメニューを使うことによって、ユーザーに必要な情報を適切に伝えることができます。多くのサイトで使われていますし、簡単に設定することができるので、ぜひ利用してみてはいかがでしょうか？