detailsで補足を開閉する：開く前のラベルを具体的にする

持ち物の説明を全部並べると、案内が長くなる。ただし、参加に必要な情報まで隠すと、読む人が見落とすかもしれません。detailsで補足を開閉する前に、常に表示する文章と、必要な人が開いて読む文章を分けましょう。

題材は架空の紙工作会です。日時や基本の持ち物は本文へ残し、道具を持っていない人向けの説明だけを補足にします。実在する講座の貸出条件を紹介するものではありません。

閉じた状態だけでも、必要な準備が分かるかを見る

まず「はさみとのりを持参してください」という案内を本文に置きます。その下に、借りたい人が読む補足を作ります。初めて来る人が、開閉部分を一度も開かなくても基本の準備を理解できる構成を目指します。

料金、締切、参加条件など判断に必要な情報を、ページを短くするためだけに補足へ移すのは避けます。今回折りたたむのは、基本の案内を読んだ後に生じる個別の疑問への回答です。文章を消してよいかではなく、どの時点で必要になるかを考えます。

summaryに、何が読めるかを書く

次のHTMLを練習用ページのbody内へ入れます。detailsの最初の子要素をsummaryにし、その後ろへ補足本文を置きます。

<p>紙工作会には、はさみとのりを持参してください。</p>
<details>
  <summary>道具を借りたい方へ</summary>
  <p>貸出数には限りがあります。参加前に主催者へご相談ください。</p>
</details>

summaryは閉じた状態でも読めるラベルです。「詳細」だけでは何が隠れているか分かりにくいため、ここでは対象の人と内容を示しています。別の補足を増やす場合も、それぞれ単独で意味が分かる言葉にします。

MDNのdetailsの説明で、標準の開閉動作と属性を確認できます。この例に開閉用のJavaScriptは必要ありません。summary内へさらに別の操作ボタンを入れず、最初はラベルの文章だけにして試してください。

初期状態と、操作して開いた状態を分ける

上の例はopen属性がないため、最初は補足が閉じています。初めから内容を見せたい場合は、開始タグを<details open>にします。閉じた状態へ戻すにはopen属性そのものを取り除きます。

open="false"と書いても、属性が存在するため開いた状態になります。文字列で真偽を切り替える指定ではありません。編集時にこの違いを確かめ、どちらの初期状態にしたか記録してください。

一度クリックで開けたら、閉じてもう一度開きます。ラベルが内容を説明しているか、本文を読んだ後も閉じる場所が分かるかを見ます。補足が長くなりすぎたら、折りたたむ以外に別ページへ分ける方法も検討します。リンクとボタンの使い分けは、別の場所へ移る操作を考える際の参考になります。

キーボードと狭い画面でも確認する

次にTabキーでsummaryへ移動し、フォーカスが見えることを確かめます。スペースキーで開閉し、隠れていた本文を読めるかを確認します。独自のCSSで標準の印やフォーカス表示を消さずに始めましょう。

画面幅を狭め、ラベルが二行になっても欠けないか、開いた本文が横にはみ出さないかを見ます。見た目を調整する場合も、閉じた状態と開いた状態の両方を確認します。

練習の完成条件は、基本の案内が常に見え、ラベルだけで補足の内容を予想でき、クリックとキーボードの両方で操作できることです。無料レッスンで作ったページに補足を一つ加え、この三点を書き残してみてください。