HTMLの折りたたみメニューを有効活用する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLと折りたたみメニュー(アコーディオンメニュー)について解説しています。アコーディオンメニューは広げたり折りたたんだりすることができるメニューです。サンプルで表示と動作を確認してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLのアコーディオンメニューを有効活用する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

HTMLと折りたたみメニュー(アコーディオンメニュー)について詳しく説明していくね!

大石ゆかり

お願いします!

 

折りたたみメニュー(アコーディオンメニュー)とは

HTMLのアコーディオンメニューとは楽器のアコーディオンのように開いたり閉じたりすることのできるメニューのことをさします。

メニューバーをクリックすると、メニューバーの下に解説文などの中身が表示されるようになるでしょう。

通常は閉じた状態となり、クリックなどのアクションで開くことができるため、アコーディオンメニューで見た目にもわかりやすく整理されたページを作成することが可能です。

 

折りたたみメニュー(アコーディオンメニュー)のHTMLと CSSによる基本的な作り方

HTMLのinput要素を使いましょう。

input要素はデータをを入力するために使うものの、type属性のうちのcheckboxを記述していきます。

ユーザーが選択のできるチェックボックスを複数作り、そのチェックボックスのうちチェックの入れられたボックスの中身を表示するように設定します。

アコーディオンを作成するためにはチェックボックスの四角い枠自体はdisplay:noneなどで非表示にしておくとよいでしょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

jQueryを組み合わせるなど発展的な作り方

jQueryを用いた場合には、簡単に動的なHTMLを作成可能です。

jQueryとはjavascriptのプログラミングを簡単に処理することができるライブラリです。

 

作り方としてはHTMLファイルとCSSファイルの他にJSファイルを作成し、とても簡単に記述することが可能です。

slideDownのメソッド(命令文)を使うことにより要素を下に下げることができ、slideUpによって再び要素を上にあげることができます。

またslideToggleメソッドを使用することに上げ下げを交互に行うことが可能です。

 

サンプルコード

それでは実際に書いていきましょう。

HTMLとCSSだけで記述する場合はこのように記述します。

(index.html)

<div class="accordion_box">

<label for="label1">表題をクリック1</label>

<input type="checkbox" id="label1" class="accordion" />

<div class="accordion_contents">

<p>中身1</p>

</div>

<label for="label2">表題をクリック2</label>

<input type="checkbox" id="label2" class="accordion" />

<div class="accordion_contents">

<p>中身2</p>

</div>

<label for="label3">表題をクリック3</label>

<input type="checkbox" id="label3" class="accordion" />

<div class="accordion_contents">

<p>中身3</p>

</div>

</div>

(style.css)

.accordion_box {

width: 300px;

}

.accordion_box label {

border-bottom: solid 1px white;

background-color: #ccc;

cursor: pointer;

padding: 10px;

font-weight: bold;

display: block;

}

.accordion_box input {

display: none;

}

.accordion_box .accordion_contents {

display: none;

}

.accordion:checked + .accordion_contents {

display:block;

border: solid 1px #ccc;

margin: 0px;

padding: 10px;

}

 

jQueryは以下のように記述しましょう。

(index.html)

<dl id="accordion">

<dt>表題をクリック1</dt>

<dd>中身1</dd>

<dt>表題をクリック2</dt>

<dd>中身2</dd>

<dt>表題をクリック3</dt>

<dd>中身3</dd>

</dl>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script type="text/javascript" src="main.js"></script>

(style.css)

#accordion {

width: 300px;

}

#accordion dt {

border-bottom: solid 1px white;

background-color: #ccc;

cursor: pointer;

padding: 10px;

font-weight: bold;

}

#accordion dd {

border: solid 1px #ccc;

margin: 0px;

padding: 10px;

}

(main.js)

$(function() {

$('#accordion dd').hide();

$('#accordion dt').click(function(){

$(this).next('dd').slideToggle();

});

});

 

どちらも同じ表示になれば成功だといえるでしょう。

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

HTMLのアコーディオンメニューを有効活用する方法が分かりやすくて良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。