要約

  • detailsとsummaryは、ブラウザーが開閉を担う標準の開示部品を作る。
  • 同じnameを持つ複数の扉は、一つを開けると別の扉が閉じる排他的な組になる。

長いウェブページは、整理前の引き出しを机の上にぶちまけたようになる。説明、補足、設定が同じ声量で並ぶ。作者はスクリプトで折りたたみを作れたが、HTMLはもっと小さな道具を用意した。<details>の先頭に<summary>を置く。ブラウザーが蝶番を受け持ち、読者には見える取っ手が残る。大げさな発明ではない。だから毎日のページで効く。

W3Cが2010年3月に公開した最初のHTMLマークアップ草案は、detailsとsummaryを新しい要素として記した。detailsは必要なときに追加情報を得るための制御で、openは表示状態を示す真偽属性だった。草案が示す設計の要点は、情報を文書の中に置いたまま、その見せ方を言語の規則として書けるようにしたことだ。

2011年のW3Cマークアップ参考書も同じ組み立てを示す。先頭のsummaryが札になり、openが中身の表示を決める。クリックすると何が起こるかを、別のスクリプトだけに預けずに済む。作者が決めるのは、扉の向こうに何を置くかと、札に何と書くか。「もっと見る」は短い。しかし読者には、何を見るための一回なのかが分からない。

現行のHTML標準は動きを具体的に定める。最初のsummaryが扉の説明で、欠けていればブラウザーが説明を補うべきだという。openがなければ札だけ、あれば中身も見える。読者が操作すると、ブラウザーはその属性を付け外しする。toggleイベントも定義されている。文書の形、画面の状態、手の動きが、短い一本の規則につながった。

札の横の小さな三角にも描画規則がある。閉じたときと開いたときで印が変わる。目立たない仕事だが、取っ手の場所と現在の状態を伝える。進捗の細部、追加の設定、長い参照資料。どれも専用のからくりを組まずに、馴染みのある合図を使える。インターフェースの名脇役は、役名が思い出せないほど自然なものだ。

今の標準には、扉同士を連動させるnameもある。同じ名前のdetailsを開くと、すでに開いていた仲間は閉じる。排他的なアコーディオンが標準の動作になる。一方で標準自身が、複数の項目を同時に見たい利用者には不便になり得ると注意している。ページは片付くが、比較したい読者は廊下を行ったり来たりする。整頓の料金は人の時間で払われる。

小さな扉の歴史は、役割分担の歴史でもある。作者は配置と札、そして隣の扉を閉める規則を選ぶ。ブラウザーが開閉を実行する。読者が最初の一押しを決める。いい扉は中身を正しく予告し、必要な資料を並べて見られる。HTMLが蝶番を作ったあとも、家の使い勝手を決めるのは設計者の判断だ。