SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

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

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