操作できる部分。文章の構造や意味付けではない。
要素一覧
| 要素 | 概要 |
|---|---|
<details> |
クリックで開閉できる要素 |
<summary> |
<details>の要約 |
<dialog> |
ダイアログを表示する |
<menu> |
コマンドであることを表す順序なしリスト |
<details>
クリックで開閉できる要素。<summary>とセットで使う。
<details><summary>要約。</summary> <p>詳細。</p> </details>
<details open><summary>open属性</summary> <p>付与されていると最初から詳細が開き、見えている状態になる。さもなくば閉じて、見えない状態である。</p> </details>
ここをクリックしてみてね。
ほら、詳細が出たでしょ？
もう一度クリックすると閉じるよ。あとはその繰り返し。さあ、やってごらんなさい？
ちなみにCSSセレクタではopen属性が付与しているときだけ文字色を赤くするなどの設定ができる。
style.css
details[open] { color: red; }
<summary>
<details>の要約を表す。
<details><summary>要約。</summary> <p>詳細。</p> </details>
<dialog>
index.html
<dialog id="dialog-1"> <h1>ダイアログだよ</h1> <p>ESCキーで閉じるよ。</p> </dialog> <button onclick="document.getElementById('dialog-1').showModal();">ダイアログを表示する</button>
ダイアログだよ
ESCキーで閉じるよ。
なぜかこのブログではダイアログが表示できず、記事の一部として表示されてしまう。
ローカルでindex.htmlファイルを作成したときには成功した。
<details>とおなじくopen属性がある。
<menu>
ツールバーを表現する。ただしブラウザにおいて機能は未実装。単に<ul>よりもコマンドであることを強く意味づけする手段でしかない。
<menu> <li>コマンド1 <li>コマンド2 <li>コマンド3 </menu>
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux
