SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04エイチティーエムエルタグ編の七十四本目は、エイチツー、タグです。
  4. 0:09エイチツーは、エイチワンからエイチシックスまで六段階ある見出しの中で、二番目の深さにあたる第二階層を担当します。
  5. 0:18ページ全体のタイトルであるエイチワンの下で、大きな章を区切るときに使う見出しです。
  6. 0:24長い記事や解説ページでは、読者が今どこを読んでいるかを示す目印になります。
  7. 0:30今回は、その役割と正しい使い方を順番に確認していきましょう。
  8. 0:35見出しの階層全体の中で、自分の位置を意識することが大切です。
  9. 0:40焦らず一歩ずつ進めていきましょう。
  10. 0:42まず、見出し全体の中での位置を押さえます。
  11. 0:46エイチワンが文書全体を表す最も大きな見出しで、エイチツーはその直下の章にあたります。
  12. 0:53本でいえば、表題の下にある章の題名と考えると分かりやすいでしょう。
  13. 0:58その章をさらに分けるときに、初めてエイチスリーが登場します。
  14. 1:03大切なのは、見出しだけを順に拾って読んでも文章の流れがつかめることです。
  15. 1:08題名は内容が具体的に伝わる言葉にし、階層を飛ばさず一段ずつ深くしていくのが基本です。
  16. 1:15目次を作るときも、この順番がそのまま骨組みになります。
  17. 1:20番号と階層を常にセットで覚えておくと、長い文書でも迷いません。
  18. 1:25目次との対応も自然に整います。
  19. 1:27基本の書き方を確認します。
  20. 1:29エイチツーは、開始タグと終了タグを両方書いて、その間に見出しの文章をはさみます。
  21. 1:35画面の例は記事のコード例と同じ形で、見出しの直後に段落を置いて、その章の説明を続けています。
  22. 1:43この教材では、開始タグと終了タグを省略せずに明示する書き方で統一します。
  23. 1:48置き場所はボディの中です。
  24. 1:50見出しの中には基本的に短いテキストを入れ、長い文章や別の見出しを入れ子にしないようにします。
  25. 1:58まずはこの形を正確に書けることが、すべての土台になります。
  26. 2:02短い見出しほど、読み手に内容が素早く伝わる傾向があります。
  27. 2:07書き方が安定すると、後の学習もぐっと楽になります。
  28. 2:11では、どんな場面で使うのでしょうか。
  29. 2:14代表的なのは、一つのページの中に大きな話題が複数あるときです。
  30. 2:20たとえば学習会の案内というページの中で、参加方法、当日の持ち物、よくある質問といった章に分ける使い方です。
  31. 2:29逆に、話題が一つだけで短いページなら、無理にエイチツーを何本も並べる必要はありません。
  32. 2:37記事も、見出しだけを読んでも文章の流れが分かる題名にすることを勧めています。
  33. 2:43使うかどうかは、ページ全体を章に分けられるかで判断してください。
  34. 2:49実際に使うかどうかは、文書の長さと、話題の分かれ方で判断してください。
  35. 2:55短い章なら無理に分ける必要はありません。
  36. 2:59記事の活用事例を読み解きます。
  37. 3:01例の中心は、エイチツーの見出しと、その説明を書いた段落の組み合わせです。
  38. 3:07ここではセクションの中でエイチツーを置き、一つの大きな話題を切り分けています。
  39. 3:14試すときは、練習用のエイチティーエムエルファイルをコピーし、ボディの適切な位置にこの形を写して、
  40. 3:19保存後に再読み込みします。
  41. 3:24そして開発者ツールのエレメンツで、見出しと段落が意図した構造になっているかを確認してください。
  42. 3:32見た目ではなく、構造が目的に合っているかを見るのがポイントです。
  43. 3:37写して終わりにせず、自分の文章に置き換えて試すと理解が深まります。
  44. 3:43構造を意識する習慣が身につきます。
  45. 3:46属性について確認します。
  46. 3:47エイチツーには、この要素だけのための専用属性で、必須となるものはありません。
  47. 3:53代わりに、どの要素にも使えるグローバル属性を、必要に応じて使います。
  48. 3:58代表は三つです。
  49. 4:00文書の中で重ならない識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
  50. 4:05そして内容の言語を示すラングです。
  51. 4:10画面のようにアイディーを付ければ、目次からその見出しへ直接リンクできます。
  52. 4:15注意として、独自データを入れるデータ属性には、秘密情報を置かないようにしてください。
  53. 4:22属性を付ける前に、その見出しへリンクや装飾が本当に必要かを考えましょう。
  54. 4:27付けすぎも管理を難しくします。
  55. 4:30見た目との関係を整理します。
  56. 4:31ブラウザーの初期設定では、エイチツーはエイチワンより少し小さく、エイチスリーより少し大きく表示されます。
  57. 4:39ここで大切なのは、文字をこのくらいの大きさにしたいからエイチツーを選ぶ、
  58. 4:42という発想にしないことです。
  59. 4:45記事も、文字の大きさはシーエスエスで調整し、見た目だけを理由に見出しの階層を飛ばさないよう注意しています。
  60. 4:53見出しのレベルは文書の意味と階層で決め、文字の大きさや色、余白はシーエスエスで調整します。
  61. 4:59画面のように専用のルールを書けば、階層を保ったまま整えられます。
  62. 5:03余白や太さも合わせると、階層がより伝わりやすくなります。
  63. 5:07読み手が迷わない見た目を目指しましょう。
  64. 5:10次に、階層を飛ばさないコツです。
  65. 5:12よくある失敗は、エイチワンの直後にいきなりエイチスリーを置いてしまうことです。
  66. 5:19見た目が程よい大きさでも、文書のアウトラインは途中で途切れ、読み手も検索エンジンも構造を追いにくくなります。
  67. 5:28音声読み上げなどの支援技術では、利用者が見出しを頼りにページ内を移動します。
  68. 5:34エイチツーが正しく章を示していれば、その移動もスムーズです。
  69. 5:40迷ったら見出しだけを抜き出して眺めてみるのがおすすめです。
  70. 5:44章の題名として自然に読めるかを確認してください。
  71. 5:48階層の点検は、公開前の短い作業で大きな効果があります。
  72. 5:53見出し一覧だけを見る習慣をつけましょう。
  73. 5:56ブラウザー互換性を確認します。
  74. 5:59記事が参照するエムディーエヌのデータでは、エイチツー要素は、クロームが一以降、
  75. 6:06エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、主要ブラウザーで非常に古くから対応しています。
  76. 6:14そのため、エイチツー自体が表示できない環境を心配する必要は、まずありません。
  77. 6:20ただし、これは要素本体の話です。
  78. 6:23新しい属性や機能を組み合わせる場合は、別途対応状況を確認してください。
  79. 6:28あわせて、アイオーエスやアンドロイドなど、利用対象の実機でも表示を試しておくと安心です。
  80. 6:35表示できることと、意図どおり読めることは別なので、本文の確認も欠かさないでください。
  81. 6:42安心して使える要素です。
  82. 6:44よくある間違いを三つ紹介します。
  83. 6:47一つ目は、本文の文章や注意書きのような、見出しではない文章までエイチツーで囲んでしまうことです。
  84. 6:56それは段落など、内容に合った要素で書きましょう。
  85. 7:00二つ目は、見た目を大きくしたいだけの理由でレベルを選ぶことです。
  86. 7:06これは前のセクションで触れたとおり、シーエスエスの担当です。
  87. 7:12三つ目は、中身のない空の見出しを残してしまうことです。
  88. 7:17空の見出しはアウトラインを乱します。
  89. 7:20書く前に、その文章が本当に章の題名かどうかを、一度立ち止まって確認してください。
  90. 7:28間違いに気づいたら、タグを置き換えるだけでなく階層全体を見直しましょう。
  91. 7:35少しの見直しで読みやすさが変わります。
  92. 7:38最後にまとめとチェックです。
  93. 7:40エイチツーは、六段階の見出しの二番目で、エイチワンの下で大きな章を分けるときに使う見出しです。
  94. 7:47専用の必須属性はなく、必要ならアイディーやクラスなどの共通属性を使います。
  95. 7:52公開前には、目的が第二階層を示すことに合っているか、階層を飛ばしていないか、
  96. 7:58三百二十ピクセル程度の狭い画面や文字拡大でも内容が欠けていないかを確認しましょう。
  97. 8:04自分のページで、大きな話題ごとに区切りたい場所があれば、ぜひエイチツーを正しく使ってみてください。
  98. 8:11お疲れさまでした。
  99. 8:12まずは手元のページの見出し一覧を書き出して点検してみてください。
  100. 8:16小さな確認の積み重ねが確かな土台になります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

h2タグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。h1 の下にある大きな章の見出しです。

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