こんにちは。HTML5で追加された要素で面白そうなものがあったので紹介します。
折りたたみメニュー？？
アコーディオンメニューなどとも呼ばれています。
HTML的には「詳細折りたたみ要素」と言うらしい。
HTML5で追加されたdetails要素とは？
HTML5では、detailsという要素が仕様に追加されました。
これを使うと、簡単に折りたたみメニューを書くことができます。
作ってみよう
さっそく見てみましょう
<details>
<summary>折りたたみ内容の要約</summary>
折りたたみ内容
</details>
以上！これで簡単に作ることができます。
さっそく結果を見て見ましょう・・・・
<details>
<summary>detailsタグとは？</summary>
<p>このタグは、簡単に折りたたみメニューを作成することができます。</p>
<p>なんでも含むことができます！</p>
</details>
これでやってみると、、、
こんなかんじになりました。
Qiitaでもできるよ！！
Markdown記法 チートシートにもあるように、Qiitaでも折りたたみメニューを使うことができます。
こんな風に！
折りたたみメニューができていると思います。
子要素にできるコンテンツ
子要素に含むことのできるのはフローコンテンツのみです。
・・・とはいってもメターデータの一部の要素以外はすべてフローコンテンツなので特に意識する必要はなさそう。
ブラウザ対応状況
| Chrome、Chromium系 | Firefox | Safari | Opera | Internet Explorer | Edge |
|---|---|---|---|---|---|
| 対応 | 対応 | 対応 | 対応 | 未対応 | 未対応 |
| うん、なんとなく察してた。 |
非対応プラットフォームでの挙動
要素の内容が折りたたまれず、常時そのまま表示されます。
装飾
JavaScriptやCSSなどで折りたたみメニューなどを作っていたと思いますが、そのときと同様に装飾することができます。
三角マークを消したい
summary要素にlist-style:none;を指定すると三角マークを消すことができます。
参考
- Microsoft Edge Platform Status - detailsタグの実装に関する情報があります。今は実装予定はなさそう。(2020-01-09時点)
- MDN - <details>: 詳細折りたたみ要素 - datails要素の詳しい説明が載っています。