株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • 簡単! HTMLだけでアコーディオンメニューを作成する方法 ①
カテゴリーから探す
アーカイブから探す
2023年2月17日
簡単! HTMLだけでアコーディオンメニューを作成する方法 ①

アコーディオンメニューはjqueryやJavaScriptで作成する方法もありますが、今回はHTMLのみでアコーディオンメニューを作成する方法を紹介します。

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

Webページおけるナビゲーションメニューのひとつで、選択した項目がその場で広がり、隠れていた詳細内容を表示するメニューのこと。限られた範囲で多くの項目を一覧表示することが可能なため、利便性が高い。

HTMLだけで記述するとどうなるか

では、実際にHTMLだけで、書くとどうなるか。例示の「Result」の中の「Run Pen」をクリックした後、「常に表示させておく項目」をクリックしてください。

See the Pen
Untitled
by 林 (@hayashi-akina)
on CodePen.

HTML

<details>
<summary>常に表示させておく項目</summary>
 <p>ここに項目に対する内容などを記述する</p>
</details>

<details>タグで囲んだ箇所がアコーディオンになります。<summary>タグの中に、常に表示させておきたい項目を記述します。

<summary>タグの下に、項目に対する内容(隠したい内容)を記述します。これで、例示のようなアコーディオンメニューができます。

矢印もデフォルトでありますが、矢印や全体のデザインを変えたい場合はCSSで変更することが可能です。

次回、「簡単! HTMLだけでアコーディオンメニューを作成する方法②」で、このデザイン変更の方法について解説します。