もくじ

details・summaryタグで簡単にアコーディオンやハンバーガーメニューを実装する

ハウツー
蛙のicon

こんにちは、蛙です。
今回はHTMLの<details>タグを使って、アコーディオンメニューとハンバーガメニューを作っていきたいと思います。 jQuery不要なので動作が軽いですし、JavaScriptなんて使えないという初心者の方でも簡単に実装することができるので、ぜひ試してみてくださいね。

details・summaryタグの使い方

全体を<details>で囲み、その中に<summary>とクリック時に表示されるコンテンツを入れてください。 <summary>はクリック領域として、開閉に関わらず常に表示される部分です。 <summary>で囲っていない部分はクリックすることで初めて表示される部分です。 今回は<p>タグを使っていますが、<div><span><ul><table>など、さまざまな要素を入れることができます。
💡
<summary>タグは必須ではありません。 省略した場合にはブラウザによって「詳細」「概要」などの文字列が自動的に表示されます。

open属性について

<details>open属性を追加することで、最初から開いた状態にしておくこともできます。 この場合でも<summary>部分をクリックすると閉じることができ、閉じると自動的にopen属性が外れます。
<details open> <summary>見出し</summary> <p> クリックで見えなくなる部分。 </p> </details>

デザインのポイント

黒三角を消す

デフォルトでついている黒い三角形を消したい場合は、CSSに以下の記述を追加してください。 黒三角がなくなると開閉できることが伝わりにくくなるので、疑似要素で矢印や+などの記号を追加するのがおすすめです。
summary { display: block; list-style: none; } /* 上記の記述で対応できないブラウザ用 */ summary::marker, summary::-webkit-details-marker { display: none; }

cursor: pointer;

<summary>cursor: pointer;の記述を追加すると、ホバーした際にカーソルが矢印から指マークに変わるようになります。 なくてもかまいませんが、クリックできる領域だということが伝わりやすくなるので、記述しておくのがおすすめです。
summary { cursor: pointer; }

選択時に表示される枠線を消す

デフォルトでは、<summary>をクリックするとオレンジの枠線が表示されます。 これを消したい場合には、以下の記述を追加してください。
summary { outline: none; }

開閉の動作を滑らかにする

detailsタグに高さとtransitionプロパティを追加すると、開閉時の動きがスムーズに見えるようになります。 目次などのページによって高さが変わる場合には、max-heightで記述することも可能です。
details { transition: all .3s; height: 40px; } details[open] { height: 200px; }

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

このようなアコーディオンメニューも、<details>・<summary>を使えば簡単に実装できます。 スタイルはCSSの記述を参考に、文字サイズや色などお好みで調整してください。
記述は少し複雑になりますが、内部にさらに<details>を入れ子にすることでメニューの階層を増やすこともできます。

ハンバーガーメニューの実装

スマホサイトに使いやすいハンバーガーメニューも、<details>だけで作ることができます。 上記で紹介したアコーディオンメニューと組み合わせて使ってみるのも良いですね。
こちらのハンバーガーメニューでは、縦の高さは100vhで画面いっぱいで固定、横幅をクローズ時は0、オープン時は100%にすることで、メニューが右からスライドインするような動きを再現しています。

まとめ

<details><summary>タグはまだ認知度が低いのか、あまり利用されているシーンを見ません。 しかし、HTMLの記述だけで開閉の動作が実装できるのはかなり利便性が高いです! ちなみに、<details>内に記述したコンテンツは隠しテキストとはみなされないため、SEOへの悪影響もありません。
今回はアコーディオンメニュー、ハンバーガーメニューの作り方を紹介しましたが、このほかにもブログ記事のもくじやQ&Aページなどに使ってみるのも良いと思います。
もしおすすめの使い方があれば、こっそり教えてもらえると嬉しいです!
蛙のicon
ひょんなことからIT業界に迷い込んだ1匹のカエル。知識ゼロからのスタートで四苦八苦。特にJavaScriptが怖い…。