SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

h1タグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。最上位の見出し。この教材ではページタイトルに1つ使います。

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