はじめに
前回の記事では、写真ACの素材を使ってヒーローエリア・横並びセクション・カードグリッドの3つのレイアウトを組み上げました。今回はその index.html と style.css に手を加え、ヘッダーナビゲーションとフッターを追加します。これで「上から下まで」揃った、本格的なWebサイトの骨格が完成します。
1. ヘッダーナビゲーションを追加する
1.1 前回のコードへの追記箇所
前回完成した index.html の <body> の一番上に <header> タグを追加します。既存のヒーロー・セクション・カードのコードはそのまま残して、その上に差し込むだけでOKです。
<body>
<!– ① ここを新しく追加 –>
<header class=”site-header”>
<div class=”logo”>MySite</div>
<nav class=”nav-links”>
<a href=”#hero”>ホーム</a>
<a href=”#about”>About</a>
<a href=”#cards”>Works</a>
</nav>
<button class=”hamburger” id=”hamBtn”>
<span></span><span></span><span></span>
</button>
</header>
<div class=”drawer” id=”drawer”>
<a href=”#hero”>ホーム</a>
<a href=”#about”>About</a>
<a href=”#cards”>Works</a>
</div>
<!– ② 前回から引き継ぎ –>
<div class=”hero” id=”hero”>…</div>
<section class=”about” id=”about”>…</section>
<div class=”cards” id=”cards”>…</div>
</body>
1.2 ナビゲーションのCSS
style.css の末尾に以下を追記します。PC版は横並び、スマホ版はハンバーガーボタンを表示してドロワーメニューを出し入れする構成です。
/* ヘッダー全体 */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
height: 60px;
background: #0d1b2a;
position: sticky; /* スクロールしても固定 */
top: 0;
z-index: 100;
}
.nav-links a {
color: #ccc;
text-decoration: none;
margin-left: 1.5rem;
transition: color 0.2s;
}
.nav-links a:hover { color: #4ba3e2; }
/* ハンバーガー：PCでは非表示 */
.hamburger { display: none; }
.drawer { display: none; }
.drawer.open { display: flex; flex-direction: column; }
@media (max-width: 640px) {
.nav-links { display: none; }
.hamburger { display: flex; }
}
1.3 ハンバーガーメニューのJavaScript
index.html の </body> の直前に追記します。第二・三弾で学んだ classList.toggle() のパターンをそのまま使います。
<script>
const hamBtn = document.getElementById(‘hamBtn’);
const drawer = document.getElementById(‘drawer’);
hamBtn.addEventListener(‘click’, () => {
drawer.classList.toggle(‘open’);
hamBtn.classList.toggle(‘active’); // ×アイコンに切り替え
});
// メニュー内リンクをクリックしたら閉じる
drawer.querySelectorAll(‘a’).forEach(a => {
a.addEventListener(‘click’, () => {
drawer.classList.remove(‘open’);
hamBtn.classList.remove(‘active’);
});
});
</script>
💡 position: sticky でナビを固定：position: sticky; top: 0; をヘッダーに指定すると、スクロールしても画面上部にナビが張り付いたままになります。z-index: 100 も一緒に指定しておかないと、画像などのコンテンツがナビの上に重なってしまうので注意しましょう。
2. フッターを追加する
2.1 フッターのHTML
フッターは </body> の直前、つまり前回のカードグリッドの下に <footer> タグで追加します。3列のリンクカラムとコピーライト表記を組み合わせた、よくある構成です。
<!– 前回のカードの下に追加 –>
<footer class=”site-footer”>
<div class=”footer-inner”>
<div class=”footer-col”>
<h4>MySite</h4>
<p>Webサイトの紹介文をここに書きます。</p>
</div>
<div class=”footer-col”>
<h4>メニュー</h4>
<a href=”#hero”>ホーム</a>
<a href=”#about”>About</a>
<a href=”#cards”>Works</a>
</div>
<div class=”footer-col”>
<h4>お問い合わせ</h4>
<a href=”mailto:info@example.com”>メールを送る</a>
</div>
</div>
<p class=”copyright”>© 2025 MySite</p>
</footer>
2.2 フッターのCSS
フッターも style.css の末尾に追記します。ナビと同様にFlexboxで3列を並べ、スマホでは縦積みに切り替えます。
.site-footer {
background: #0d1b2a;
color: #aaa;
padding: 3rem 2rem 1.5rem;
margin-top: 4rem;
}
.footer-inner {
display: flex;
gap: 2rem;
margin-bottom: 2rem;
}
.footer-col { flex: 1; }
.footer-col h4 { color: #4ba3e2; margin-bottom: 0.75rem; }
.footer-col a {
display: block;
color: #aaa;
text-decoration: none;
margin-bottom: 0.4rem;
transition: color 0.2s;
}
.footer-col a:hover { color: #4ba3e2; }
.copyright {
text-align: center;
font-size: 0.8rem;
border-top: 1px solid #1a2a3a;
padding-top: 1rem;
}
@media (max-width: 640px) {
.footer-inner { flex-direction: column; }
}
💡 フッターは常にページ最下部に：コンテンツが少ないページでフッターが中央に浮いてしまう場合は、<body> に display: flex; flex-direction: column; min-height: 100vh; を指定し、<footer> に margin-top: auto; を追加すると常に最下部に固定されます。
3. 完成したページをブラウザで確認する
3.1 全体プレビューで仕上がりを確認
ナビ・前回のコンテンツ・フッターが揃った完成形を確認しましょう。下のプレビューでPC・スマホを切り替えて、各セクションの見え方をチェックしてみてください。スマホ版ではハンバーガーボタンが現れ、フッターも縦積みに切り替わります。
3.2 最終的なファイル構成の確認
今回の追記が完了した時点で、index.html と style.css は以下のような全体構成になっています。第一弾から積み上げてきたスキルがすべて詰まった、自分だけのWebサイトの完成です。
<!– index.html 完成形の構成 –>
<body>
<!– 第5弾で追加 –>
<header class=”site-header”>…</header>
<div class=”drawer”>…</div>
<!– 第4弾から引き継ぎ –>
<div class=”hero”>…</div>
<section class=”about”>…</section>
<div class=”cards”>…</div>
<!– 第5弾で追加 –>
<footer class=”site-footer”>…</footer>
<script>…</script>
</body>
✓ ナビが上部に固定されているか：少し下にスクロールしてもヘッダーが画面上部に残っていればOKです。
✓ スマホでハンバーガーが動くか：開発者ツールでスマホ表示にしてボタンをクリックし、ドロワーが開閉することを確認しましょう。
✓ フッターが最下部に表示されているか：コンテンツが短いページでもフッターが浮かないよう min-height: 100vh の設定を確認しましょう。
✓ リンクのアンカー移動が動くか：ナビの「About」「Works」をクリックして、対応するセクションにスムーズにスクロールすることを確認しましょう。
まとめ
今回はナビゲーションとフッターを追加して、Webサイトの骨格を完成させました。ポイントをまとめると：
- ナビは
position: stickyでスクロール追従させる - ハンバーガーメニューは
classList.toggle()で開閉を制御する - フッターも Flexbox で3列に並べ、スマホでは縦積みに切り替える
- 既存コードへの追記は「上にheader・下にfooter」だけでOK
- 完成後は開発者ツールでPC・スマホ両方の表示を必ず確認する
次の記事では、完成したサイトをVercelを使って実際にインターネットに公開する方法を解説します。自分のサイトを世界に公開する最初の一歩、お楽しみに！
コメント