大百科でdetailsタグとsummaryタグが使用可能になりました

大百科の記事本文においてdetailsタグとsummaryタグが使用可能になりましたのでお知らせします。

detailsタグを使うと、いわゆるアコーディオン表示を手軽に実現することが可能です。

なお、こちらのタグについては現在、ビジュアルHTMLエディタでの挿入には対応しておりません（将来的には対応する予定です）。
使用する場合はビジュアルHTMLエディタを適宜オフにしてください。

簡単な使い方

任意の箇所を <details>～</details> で括ればOKです。
detailsタグ内の <summary>～</summary> で括った箇所が、折りたたんだ状態でも表示される「要約」となります。

こう書くと、、、

<details>
<summary>折りたたんでも表示される部分</summary>
折りたたまれている部分。
</details>

こうなります。


「要約」をクリックすると内容が展開されます。

summaryタグは省略が可能となっています。

<details>
要約を省略してみた。
</details>

省略した場合はブラウザ規定の要約が表示されます（以下はChrome102:日本語での表示）。

detailsタグはブロック要素となっていて、divと同様のstyleが適用可能になっています。

<details style="border: black 2px solid; background-image: url(https://dic.nicovideo.jp/oekaki/86683.png);">
<summary>折りたたんでも表示される部分</summary>
折りたたまれている部分。
<br><br><br><br><br><br><br><br><br><br>
</details>

↓展開

summaryタグはインライン要素となっていて、spanと同様のstyleが適用可能になっています。

<details style="border: black 2px solid; background-image: url(https://dic.nicovideo.jp/oekaki/86683.png); width: 250px;">
<summary style="background-color: red; color: white; font-weight: bold;">折りたたんでも表示される部分</summary>
折りたたまれている部分。
<br><br><br>
</details>

また、summaryタグのstyleに「display: block;」を指定する事で、三角形で表示される折りたたみアイコンが非表示となります（ブラウザにより挙動が異なる場合あり）。

<details style="border: black 2px solid; background-image: url(https://dic.nicovideo.jp/oekaki/86683.png); width: 250px;">
<summary style="display: block; background-color: red; color: white; font-weight: bold;">折りたたんでも表示される部分</summary>
折りたたまれている部分。
<br><br><br>
</details>

detailsタグは入れ子にして使う事も可能です。

<details style="border: black 2px solid; background-image: url(https://dic.nicovideo.jp/oekaki/86683.png); width: 250px;">
<summary style="display: block; background-color: red; color: white; font-weight: bold;">折りたたんでも表示される部分</summary>
折りたたまれている部分。
<details style="border: black 1px solid; margin: 1px;">
<summary>入れ子1</summary>
入れ子1の内容。
<details style="border: black 1px solid; margin: 1px;">
<summary>入れ子2-1</summary>
入れ子2-1の内容。
</details>
<details style="border: black 1px solid; margin: 1px;">
<summary>入れ子2-2</summary>
入れ子2-2の内容。
</details>
</details>
</details>

なお、detailsタグのstyleにheightを指定しても折りたたんだ状態と開いた状態いずれにも適用されてしまうため、事実上使い物になりません。
折りたたんだ状態の高さのみを調整したい場合は「line-height」を使用してください。
内容をスクロール表示にしたい場合はdetailsの内側にdivを配置するなどして対応してください。

以上、簡単ではありますがざっくりとした使い方となります。
なるべく自由度が確保されるようシンプルに実装しましたので、想像を超えるような使われ方がされる事を期待しております。

注意

このタグを使用する事で、ビジュアルHTMLエディタ（TinyMCE）において空のタグが増殖する問題が発生しますが、こちらは今回追加されたタグに限らず発生する既知の不具合です。
この不具合については別の問題として修正する予定ですので、お手数をおかけしてしまいますが対応完了までお時間をいただければと思います。

なお、マイページの各種設定にて「HTMLエディタを使う」のチェックを外し、ビジュアルHTMLエディタをオフにしてテキストのみでの編集をすることで、この手のTinyMCEによる不具合は一切発生しなくなります。

（文責・はくはく）

[レックス (ID:60728)]

お疲れ様です！