HTMLで説明を開いたり閉じたりするには？detailsとsummaryを試そう

長い説明を、必要なときだけ開けるようにしたい。HTMLには、そのためのdetailsという要素があるよ。HTMLはページの内容と構造を記述する言語。今回は、ブラウザだけで説明を開閉できる小さな部品を作ろう。

目標は「クリックでもキーボードでも説明を開き、もう一度閉じられること」。記事内の作例はそのまま操作できるので、最初は編集ソフトがなくても大丈夫。

開閉の見出しはsummaryに書く

detailsは折りたたむ範囲、summaryは閉じているときにも見える見出しだよ。次の内容をHTMLファイルへ保存すると、説明を開閉できる。

<details>
  <summary>持ち物を確認する</summary>
  <p>ノートと筆記用具を持ってきてね。</p>
</details>

summaryをdetailsの最初の子要素として置く。見出しを押すと、その下の段落が見える。もう一度押すと隠れるよ。この開閉だけなら、JavaScriptという動作を記述するプログラムは必要ない。

ページ内の作例で、二通りの操作を試そう

1. 下の作例で「持ち物を確認する」を押す。
2. 「ノートと筆記用具を持ってきてね。」が出ることを確認する。
3. 同じ見出しをもう一度押し、段落が隠れることを確かめる。
4. 作例内をクリックしてからTabキーで見出しへ移動する。フォーカスという、キーボード操作の対象を示す枠が見える。
5. Enterキーまたはスペースキーを押して開閉する。

Tabキーはほかのリンクや作例の外にも移動するので、枠が当たっている場所を見ながら試してね。作例は、クリック、Enter、スペースで開閉できることをChromiumで確認した。記事側の「最初から試す」で閉じた初期状態へ戻せるよ。

最初から開くならopenを付ける

<details open>
  <summary>参加前に確認すること</summary>
  <p>開始は午後2時です。</p>
</details>

openは、属性があるかどうかで状態を指定する真偽属性。open="false"と書いても属性は存在するため、閉じた指定にはならない。最初は閉じたいなら、openそのものを取り除こう。

作例の二つ目は最初から開いている。同じ見出しを押せば閉じられるので、二つの初期状態を比べてみよう。今回の二つの部品は独立しており、一方を開いても他方は閉じない。

隠してよい内容を選ぼう

折りたたむほどページがよくなるわけではない。申込期限、料金、必須条件のように見落とすと困る情報は、閉じた説明の奥にだけ置かないほうが伝わるよ。

見出しの中へ別のボタンやリンクを詰め込むと、開閉と別の操作が混ざりやすい。まずは短い文字の見出しと本文だけで作り、キーボードでも操作できるか確認しよう。三角の印やフォーカスの枠も、理由なく消さないでね。

開かない・見出しが出ないとき

detailsとsummaryの綴り、閉じタグ、入れ子の位置を確認する。summaryを外へ置いていないか、CSSで見出しを非表示にしていないかも見直そう。コピーした最小例へ戻すと、HTMLの問題か、追加した見た目の指定の問題か切り分けやすい。

HTMLと見た目・動作の役割を整理したいときは、HTML・CSS・JavaScriptの違いも試してみてね。