HTML でヘッダーを作る方法
ページの上部 (ロゴ、サイト名、メインメニュー) を <header> 要素で囲みます。初期の見た目がないブロックボックスなので、CSS を数行書けばバーになります。
ロゴに付けた margin-inline-end: auto が、メニューとボタンをバーの反対の端まで押しやります。<style> 要素を消してもヘッダーであることは変わりません。ヘッダーにしているのは暗い背景ではなくタグです。
header、head、h1 の違い
名前は似ていても役割の違う 3 つです。
| 要素 | 場所 | 表示されるか | 個数 |
|---|---|---|---|
<head> | <html> の直下、<body> の前 | されない。<title>、<meta>、<link> を入れる | ちょうど 1 つ |
<header> | <body> の中 | される。ページやセクションの導入部 | いくつでも |
<h1> から <h6> | <body> の中のどこでも | される。見出し | いくつでも |
下の <head> は、ブラウザがタブに表示するページのタイトルを設定しています。プレビューで見えるものは、すべて <body> から来ています。
ヘッダーには見出しが入っていることが多いですが、必須ではありません。また、見出しをヘッダーで囲む必要もありません。
記事の中のヘッダー
<header> はページだけでなく、いちばん近い記事やセクションの導入部にもなります。各記事が独自のヘッダーを持つブログ記事の一覧は、正しく、よくある書き方です。
スクリーンリーダーにとって banner ランドマークになるのは、ページの階層のヘッダー (article、aside、main、nav、section の中にないもの) だけです。記事のヘッダーは普通のグループなので、banner が複数になることはありません。
固定ヘッダー
position: sticky を使うと、その下の内容がスクロールしてもヘッダーは上部に留まります。下の箱の中をスクロールしてみてください。
動かすための細かい点が 3 つあります。top: 0 (位置の指定がないと sticky は何もしません)、背景色 (ないと行が透けて見えます)、そして配置された内容が上に描かれないようにする z-index です。実際のページではページ自体がスクロールする箱なので、ヘッダーは <body> の直下に置きます。
position: fixed のヘッダーも留まりますが、ページの流れから外れるので、内容がその下に潜り込み、上部に padding が必要になります。sticky ならレイアウト上の場所を保ちます。
ヘッダーに入れられるもの
ヘッダーには、見出し、ロゴの画像、<nav>、検索フォーム、ボタンなど、ほとんどの内容を入れられます。別の <header> や <footer> は入れられず、<footer>、<address>、別の <header> の中に置くこともできません。
<header>
<a href="/"><img src="logo.svg" alt="Acme home"></a>
<nav aria-label="Main">...</nav>
<form role="search">...</form>
</header>
ロゴがトップページへのリンクになっているときは、スクリーンリーダーが読み上げるのはその alt テキストなので、リンク先がわかるように書きましょう (「Acme home」)。
よくある間違い
<header>と<head>を混同する。 メタデータは<head>に入れ、見える内容は決して入れません。- すべての見出しに
<header>を使う。 見出しだけならヘッダーで囲む必要はありません。導入部の内容がまとまっているときに<header>を使いましょう。 - 背景のない固定ヘッダー。 ページのテキストがスクロールして透けて見えます。
backgroundを指定しましょう。 - 固定されない sticky。 祖先に
overflow: hiddenやoverflow: autoがあると、それが sticky のスクロールする箱になり、ヘッダーはその箱の中で固定されるか、まったく固定されません。祖先を確認しましょう。 - サイトのメニューをヘッダー内の
<div>に入れる。 スクリーンリーダーのユーザーが移動できるよう<nav>を使いましょう。
よくある質問
HTML の header タグとは何ですか？
<header> は導入部の内容のためのセマンティックな要素です。ページ上部のサイトのロゴとメニューや、記事の上部のタイトルと著者名を入れます。初期スタイルのない普通のブロックボックスです。
HTML の head と header の違いは何ですか？
<head> は <title>、<meta> タグ、スタイルシートへのリンクを入れる文書の見えない部分で、ちょうど 1 つだけあります。<header> は <body> の中にある見える内容で、1 ページに複数置けます。
1 ページに header 要素を複数置けますか？
置けます。ページには普通サイトのヘッダーが 1 つあり、各 <article> や <section> もタイトルやメタ情報のための独自の <header> を持てます。スクリーンリーダーにとってページの banner になるのは、article、aside、main、nav、section の中にないヘッダーだけです。
nav は header の中に入れるべきですか？
入れてもかまいません。メインメニューがページの上部にあるときは、よく中に入れます。<nav> を <header> の外に置くのも正しい書き方なので、レイアウトに合うほうを選びましょう。
スクロールしてもヘッダーを上部に固定するには？
position: sticky; top: 0; に加えて背景色と z-index を指定し、内容がその下をスクロールするようにします。sticky が効くのはヘッダーの親がヘッダーより高い間だけで、祖先に overflow: hidden があるとページに固定されなくなります。
