SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04エイチティーエムエルタグ編の六十八本目は、ヘッダー、タグです。
  4. 0:08このタグは、ページや記事の導入部分をまとめるための要素です。
  5. 0:13たとえば、サイトを開いたときに一番上に見える、ロゴ、サイト名、メニューといった並びを思い浮かべてください。
  6. 0:20それらを、これは導入のまとまりですよ、と意味づけて囲むのがヘッダーの役割です。
  7. 0:26文章を読む前の案内役であり、読み手が今どこにいるのかを最初に伝える場所でもあります。
  8. 0:32見た目を飾るためだけの箱ではない、という点を最初に押さえておきましょう。
  9. 0:37サイトの第一印象は、この導入部分で決まることが多いので、丁寧に作る価値があります。
  10. 0:43基本の書き方を確認します。
  11. 0:45ヘッダーは、開始タグと終了タグを両方書く、普通の入れ物型の要素です。
  12. 0:50書き方はシンプルで、導入として見せたい要素をそのまま中に入れます。
  13. 0:55画面の例では、サイト名をエイチワンで書き、その下に短い説明をピーで添えています。
  14. 1:01ロゴの画像やナビゲーションを一緒に入れることもよくあります。
  15. 1:06ポイントは、上に置いたからヘッダーなのではなく、導入という意味があるまとまりを囲んだときにヘッダーになる、
  16. 1:10ということです。
  17. 1:15まずはこの最小の形から覚えましょう。
  18. 1:18閉じタグの書き忘れにも注意してください。
  19. 1:21中に入れられるものを整理します。
  20. 1:23ヘッダーの中には、見出しやエイチグループ、ロゴの画像、サイト名、キャッチコピーなど、
  21. 1:28導入に関わる内容を幅広く入れられます。
  22. 1:33画面の例のように、主な案内へのナブを一緒に入れる書き方はとても一般的です。
  23. 1:39検索フォームを置くサイトも多くあります。
  24. 1:42反対に、本文の中心となる長い文章や、記事そのものはヘッダーには入れません。
  25. 1:48導入は導入、本文はメイン、と役割で分けると構造がすっきりします。
  26. 1:54何を入れるか迷ったら、それが読み始める前の案内かどうかで判断してみてください。
  27. 2:00ヘッダーの便利な点は、置く場所によって役割が切り替わることです。
  28. 2:05ボディの直下に置けば、サイト全体に共通する導入になります。
  29. 2:09一方で、アーティクルの中に置けば、その記事だけの導入になります。
  30. 2:13記事のヘッダーには、タイトル、日付、著者名などをまとめるのが定番です。
  31. 2:19そのため、ひとつのページの中にヘッダーが複数あっても間違いではありません。
  32. 2:24ページ全体の顔と、記事ごとの顔を、それぞれ分けて用意するイメージです。
  33. 2:29どの範囲の導入なのかを考えて置き場所を決めることが大切です。
  34. 2:33ブログのように記事が並ぶページでは、記事ごとに小さなヘッダーがあると考えると分かりやすいでしょう。
  35. 2:41初心者がつまずきやすい、ヘッドタグとの違いを整理します。
  36. 2:45名前はとても似ていますが、役割は正反対です。
  37. 2:48ヘッドは、タイトル要素やシーエスエスの読み込みなど、画面には直接表示されない設定情報を入れる場所です。
  38. 2:55一方、ヘッダーは画面に実際に見える導入部分をまとめる要素で、ボディの中に書きます。
  39. 3:01試しに読み比べてみてください。
  40. 3:03ヘッドはエイチ、イー、エー、ディー。
  41. 3:06ヘッダーはそこにイー、アールが付きます。
  42. 3:08この違いを意識するだけで、置き場所の間違いはぐっと減ります。
  43. 3:13迷ったら、画面に見えるかどうかで判断しましょう。
  44. 3:16属性について確認します。
  45. 3:18ヘッダーには、この要素だけの専用の属性はありません。
  46. 3:22覚えるべき必須の属性もないので、気楽に使えるタグです。
  47. 3:26必要に応じて、どの要素にも使える共通の属性を使います。
  48. 3:30たとえばクラスは、シーエスエスでサイト共通のヘッダーをまとめて整えるときの目印になります。
  49. 3:37アイディーはページの先頭へ戻るリンクの飛び先に使えます。
  50. 3:41ただし、属性を付けても要素の意味自体は変わりません。
  51. 3:45色を付けたい、横並びにしたい、といった見た目の調整は、属性ではなくシーエスエスで指定しましょう。
  52. 3:52データ属性に秘密情報を置かない点も、あわせて覚えておいてください。
  53. 3:57記事の活用事例を読み解きます。
  54. 3:59記事の例では、まなびのアトリエ、というサイト名のピーと、教材へのリンクを持つナブを、
  55. 4:04ヘッダーで囲んでいます。
  56. 4:08もしこの二つがバラバラに置かれていると、ただの段落とリンクの集まりにしか見えません。
  57. 4:15ヘッダーで囲むことで、これはサイト共通の導入です、とはっきり示せるのです。
  58. 4:21ナブに付けられた、アリアラベル、主な案内、という指定もポイントです。
  59. 4:27案内が複数あるページでも、どれが主な案内なのかを支援技術に伝えられます。
  60. 4:33試すときは練習用ファイルのボディに貼り付け、保存して再読み込みし、開発者ツールのエレメンツで入れ子を確認してください。
  61. 4:43使う場面を広げて考えてみましょう。
  62. 4:45最も代表的なのは、サイトの先頭で、ロゴ、サイト名、メインメニュー、検索をまとめる場面です。
  63. 4:53どのページを開いても同じヘッダーが現れることで、読み手は迷わずに移動できます。
  64. 4:59もうひとつは、記事の先頭で、タイトル、日付、著者をまとめる場面です。
  65. 5:05セクションの導入部分に応用することもできます。
  66. 5:09画面の例では、検索フォームをヘッダーの中に置いています。
  67. 5:13逆に、導入とは言えない内容まで何でも詰め込む場所ではありません。
  68. 5:19本文はメインに任せ、ヘッダーは案内に徹するのが上手な使い方です。
  69. 5:24導入が整っているサイトは、初めて訪れた人でも目的の情報へたどり着きやすくなります。
  70. 5:31見た目はシーエスエスで整えます。
  71. 5:33ここで大切な注意があります。
  72. 5:35ヘッダーを置いただけでは、画面の上に固定表示にはなりません。
  73. 5:40位置や余白、固定するかどうかは、すべてシーエスエスの指定で決まります。
  74. 5:45画面の例では、フレックスでロゴとメニューを左右に分け、ポジション、スティッキーで上端に留まるようにしています。
  75. 5:53スクロールしても付いてくるヘッダーが欲しいときは、このようにシーエスエスで明示します。
  76. 6:00役割分担はいつも同じです。
  77. 6:02導入であるという意味はエイチティーエムエルが持ち、並び方や色や動きはシーエスエスが持ちます。
  78. 6:08デザインを変えても構造に手を入れずに済むのが利点です。
  79. 6:12ブラウザー互換性を確認します。
  80. 6:14記事が参照するエムディーエヌのデータでは、ヘッダー要素は、クロームが五以降、
  81. 6:20エッジが十二以降、ファイアフォックスが四以降、サファリが五以降と、主要ブラウザーで長く対応しています。
  82. 6:26そのため、表示できない環境を心配する必要はほとんどありません。
  83. 6:30仕上げのチェックもしておきましょう。
  84. 6:32目的がサイト共通の導入をまとめることに合っているか、三百二十ピクセル程度の狭い画面や文字拡大でも、
  85. 6:37ロゴやメニューが欠けていないかを確認します。
  86. 6:41対応が広い分、このタグでは、使えるかどうかよりも、正しい意味で使えているかに集中できるのが利点です。
  87. 6:48最後に、よくある間違いとまとめです。
  88. 6:51間違いの代表は三つです。
  89. 6:53一つ目は、ヘッドとヘッダーを取り違えること。
  90. 6:56二つ目は、ヘッダーを置けば自動で上に固定されると思うこと。
  91. 7:01固定はシーエスエスの役割でした。
  92. 7:03三つ目は、意味を考えず、ただのレイアウト用の箱として使うことです。
  93. 7:09あわせて、ヘッダーの中にフッターや別のヘッダーを入れる入れ子は避けてください。
  94. 7:15まとめます。
  95. 7:16ヘッダーは、ページや記事の導入部分を示す要素です。
  96. 7:20ロゴ、タイトル、案内を意味で囲み、見た目はシーエスエスに任せます。
  97. 7:25練習として、自分のページの先頭部分をヘッダーで囲んでみてください。
  98. 7:30お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

headerタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。ページや記事の導入部分。ロゴ、タイトル、案内などをまとめます。

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