HTML、CSSでホームページのヘッダーの作り方を1から解説【参考コードあり】
ホームページ制作を始めたてのときにぶつかる壁として、ヘッダーの構築があります。
以下のような様々な疑問にぶつかることでしょう。
- ナビゲーションを横並びにするには？
- ロゴは左側、ナビゲーションは右側にするには？
- PCとスマホではナビゲーションの見た目が違うサイトがほとんどだけど、あれはどうやってるの？
- スマホは画面が小さいから、ナビゲーションを表示したり非表示したりしたい。あれはどいう仕組み？
- スクロールしてもついてくるヘッダー（追従ヘッダー）ってどうやって作るの？
今回はそういった疑問を解消してヘッダーを作れるように、細かく丁寧にヘッダーの作り方を解説しました。
参考にしてくれると幸いです。
※今回はPC編です。スマホのヘッダー制作はまた別の記事で書きます。
まずは完成したものを見る
ヘッダーを構築するにあたって、「こういうものを作りたいんだ！」というイメージをしやすくするために、先に完成図を見せます。
ある程度の知識がありすぐにコードを知りたい方は、Chromeなどのデベロッパーツールなどで、実際のコードがどうなっているか確認してもOKです。
もちろんこれは自分なりにアレンジしてもらってOKなので、完璧にこれ通りに作る必要はありません！
ベースになるファイルとテキストエディタを用意
完成図を確認したところで、ベースになるファイルを以下からダウンロードしてください。このファイルはまだ最低限のコードしか書かれていません。
zipファイルになっているので展開してください。
また、コードを書くためのテキストエディタも用意してください。おすすめのテキストエディタはVSCodeです。
ベースファイルとテキストエディタが揃ったところで、準備が完了です！
ヘッダー制作PC編
さきほどダウンロードしたheader-create.zipのindex.htmlの中身をエディタで見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title>ヘッダー制作</title>
</head>
<body>
<header>
ヘッダー //今回はここを作る
</header>
<main>
メインコンテンツ
</main>
<footer>
フッター
</footer>
</body>
</html>
超シンプルですね。これをブラウザで表示するとどうなるか…
・ブラウザ画面
まだ何も触っていないので当たり前ですね。今回はこのファイルのヘッダー部分を構築していきます。そのためにまず、CSSファイルを読み込みましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title>ヘッダー制作</title>
<link href="assets/css/reset.css"> //リセットCSSを読み込み
<link href="assets/css/style.css"> //メインのCSSを読み込み
</head>
<body>
<header>
ヘッダー //今回はここを作る
</header>
<main>
メインコンテンツ
</main>
<footer>
フッター
</footer>
</body>
</html>
HTMLで骨組みを作る
headタグの準備が終わったところで、まずはHTMLでヘッダーの骨組みを作っていきましょう。
今回、コンテンツの最大幅を1040pxとします。
ブラウザの横幅いっぱいのコンテンツにしてしまうと、例えばiMacなどの大画面で見た場合に横に広がり過ぎて非常に見づらいページになってしまいます。
なので、コンテンツの最大幅はあらかじめ決めておきましょう。
また、クラス名もあらかじめ決めておくと、あとでCSSの調整が楽になります。
決め方は自由ですが、自分の中でルールを決め、後から見返しても分かるように命名しましょう。
<header>
<div class="header-inner">
//ここを1040px幅のコンテンツとし、あとでCSSで調整する
</div>
</header>
次に、ロゴ＋タイトルを入れます。トップページのタイトルにはh1タグが使われることが多いです。h1タグは基本的に1ページに1つにし、1番主張したい箇所に記述します。
ロゴについては、assets/img/header-logo.pngを利用してください。
<header>
<div class="header-inner">
<h1 class="header-logo"> // h1タグ
<img class="header-logoImg" src="assets/img/header-logo.png"> // ロゴ
<span class="header-logoTtl">My HomePage</span> // タイトル
</h1>
</div>
</header>
最後に、ナビゲーションを用意します。
HTML5ではnavというタグがあるのでそれを使いましょう。また、ナビゲーションはリスト構造にするようにしましょう。
<header>
<div class="header-inner">
<h1 class="header-logo"> // h1タグ
<img class="header-logoImg" src="assets/img/header-logo.png"> // ロゴ
<span class="header-logoTtl">My HomePage</span> // タイトル
</h1>
<nav class="header-nav"> // ナビゲーションを設置
<ul class="header-navList"> // メニューをリスト構造にする
<li>
<a href="#">MENU1</a> // リンクのためのaタグも忘れずに！
</li>
<li>
<a href="#">MENU2</a>
</li>
<li>
<a href="#">MENU3</a>
</li>
<li>
<a href="#">MENU4</a>
</li>
<li>
<a href="#">MENU5</a>
</li>
</ul>
</nav>
</div>
</header>
これでHTMLの準備は完了です。
構造の決め方やクラスの命名の仕方などは、勉強していくうちに身についていくので、今は気にせず、まずはコードを自分で書いていくところから始めましょう。
ではここまで作ったものをブラウザで見てみましょう。
もちろん、CSSを書いていないのでこんな表示になるのは当たり前ですが…
よく見るとロゴが表示されていませんね？しかも左上に謎の空白が…と思ったかもしれませんが安心してください。
今回作るヘッダーは、黒背景に白いロゴ、白い文字で構成されますよね。
つまり、用意された画像は白い画像なので、白い背景と色が一致して見えなくなったというわけですね。
開発ツールを使って確認する癖をつける
このように、「あれ？想定と違うぞ？」と思うことが出てきたときは開発ツールを使って要素を確認してみましょう。
先ほどのindex.htmlをもう一度開いて、「F12を押す」もしくは右クリックのメニューで「検証」を押してください。すると以下の画面が出ます。（今回はGoogle Chromeの例です）
すると、htmlがズラッと表示されたかと思います。この中を見ると先ほどのロゴ画像もしっかりあるのが確認できますね。
ここでは開発ツールの使い方は割愛しますが、ホームページ制作では必須のツールなので、ぜひ使い方を調べて活用してください。
CSSで装飾
次にCSSで装飾をしていきましょう。
HTMLが骨組みなら、CSSは肉付けのようなイメージです。style.cssをエディタで開いてください。
以下のようにコメントを付けながらCSSを書いていくと、後で見やすくなります。参考にしてみてください。
@charset "utf-8"; // 文字コードの設定
/*――――――――――――――――――――――――――――――――――
/* 共通CSS
――――――――――――――――――――――――――――――――――――*/
ここに全ページ共通のCSS
/*――――――――――――――――――――――――――――――――――
/* ヘッダー
――――――――――――――――――――――――――――――――――――*/
ヘッダーのCSS
/*――――――――――――――――――――――――――――――――――
/* フッター
――――――――――――――――――――――――――――――――――――*/
フッターのCSS
/*――――――――――――――――――――――――――――――――――
/* メインコンテンツ
――――――――――――――――――――――――――――――――――――*/
メインコンテンツのCSS
今回は、ヘッダーのみなので、その他の要素は一旦排除して進めます。
では、次のことを実現してみましょう。
- ヘッダーの背景を黒、ヘッダーで使う文字を白にする
- コンテンツの最大幅を1040pxにする
- 1040pxにしたコンテンツを中央寄せにする
コメントを参考に、自分でコードを書いていってください。
また、分からないことは都度調べる癖を付けましょう！今の時代、調べられないことは無いほど情報があるので、調べる能力も身に付けておくと後から楽になります。
@charset "utf-8"; // 文字コードの設定
/*――――――――――――――――――――――――――――――――――
/* ヘッダー
――――――――――――――――――――――――――――――――――――*/
header {
background-color: #333; /* ヘッダーの背景を黒にする */
color: #fff; /* ヘッダーの文字を白にする */
}
.header-inner {
max-width: 1040px; /* コンテンツの最大幅を1040pxにする */
width: 100%; /* 最大幅を保つ(ただし最大幅は1040px) */
margin: 0 auto; /* 1040pxにした要素を中央寄せにする */
}
ここまでで以下のようになっていれば成功です。
flex-boxを使い、アイテムを横並びにする
続いては、タイトルロゴとナビゲーションを横並びにし、左右に配置するようにしてみましょう。
@charset "utf-8"; // 文字コードの設定
/*―――――――――――――――――――――――――――――――――――――――――――――
/* ヘッダー
――――――――――――――――――――――――――――――――――――――――――――――*/
header {
background-color: #333;
color: #fff;
}
.header-inner {
display: flex; /* 子要素を横並びにする */
justify-content: space-between; /* 各アイテムを均等に配置し
最初のアイテムは先頭に寄せ、
最後のアイテムは末尾に寄せる */
align-items: center; /* 子要素を上下中央に配置する */
max-width: 1040px;
width: 100%;
margin: 0 auto;
}
以下のようになっていれば成功です。
今回新たに登場したプロパティは、以下の3つです。
.header-inner {
display: flex; /* 子要素を横並びにする */
justify-content: space-between; /* 各アイテムを均等に配置し
最初のアイテムは先頭に寄せ、
最後のアイテムは末尾に寄せる */
align-items: center; /* 子要素を上下中央に配置する */
}
このプロパティはflex-boxと言って、横並びや、上下左右の配置に非常に役に立ちます。コーディングをする際には欠かせないプロパティなので、必ず押さえておいてください！
以下のサイトが参考になるので、勉強して色々試してみてください。
https://www.webcreatorbox.com/tech/flexbox
flex-boxは子要素（直下の要素）にしか影響しない
flex-boxは、子要素（直下の要素）にしか影響しません。（超重要）
なので今回、.header-innerに対しdisplay: flex;を指定しているので、その孫にあたる要素は横並びにならないのです。
じゃあ、「ロゴとテキスト」「ナビゲーションの中身」を横並びにするにはどうすればいいか？というと、
横並びにしたい要素の親要素にdisplay: flex;を付与してあげればOKです。実際のコードが以下です。
@charset "utf-8"; // 文字コードの設定
/*―――――――――――――――――――――――――――――――――――――――――――――
/* ヘッダー
――――――――――――――――――――――――――――――――――――――――――――――*/
header {
background-color: #333;
color: #fff;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1040px;
width: 100%;
margin: 0 auto;
}
.header-logo {
display: flex; /* 子要素を横並びにする */
align-items: center; /* 子要素を上下中央に配置する */
}
.header-navList {
display: flex; /* 子要素を横並びにする */
align-items: center; /* 子要素を上下中央に配置する */
}
以下のようになっていれば成功です。
これでだいぶ完成系に近づいてきましたね！
最後に、余白、文字などの細かい点の調整
あとは、以下を調整して完成系に近づけましょう。できる限り自力で構築してみてください。
- ヘッダー全体の余白、個々の要素の余白の調整
- 文字サイズ、文字の太さの調整
- ロゴ画像の大きさの調整
@charset "utf-8"; // 文字コードの設定
/*―――――――――――――――――――――――――――――――――――――――――――――
/* ヘッダー
――――――――――――――――――――――――――――――――――――――――――――――*/
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1040px;
width: 100%;
margin: 0 auto;
}
.header-logo {
display: flex;
align-items: center;
}
.header-logoImg {
display: block; /* 扱いやすいようにblock要素にする */
width: 46px; /* 横幅を任意の大きさに調整 */
margin-right: 10px; /* 画像とタイトルを少し離す */
}
.header-logoTtl {
font-size: 24px; /* 任意のフォントサイズにする */
font-weight: bold; /* 太字にする */
}
.header-navList {
display: flex;
align-items: center;
}
.header-navList li {
margin: 0 20px /* ナビゲーションに左右のスペースを付ける */
}
.header-navList li a {
display: block; /* 扱いやすいようにblock要素にする */
font-size: 16px; /* 任意のフォントサイズにする */
font-weight: bold; /* 太字にする */
}
.header-navList li a:hover {
opacity: 0.8; /* ホバーしたときに少し薄くなるようにアニメーションを付ける */
}
これで完成です！
かなりヘッダーらしくなったのではないでしょうか。
プロパティの細かい説明は省きましたが、流れとしてはある程度掴めたかと思います。実現したいデザインが決まれば、
- まずは自分なりに構築してみる
- 上手く行かないところは調べる
- 調べたものを試す
これを繰り返し、自分なりにアレンジしていってみてください。
追従ヘッダーにするには「position: fixed」
よくある追従ヘッダーを実現したい場合は、headerにposition: fixed;プロパティを追加してください。
@charset "utf-8"; // 文字コードの設定
/*―――――――――――――――――――――――――――――――――――――――――――――
/* 共通CSS
――――――――――――――――――――――――――――――――――――――――――――――*/
body {
padding-top: 66px;
}
/*―――――――――――――――――――――――――――――――――――――――――――――
/* ヘッダー
――――――――――――――――――――――――――――――――――――――――――――――*/
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
position: fixed; /* 要素を画面内で固定する */
top: 0; /* 固定する基準を一番上に */
left: 0; /* 固定する基準を一番左に */
z-index: 100; /* 要素の重なりを指定 */
width: 100%; /* 固定した要素は浮いた状態になるので、横幅100%にする */
}
これでスクロールしてもヘッダーがついてくるようになります。
ただし、 position: fixed;で固定した要素は、浮いている状態になるので、他の要素が下に隠れてしまいます。
なので、ヘッダーの高さ分、bodyタグにpadding-topを付けるなどの対策をしておきましょう。
ちなみにz-indexは、数値が高いほど浮いた要素が上に来るので（厳密には違いますが）、ヘッダーを浮かせたい場合は出来る限り大きい数値を設定しましょう。
おわりに
ホームページに必ずと言っていいほどあるヘッダーですが、案外自力で作ろうとすると難しいものです。
もし、何かしらの知見を得てくれたら幸いです！特にflexboxは本当に万能なので覚えてほしいです。
あと、本当はスマホのヘッダー制作も1記事にまとめようとしましたが、量が多すぎるので、分けることにしました。
次回は、スマホのヘッダーメニューの作り方を解説しようかと思います。
それではまた～。
