SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのsummaryタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 8:39動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の十九本目は、サマリータグです。
  4. 0:07これは、折りたたみ表示の見出しになるタグで、ディテールズタグと必ずセットで使います。
  5. 0:14よくある質問ページで、質問の行をクリックすると答えが開く、あの質問の部分がサマリーです。
  6. 0:20今回は、どんな場面で使うのか、基本の書き方、コード例、分かりやすい見出しの書き方、
  7. 0:26使うときの注意点まで、初心者向けに順番に解説します。
  8. 0:31折りたたみは、長いページをすっきり見せるための、ブラウザー標準の仕組みです。
  9. 0:37ジャバスクリプトなしでも動く点も、初心者にとって大きな魅力です。
  10. 0:41まず、どんな場面で使うかを整理しましょう。
  11. 0:45代表例は三つです。
  12. 0:47一つ目は、よくある質問で、質問文をサマリーにして、答えを閉じた状態で置く使い方です。
  13. 0:54二つ目は補足説明の入口で、最初は概要だけを見せ、知りたい人だけが詳細を開けるようにします。
  14. 1:02三つ目は、長いページの整理で、項目ごとに開閉できる形にすると、全体を眺めやすくなります。
  15. 1:10大切なのは、開く前に中身が予想できる見出しにすることです。
  16. 1:15ここを開く、だけでは何が出てくるか分かりません。
  17. 1:20必要な情報だけを開いて読めるので、読む人の負担が減ります。
  18. 1:25逆に、短い注意書きまで何でも閉じてしまうと、かえって読みにくくなるので注意しましょう。
  19. 1:33基本の書き方です。
  20. 1:34サマリーは開始タグと終了タグを明示し、ディテールズの最初の子として置きます。
  21. 1:39コード例のように、外側にディテールズ、その一行目にサマリー、続いて答えの段落、
  22. 1:43という順番が基本形です。
  23. 1:47サマリーは一つのディテールズに一つだけ置き、二つ目以降を置いても見出しとしては扱われません。
  24. 1:53文章の中にぽつんと置くのではなく、必ず親のディテールズと一緒に書く、と覚えてください。
  25. 1:59まずはこの三行の形を写して、クリックで開閉できるか試してみましょう。
  26. 2:04入れ子の順番を間違えると、ブラウザーが自動で補正して、思った構造とずれることがあります。
  27. 2:10書き終えたら、表示だけでなく構造も確認する習慣を付けましょう。
  28. 2:15記事の活用事例を、少し広げて見てみましょう。
  29. 2:18テーマは、開閉操作のラベルを分かりやすくすることです。
  30. 2:22一つ目は参加費はかかりますか、という質問で、答えは無料です、交通費のみご負担ください、
  31. 2:26です。
  32. 2:29二つ目は持ち物はありますか、という質問を並べました。
  33. 2:33質問が並んでいるだけで、知りたい項目だけを開いて読める形になります。
  34. 2:38試すときは、練習用ファイルの本文にこの例を貼り付けて保存し、再読み込みして、
  35. 2:44クリックやタップで開閉できるかを、開発者ツールのエレメンツでも確認してください。
  36. 2:50同じ形を繰り返せるので、質問が増えても追加しやすいのが利点です。
  37. 2:55質問の順番は、読む人がよく知りたがるものから並べると、より親切なページになります。
  38. 3:01見出しの文章の書き方も大切です。
  39. 3:04記事が繰り返し伝えているのは、操作内容が分かる文章にする、ということです。
  40. 3:10たとえば、詳細はこちら、とだけ書くと、開くまで何の詳細か分かりません。
  41. 3:16それよりも、参加費はかかりますか、返品の条件について、のように、中身そのものを表す文にしましょう。
  42. 3:24長すぎる説明文を見出しに入れる必要はありません。
  43. 3:28短くても、開いたら何が読めるかが伝わる一文が理想です。
  44. 3:32読む人が、開くかどうかをその場で判断できる見出しを目指してください。
  45. 3:38見出しが具体的だと、検索で訪れた人も、自分の知りたい答えがどこにあるか一目で分かります。
  46. 3:45迷ったら、読む人が口にする質問の言葉をそのまま使ってみてください。
  47. 3:51ディテールズとの関係を押さえましょう。
  48. 3:53開閉という仕組みの本体は親のディテールズで、サマリーはその顔になる見出しです。
  49. 3:59閉じているときもサマリーだけは常に見えていて、ここを押すことで中身が開きます。
  50. 4:05もしサマリーを書き忘れると、ブラウザーが詳細、といった既定の見出しを自動で表示しますが、
  51. 4:09内容は伝わりません。
  52. 4:13コード例のように、ディテールズにオープンを付けると、最初から開いた状態で表示できます。
  53. 4:19最初から見せたい項目だけに使い、付けすぎには注意しましょう。
  54. 4:24サマリーを押すたびに、ディテールズの開閉状態が切り替わります。
  55. 4:28この動きはブラウザーが用意したものなので、自分で開閉の処理を書く必要はありません。
  56. 4:34サマリーの属性についてです。
  57. 4:37記事の通り、この要素に必須となる専用の属性はありません。
  58. 4:41必要に応じて、グローバル属性と呼ばれる共通の属性を使います。
  59. 4:46アイディーは文書内で一意な識別子、クラスはシーエスエスやジャバスクリプトで複数の要素をまとめて選ぶ目印、
  60. 4:52ラングは内容の言語の指定です。
  61. 4:57データ属性にはアプリ独自の値を保持できますが、秘密情報を置く場所ではありません。
  62. 5:04開いた状態かどうかは、親のディテールズ側のオープンで表すもので、サマリーの属性ではない点にも注意しましょう。
  63. 5:12コード例のようにクラスを付ければ、質問の見出しだけ文字を大きくしたり、背景色を付けたりできます。
  64. 5:20属性は必要になったときに足す、という考え方で十分です。
  65. 5:25シーエスエスとの関係も確認しましょう。
  66. 5:28サマリーには、ブラウザーの標準表示で、先頭に小さな三角のマーカーが付き、
  67. 5:33クリックできる見出しとして表示されます。
  68. 5:37文字の大きさや色、マーカーの表示などは、シーエスエスで調整できます。
  69. 5:43ただし、マーカーを消してただの文章のように見せてしまうと、開けることに気づいてもらえなくなります。
  70. 5:51見た目を整えるときも、押せることが伝わる手がかりは残しましょう。
  71. 5:57意味はサマリーが担い、見た目の微調整はシーエスエス、と分けて考えるのが基本です。
  72. 6:03たとえば、開いているときと閉じているときでマーカーの向きが変わるのも、標準の分かりやすい工夫の一つです。
  73. 6:12装飾を変えるときは、その分かりやすさを損なわないか確かめましょう。
  74. 6:18注意点と、よくある間違いを確認します。
  75. 6:21一番大切なのは、サマリーの中に別のリンクやボタンを混ぜないことです。
  76. 6:27見出し自体が開閉の操作対象なので、中にもう一つ押せるものがあると、どちらが押されたのか分かりにくくなります。
  77. 6:37リンクは説明本文の側へ分けましょう。
  78. 6:40次に、タブキーで移動してエンターやスペースで開閉できるか、キーボードだけでも確認してください。
  79. 6:48最後に、三百二十ピクセル程度の狭い画面や文字拡大時にも、見出しが欠けたり押しにくくなったりしないかを確かめましょう。
  80. 6:58また、見出しの中に長い文章や別の見出しを入れ子にしないことも大切です。
  81. 7:04見出しは短く保ち、詳しい説明やリンクは、開いたあとの本文に置きましょう。
  82. 7:11ブラウザー互換性を確認します。
  83. 7:13記事が参照するエムディーエヌの記録では、サマリー本体は、クロームが十二以降、
  84. 7:18ファイアフォックスが四十九以降、サファリが六以降で対応しています。
  85. 7:23エッジについては、共通エンジンのデータを出典で確認する形になっています。
  86. 7:28現在の主要ブラウザーでは広く使える要素ですが、これは要素本体の対応開始の記録であり、
  87. 7:33細かなマーカーの見た目まで同じことを保証するものではありません。
  88. 7:39実際の表示はスマートフォンでも一度開いて確認しましょう。
  89. 7:43マーカーの形や余白はブラウザーごとに少しずつ違う場合があります。
  90. 7:47大事な情報がマーカー頼みにならないよう、見出しの文章自体で内容が伝わる書き方を心がけましょう。
  91. 7:54最後に練習とまとめです。
  92. 7:56サマリーは、ディテールズの最初の子に置く開閉見出しでした。
  93. 8:00大切なポイントは三つです。
  94. 8:02一つ目は、親のディテールズとセットで、一つだけ置くこと。
  95. 8:06二つ目は、開く前に中身が分かる見出し文にすること。
  96. 8:10三つ目は、中にリンクやボタンを混ぜず、操作を分かりやすく保つことです。
  97. 8:15練習として、よくある質問を二つ考え、質問をサマリー、答えを段落にして、クリックとキーボードの両方で開閉を確認してみてください。
  98. 8:24お疲れさまでした。
  99. 8:26次回は下付き文字のサブタグを学びましょう。
  100. 8:29書いたあとは、閉じた状態で質問だけを読んでみて、答えを開きたくなる見出しになっているか、
  101. 8:34自分の目でもう一度確かめてみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

summaryタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。details の最初の子に置く開閉見出し。操作内容が分かる文章にします。

解説記事・サンプルコードを読む：HTMLのsummaryタグとは？属性・使い方・ブラウザー互換性と活用例 →