第3号（2021年07月01日）

ユーザー自身が必要な情報を選んで閲覧アコーディオンメニュー

はじめに

 今回はWEBサイトにおけるナビゲーションメニューのひとつのアコーディオンメニューをHTMLとCSSのみで実装する方法を紹介していきたいと思います。

アコーディオンメニューとは?

 項目をクリックすることで楽器のアコーディオンのように開いたり閉じたりすることのできるナビゲーションメニューのことです。 アコーディオンメニューをWEBサイトに使用することで、以下のようなメリット・デメリットが考えられます。
メリット１　ユーザビリティの向上
 アコーディオンメニューによってコンパクトに情報をまとめることができるため、ユーザーが効率的に情報を探すことができ、使いやすいサイトになります。
メリット２　ユーザーが必要な情報だけを得ることができる
 ユーザー自身が情報の表示・非表示をコントロールできるため、ユーザー１人１人が自分にとって必要な情報だけを得ることができます。
メリット３　スマホの画面でも見やすいサイトに
 サイトをスマホで閲覧した場合、パソコンで閲覧したときに比べて縦長の画面になりがちですが、 表示する情報量を減らすことができるため、スマホからでも見やすいWEBサイトにできます。
デメリット１ 情報を１つずつ表示させる必要がある
 アコーディオンメニュー内の情報を全て閲覧したい場合は１つ１つの項目をクリックして表示させる必要があり、 全ての情報を閲覧したいユーザーにとっては手間となってしまいます。
デメリット２　情報を見てもらえない可能性がある
 情報をメニュー内に格納してしまうため、表示するには一度ユーザーにクリックしてもらう必要があります。  そのため、メニュータイトル部分でユーザーが不必要とした場合、どんなに優れた内容の情報だったとしても閲覧されない可能性があります。

アコーディオンメニューの実装

 それではアコーディオンメニューの実装に移りたいと思います。まずはHTMLでメニューの元となる部分を作成していきます。
　HTML
                  <input id="chk1" class="chk" type="checkbox">
 <label class="lbl" for="chk1">ｸﾘｯｸで開く1</label>
 <div class="con">
    <p>hello.world!</p>
 </div>
 <input id="chk2" class="chk" type="checkbox">
 <label class="lbl" for="chk2">ｸﾘｯｸで開く2</label>
 <div class="con">
    <p>hello.world2!</p>
 </div>

hello.world!

hello.world2!

 上記のコードのチェックボックスのidとラベルのforに注目してください。ラベルのforにチェックボックスのidを指定しています。
 これによりラベルをクリックした際に、連動してチェックボックスのチェックのつけ外しが可能になります。
 この部分がのちにメニューをクリックしたときにコンテンツの表示・非表示を切り替える仕組みになっていきます。
 次にCSSでアコーディオンメニューらしく見えるよう装飾を加えていきます。
　CSS
                  .chk {
      display:none;
 }
 .lbl{  
     background:#6091d3; /*背景色*/
     color:#fff;         /*文字色*/
     display:block;
     margin-bottom:1px;　/*要素の外側下部の余白*/
     padding:10px;       /*要素の内部側の余白*/
     width:200px;        /*横幅*/
 }
 .con{
     border: 1px solid #000; /*枠線*/
     height: 0;              /*縦幅*/
     width: 200px;           /*横幅*/
     opacity: 0;             /*不透明度*/
     padding: 0 10px;        /*要素の内部側の余白*/
     transition: 0.5s;       /*アニメーション速度*/
     visibility: hidden;     /*表示設定*/
 }
 .chk:checked + .lbl + .con{
     height: 40px;        /*縦幅*/
     opacity: 1;          /*不透明度*/
     padding: 9px;        /*要素の内部側の余白*/
     margin-bottom: 10px; /*要素の外側下部の余白*/
     visibility: visible; /*表示設定*/
 }

hello.world!

hello.world2!

 上記のCSSでは表示する必要のないチェックボックスを非表示にしたり、メニュー部分の色付けや枠線を表示しています。
 また、メニューがクリックされたとき、コンテンツが表示されるように「.sample-check:checked +.sample-label + .sample-content」というセレクタを設け、 表示する際のスタイルを指定しています。ここが、先ほどHTMLでチェックボックスとラベルを連動させた部分につながってきます。
 メニューをクリックに合わせてボックスのチェックが切り替わるため、「.sample-check:checked」をセレクタに用いることでチェックがある場合は表示、 ない場合は非表示というようにコンテンツの表示・非表示が切り替わる仕組みを実装できます。

開閉状態がわかるアイコン追加

 アコーディオンメニューではアイコンがないと開閉するということが分かりずらいため、最後に開閉状態が分かるアイコンを追加します。
　CSS
                  .spl-chk{
     display: none;
 }
 .spl-lbl{  
     background: #6091d3; /*背景色*/
     color: #fff;         /*文字色*/
     display: block;
     margin-bottom: 1px;　/*要素の外側下部の余白*/
     padding: 10px;       /*要素の内部側の余白*/
     width: 200px;        /*横幅*/
     position: relative;  
 }
 .spl-con{
     border: 1px solid #000; /*枠線*/
     height: 0;              /*縦幅*/
     width: 200px;           /*横幅*/
     opacity: 0;             /*不透明度*/
     padding: 0 10px;        /*要素の内部側の余白*/
     transition: 0.5s;       /*アニメーション速度*/
     visibility: hidden;     /*表示設定*/
 }
 .spl-chk:checked + .spl-lbl + .spl-con{
     height: 40px;        /*縦幅*/
     opacity: 1;          /*不透明度*/
     padding: 9px;        /*要素の内部側の余白*/
     margin-bottom: 10px; /*要素の外側下部の余白*/
     visibility: visible; /*表示設定*/
 }
 
 /*プラスアイコンの横線*/
 .spl-lbl::before, .spl-lbl::after {
     position: absolute;
     top: 25px;                  /*縦位置*/
     left: 90%;                  /*横位置*/
     content: '';                /*文字や画像など*/
     display: inline-block;
     width: 13px;                /*横幅*/
     height: 13px;               /*縦幅*/
     border-top: 2px solid #fff; /*横線*/ 
     /*水平方向の移動距離*/
     transform: translateX(-50%);
 }
 
 /*プラスアイコンの縦線*/
 .spl-lbl:after {
     top: 19px;                /*縦位置*/
     left: 84.15%;             /*横位置*/
     transform: rotate(90deg); /*回転量*/
 }
 
 .spl-chk:checked + .spl-lbl:after {
     display: none;
 }

hello.world!

hello.world2!

 新たに追加したのは１１行目と３１行目以降の部分になります。１１行目の「position:relative;」は 開閉アイコンを「position:absolute;」で配置するためそれに合わせてrelativeにしています。
 ３１行目以降は「.sample-label:after」と「.sample-label::after」の擬似要素を利用し、 borderの横線を２本用意して、１本は９０度傾けることで縦線として使っています。
後はこの２本の線の位置を調整して＋に見えるようにしています。  メニューのクリック時には縦線をコンテンツ部分と同じ仕組みで表示・非表示を切り替えることで、 メニューが閉じているときは＋、開いたときは－になるよう見せています。

まとめ

 以上がHTMLとCSSだけで実装できるアコーディオンメニューでした。
 今回のようにHTMLとCSSだけで簡単に実装することもできれば、jQueryを利用することでより凝ったメニューを実装することもできます。
 アコーディオンメニューを使うことで情報量をコンパクトにまとめ、ユーザー自身が必要な情報を選ぶことができるなど便利な一方で、 場合によってはユーザーに手間をかけさせてしまう可能性もあるため、使いどころを見極めたうえで実装できるよう私も気を付けようと思いました。
一覧へ戻る

↑