Webサイトの上部にロゴやメニューを置きたいものの、「どのHTMLタグを使う？」「横並びやスマホ表示はどう作る？」と迷っていませんか。ヘッダーは多くのページで共通して使うため、最初に基本の型を理解しておくと便利です。
基本的なヘッダーは、header要素の中へロゴ、nav要素、メニューリンクを置き、CSSのFlexboxで横並びにすると作れます。スマートフォンではメニューボタンを表示し、JavaScriptで開閉します。
この記事では、変更前の状態からHTML・CSS・JavaScriptを順番に追加し、パソコンとスマートフォンに対応したヘッダーを作ります。各コードの役割や、表示されないときの確認方法も初心者向けに解説します。
HTMLのheader要素とはページ上部の導入部分
header要素は、ページや記事の導入部分を表します。サイト全体のヘッダーでは、ロゴ、サイト名、主要メニュー、お問い合わせリンクなどを配置するのが一般的です。
headerは、HTML文書の設定を書くhead要素とは別物です。headはブラウザへ直接表示されない設定領域で、headerはbodyの中に書く表示領域です。
| 要素 | 書く場所 | 主な役割 |
|---|---|---|
head | html要素の中、bodyより前 | 文字コード、ページタイトル、CSSの読み込みなどを設定する |
header | body要素の中 | ロゴ、見出し、ナビゲーションなど導入部分を表示する |
nav | headerなどの中 | 主要なページへ移動するリンク群を表す |
header要素はページ全体だけでなく、article要素の見出し部分にも使えます。この記事では、すべてのページで共通表示するサイトヘッダーを作ります。
作成するレスポンシブヘッダーの構成
今回の完成形には、サイト名、3つのメニュー、お問い合わせリンクを配置します。パソコンでは横一列に並べ、画面が狭いときはメニューボタンからリンク一覧を開く構成です。
- サイト名はトップページへのリンクにする
- 主要なページを
nav要素へまとめる - 現在地や操作目的が分かるリンク文字を使う
- スマートフォンでは十分なタップ領域を確保する
- キーボードでもメニューを開閉できるようにする
メニュー部分だけを詳しく作りたい場合は、次の記事も参考にしてください。
変更前のHTMLを確認する
最初は、ページ本文だけがある状態です。次のコードをindex.htmlとして保存し、同じフォルダーへstyle.cssとscript.jsを作ります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルサイト</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<main>
<h1>ページの内容</h1>
</main>
</body>
</html>この状態ではヘッダーがなく、本文の見出しだけが表示されます。次に、bodyの開始タグ直後へヘッダーを追加します。
header・navタグでHTMLを書く
ロゴとメニューボタン、ナビゲーションをheader要素へまとめます。リンクの並びにはulとliを使い、項目の集まりであることを表します。
<header class="site-header">
<div class="header-inner">
<a class="site-logo" href="/">SAMPLE SITE</a>
<button
class="menu-button"
type="button"
aria-controls="global-nav"
aria-expanded="false"
aria-label="メニューを開く"
>
<span></span>
<span></span>
<span></span>
</button>
<nav id="global-nav" class="global-nav" aria-label="メインメニュー">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/services/">サービス</a></li>
<li><a href="/company/">会社情報</a></li>
<li><a class="contact-link" href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>aria-label="メインメニュー"は、このnav要素の目的を支援技術へ伝えます。メニューボタンのaria-controlsは操作対象、aria-expandedは開閉状態を表します。
リンク先が未定でも、href=""のまま公開すると現在のページを再読み込みする場合があります。練習後は、各ページの正しいURLへ変更してください。
CSSでパソコン向けヘッダーを横並びにする
最初に、余白の計算をそろえる設定と、パソコン向けの基本スタイルを書きます。ヘッダーの高さを固定せず、リンクの内側の余白で必要な高さを作ります。
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #17223b;
font-family: system-ui, sans-serif;
}
.site-header {
background: #ffffff;
border-bottom: 1px solid #dbe4f0;
box-shadow: 0 4px 16px rgb(15 23 42 / 8%);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: min(100% - 32px, 1120px);
margin-inline: auto;
min-height: 80px;
}
.site-logo {
color: #173b8f;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: 0.04em;
text-decoration: none;
}
.global-nav ul {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.global-nav a {
display: block;
padding: 12px 16px;
color: #17223b;
font-weight: 700;
text-decoration: none;
border-radius: 8px;
}
.global-nav a:hover,
.global-nav a:focus-visible {
background: #eef4ff;
}
.global-nav .contact-link {
color: #ffffff;
background: #e84f3d;
}
.global-nav .contact-link:hover,
.global-nav .contact-link:focus-visible {
background: #c93f30;
}
.menu-button {
display: none;
}.header-innerへdisplay: flexを指定し、ロゴとナビゲーションを横並びにしました。justify-content: space-betweenで左右へ分け、align-items: centerで縦位置をそろえます。
width: min(100% - 32px, 1120px)により、狭い画面では左右16pxの余白を残し、広い画面でも内容幅が1120pxを超えません。リンクには上下左右のpaddingを付け、クリックしやすい範囲を確保しています。
スマートフォンでメニューを開閉する
画面が狭いと横並びのリンクが収まらないため、768px以下でメニューボタンを表示します。メニューはヘッダーの下へ縦に並べます。
@media (max-width: 48rem) {
.header-inner {
position: relative;
min-height: 64px;
}
.menu-button {
display: grid;
width: 44px;
height: 44px;
padding: 10px;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
place-content: center;
gap: 5px;
}
.menu-button span {
display: block;
width: 22px;
height: 2px;
background: #173b8f;
}
.global-nav {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
background: #ffffff;
border: 1px solid #dbe4f0;
box-shadow: 0 12px 24px rgb(15 23 42 / 12%);
}
.global-nav.is-open {
display: block;
}
.global-nav ul {
display: block;
}
.global-nav a {
padding: 16px 20px;
border-radius: 0;
}
}.global-navはスマートフォン幅で非表示にし、is-openクラスが付いたときだけ表示します。ボタンは44px四方にして、指でも押しやすい範囲を作りました。
次に、ボタンを押したときにクラスとアクセシビリティ属性を切り替えるJavaScriptをscript.jsへ書きます。
const menuButton = document.querySelector(".menu-button");
const globalNav = document.querySelector(".global-nav");
menuButton.addEventListener("click", () => {
const isOpen = globalNav.classList.toggle("is-open");
menuButton.setAttribute("aria-expanded", String(isOpen));
menuButton.setAttribute(
"aria-label",
isOpen ? "メニューを閉じる" : "メニューを開く"
);
});classList.toggle()は、is-openクラスを付け外しし、変更後の状態を真偽値で返します。その値に合わせてaria-expandedとボタンの説明も更新します。
完成したヘッダーの表示を確認する
ブラウザ幅を広げると、ロゴ、メニュー、お問い合わせリンクが横一列に表示されます。幅を768px以下へ狭めるとメニューボタンへ切り替わり、クリックするとリンク一覧が開きます。
マウスだけでなくTabキーでボタンへ移動し、EnterキーやSpaceキーでも開閉できることを確認してください。リンクへフォーカスが移動したとき、現在位置が見えることも大切です。
ページ全体のスマートフォン対応を学びたい場合は、次の記事でviewport、柔軟な幅、メディアクエリの順に確認できます。
ヘッダーを設計するときのポイント
主要なリンクだけを置く
すべてのページをヘッダーへ並べると、重要なリンクが分かりにくくなります。利用者が頻繁に移動するページへ絞り、詳細なリンクはフッターや各ページ内へ置きます。
ロゴからトップページへ戻れるようにする
多くの利用者は、ヘッダーのロゴを押すとトップページへ戻れると予想します。画像ロゴを使う場合は、サイト名が伝わるalt属性も設定してください。
リンクとボタンを目的で使い分ける
別のページへ移動する項目はa要素、メニューの開閉などページ内の状態を変える操作はbutton要素を使います。見た目が同じでも、役割に合う要素を選びましょう。
固定表示は必要性を確認してから使う
スクロール中もヘッダーを表示する固定ヘッダーは移動しやすい一方、画面の表示領域を狭くします。特にスマートフォンでは高さを抑え、ページ内リンクの見出しを隠さない調整が必要です。
固定表示を追加する場合は、基本のヘッダーを完成させてから次の記事の手順で設定してください。
ヘッダーが崩れるときの確認方法
メニューが横並びにならない
display: flexをliではなく、その親要素であるulへ指定しているか確認します。CSSのセレクターがHTMLのclass名と一致しているかも見直してください。
ヘッダーの左右に不要な余白が出る
ブラウザはbodyへ初期の余白を付ける場合があります。今回のCSSではbody { margin: 0; }で取り除き、ヘッダー内の余白は.header-innerで管理しています。
メニューボタンを押しても開かない
script.jsのファイル名と読み込み場所を確認します。script要素にdeferがあるか、HTMLのmenu-buttonとglobal-navがJavaScriptのセレクターと一致しているかも確認してください。
スマートフォンで横スクロールが出る
固定幅、長い英単語、画像などが画面幅を超えている可能性があります。ヘッダーだけでなくページ全体を確認し、ブラウザ幅を少しずつ狭めて、どの要素からはみ出すかを特定しましょう。
HTMLヘッダーに関するよくある質問
headerタグはページに1つだけですか？
header要素はページ内に複数置けます。ページ全体のヘッダーのほか、article要素のタイトルや投稿日をまとめる導入部分にも使えます。
ヘッダー画像は必要ですか？
必須ではありません。ロゴとナビゲーションだけのシンプルなヘッダーでも、サイトの目的と移動先が分かれば機能します。大きな画像を使う場合は、表示速度やスマートフォンでの見え方も確認してください。
CSSだけでスマホメニューを作れますか？
リンクを常に縦並びで表示する構成ならCSSだけで対応できます。ボタンで開閉するメニューは状態管理が必要なため、今回のようにJavaScriptを使うと、ボタンの状態も明確に更新できます。
まとめ
基本的なサイトヘッダーは、header要素へロゴとnav要素を置き、Flexboxで横並びにすると作れます。スマートフォンではメディアクエリでメニューボタンへ切り替え、JavaScriptで開閉状態を管理します。
まずは完成コードをそのまま表示し、ロゴ名、リンク先、色を自分のサイトへ合わせて変更してみてください。パソコンとスマートフォン、マウスとキーボードの両方で操作を確認すれば、実用的なヘッダーへ近づきます。