【HTML5/Blogger】detailsとsummaryを使った折りたたみ要素

日付:
Bloggerのテーマ（テンプレート）にも使えそうなHTML5の要素についてメモしておきます。



<details>と<summary>について

HTML5から追加された要素<details>は、詳細情報を扱う事が目的で子要素の<summary>と合わせて使う事により、通常時は詳細文(= <detail>)が折りたたまれた状態で、概要・要約（= <summary>）のみ表示される要素です。

クリック（タップ）する事で詳細文を表示させたり、動作はアコーディオンメニューの様に<details>内の内容が下向きに展開される動きになります。

sample
<details>
 <summary>この部分はsummaryタグ </summary>
   この部分がdetailesタグ
</details>

上記の結果は以下の通りです。

sample


この部分はsummaryタグ この部分はdetailsタグ


CSS無しで簡単アコーディオンが完成します。
テーマ（テンプレート）でメニュー等に使っても良さそうですし、投稿記事の作成時に文書中で使用する事も可能です。


CSSで見た目を変更してみる

<summary>にはCSS無しでも三角マークが付いていてます。
この三角マークの表示を消す事も可能です。その場合は、cssの追加が必要になりますが、Chromeとで方法が異なります。


三角マークを削除するCSSの追加
CSS
/* Chrome,Safari */
       summary::-webkit-details-marker { display: none; }

/* firefox */
       summary { list-style: none; }

Sample

マーク無　この部分がsummary この部分がdetailesタグ


その他cssでいろいろ変更する事も出来ます。
簡単に作成出来るの要素なのでBloggerのテーマでも使いたいと思っています。
次回はQooQまたは、Vaster2向けの変更をやってみようかと思います。


注意
2019/9現在MS系(IE,Edge)では機能しません。
IEは終焉を迎えるとして、EdgeはレンダリングエンジンをChromeベースに変更する様なのでいずれは問題無く機能するはずです。

以上

コメント

コメントを投稿