WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

shima

2020/05/15

CSSやJSは不要!HTMLだけで実装できるアコーディオンメニュー

投稿者: shima
カテゴリー: マークアップ >html



初めてアコーディオンメニューを実装しようとした時、CSSやJSを使用して混乱しませんでしたか?
メニューやよくある質問ページなどで活躍するアコーディオンメニューが、HTMLだけで実装することができます。

※IEは未対応ですので、ご注意ください。

使用方法

アコーディオンメニューにしたい部分をdetailsタグで囲い、summaryタグで囲った見出しと、本文を入れ込むだけでとても簡単です。

<details>
    <summary>見出しをクリック</summary>
    内容がここに入ります。
</details>

サンプル

見出しをクリック

内容がここに入ります。

detailsとsummaryタグとは

details

detailsタグで囲んだ部分がアコーディオンメニューになります。

summary

detailsタグの最初の子要素として見出しに使用されますので
最初から表示させておきたい部分を囲みます。 summaryタグの部分をクリックすると、詳細文が表示されます。

ポインターを変更

このままだとカーソルがテキスト選択になります。
CSSでリンクをクリックできることが分かるように変更しましょう。

summary {
  cursor: pointer;
}

サンプル

見出しをクリック

見出しのポインターが変更されています。

矢印を変更

デフォルトは、サンプルのように黒い三角がアイコンとして表示されます。
この三角を消すには、FirefoxとChrome, Safariでは方法が違いますので下記のように記述します。

Firefoxの場合

details summary {
  list-style: none;
}

Chrome, Safariの場合

details summary::-webkit-details-marker {
  display: none;
}

三角を消したら、「Font Awesome」を使用し、summaryタグにアイコンを装飾します。
閉じている時はプラス、開いている時はマイナスとする場合は以下のように記述してください。

閉じている時

details summary::before {
  font-family: FontAwesome;
  content: '\f067';
  margin-right: 20px;
}

開いている時

details[open] summary::before {
  content: '\f068';
}

開いている時の装飾はdetailsの後に[open] を記述することで反映されます。

まとめ

残念ながらIEは未対応ですが、対応させるためのスクリプトもあるので、ぜひ一度試してみてください。
details-polyfill

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ