detailsタグ、summaryタグについて #HTML5

HTML5.1から追加されてる detailsタグ、summaryタグが中々使い勝手が良さそうだったのでメモ

detailsタグ、summaryタグとは

HTML の詳細折りたたみ要素 (details) は、ウィジェットが open 状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは summary 要素を使用して提供することができます。

折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 details 要素の最初の子要素が summary の場合は、 summary 要素が折りたたみウィジェットのラベルとして使用されます。

（https://developer.mozilla.org/ja/docs/Web/HTML/Element/details より引用）

要約すると、簡素なアコーディオンが作れるタグ

実装方法

detailsタグの中に見出しとなるテキストをsummaryタグで囲む。
アコーディオンと中身になる部分を記述する。
（Qiitaでは記事にタグを直書きすると反映される。）

<details>
    <summary>見出し</summary>
    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</details>

見出し

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

長所

javascriptでの実装が不要

htmlだけで実装できるので、別途javascriptを記載する必要がない。

cssで調整しやすい

中身の表示、非表示がdetailsタグの属性(open)で管理されるのでjavascriptでアコーディオンを作る時の
「is-open」のようなクラスを付けたり外したりするように使える。

また、見出しの横に表示される「▶︎」も以下の記述で消す事ができる。

Chrome

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

Chrome以外

summary { list-style: none; }

Qiita、Github内でも使えるので、以下のような行数が多いコードを共有する時等使い道が結構ありそう。

長めのコード


<ul class="numList">
    <li class="numList-item">list-1</li>
    <li class="numList-item">list-2</li>
    <li class="numList-item">list-3</li>
    <li class="numList-item">list-4</li>
    <li class="numList-item">list-5</li>
    <li class="numList-item">list-6</li>
    <li class="numList-item">list-7</li>
    <li class="numList-item">list-8</li>
    <li class="numList-item">list-9</li>
    <li class="numList-item">list-10</li>
    <li class="numList-item">list-11</li>
    <li class="numList-item">list-12</li>
    <li class="numList-item">list-13</li>
</ul>

<table class="numTable">
    <thead>
        <tr>
            <th colspan="4">thead-1</th>
        </tr>
        <tr>
            <th rowspan="2">thead-2<</th>
            <th>thead-3</th>
            <th>thead-4</th>
            <th>thead-5</th>
        </tr>
        <tr>
            <th>thead-6</th>
            <th>thead-7</th>
            <th>thead-8</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>tbody-1</td>
            <td>tbody-2</td>
            <td>tbody-3</td>
            <td>tbody-4</td>
        </tr>
        <tr>
            <td>tbody-5</td>
            <td>tbody-6</td>
            <td>tbody-7</td>
            <td>tbody-8</td>
        </tr>
        <tr>
            <td>tbody-9</td>
            <td>tbody-10</td>
            <td>tbody-11</td>
            <td>tbody-12</td>
        </tr>
    </tbody>
</table>
</details>

短所

edge,IE11で見れない

edge、IE11で見られる機会があるサイトでの実装は避ける。
iOS、Androidでは問題なく使える。
~~Android4系でも使えるのにedgeで使えないってどうなん~~

開いたり閉じたりする間のアニメーションを実装できない。

よくある中身が伸びたり縮んだりする動き等が実装できないため、アニメーションありきの実装は難しい。

まとめ

企業サイト等、IEでの流入があるサイトで使用するのはまだ難しいが、QiitaやGithubのように技術者メインのサイトで、アニメーションの実装が不要なサイトであれば実装可能

余裕あれば後々、detailsとsummaryタグでアニメーションも作る予定。