ヘッダー / フッター

Header / Footer

web development beginner

Webページの上部（ヘッダー）と下部（フッター）に配置されるレイアウト領域のこと。ヘッダーにはロゴやナビゲーション、フッターには著作権表示や補足リンクが置かれることが多い。

概要（サマリー）

ヘッダーとフッターとは、Webページの上部（ヘッダー）と下部（フッター）に配置されるレイアウト領域のことである。ヘッダーにはサイトのロゴ・ナビゲーションメニュー・検索ボックスなどが置かれ、フッターには著作権表示・プライバシーポリシーへのリンク・サイトマップなどが置かれることが多い。どのページを表示しても変わらない共通パーツとして機能するため、サイト全体の統一感やナビゲーション体験に直結する。

詳細解説

HTMLでの記述方法

HTML5では、ヘッダーとフッターを意味的に表すためのタグが用意されている。

<header>
  <a href="/">サイトロゴ</a>
  <nav>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <!-- ページ固有のコンテンツ -->
</main>

<footer>
  <p>&copy; 2026 サイト名. All rights reserved.</p>
</footer>

<header> <footer> <nav> <main> などのタグを使うことで、ページの構造を機械にも人にも伝えやすくなる（セマンティックHTML）。

ヘッダーに置くべき要素

ロゴ・サイト名: ブランドの識別とトップページへのリンク
ナビゲーションメニュー: 主要ページへの導線
検索ボックス: コンテンツへのアクセスを助ける
CTAボタン: 「問い合わせ」「ログイン」など行動を促す要素

フッターに置くべき要素

著作権表示: 例: © 2026 サイト名
プライバシーポリシー・利用規約へのリンク
SNSリンク
補足的なナビゲーション（サイトマップ代わりのリンク集）

スマホ対応（レスポンシブ）

PC表示では横並びのヘッダーナビゲーションも、スマホではレスポンシブデザインに合わせてハンバーガーメニューに切り替えるのが一般的だ。CSSのメディアクエリとJavaScriptで制御する。

CMSとの関係

WordPressなどのCMSでは、ヘッダーとフッターはテーマのテンプレートファイルとして管理される。WordPressでは header.php と footer.php がそれぞれ対応しており、全ページで共通して読み込まれる仕組みだ。AIにWordPressのカスタマイズを依頼するときは「header.phpを修正して〜」という指示が通じる。

よくある勘違い

ヘッダーはページの一番上の「大きな画像エリア」のこと？

必ずしもそうではない。「ヘッダー画像」や「ヒーローイメージ」と混同されやすいが、HTMLの <header> タグはナビゲーションなどを含むサイト上部の構造的な領域を指す。大きなビジュアルは <header> の中に含まれる場合もあるが、それ自体をヘッダーと呼ぶのは厳密には異なる。

フッターには何を置いてもいい？

フッターは「ページの最後に来る補足情報の場所」という役割がある。主要なコンテンツや重要なCTAをフッターに隠してしまうと、ユーザーが見つけにくくなる。重要な情報はヘッダーや本文内に配置し、フッターは補足的な位置づけにするのがUXの観点から望ましい。

ヘッダー・フッターの変更は1箇所直せば全ページ反映される？

CMSやフレームワークを使っていれば、基本的にはそうだ。しかし、静的HTMLで各ページに直接ヘッダー・フッターを書いている場合は、全ページ個別に修正が必要になる。これを避けるためにCMSやテンプレートエンジンが使われる。

より詳しくAIに聞いてみよう

ヘッダーとフッターの役割と、置くべきコンテンツの違いを教えてください。
HTMLのセマンティックタグ（header・footer・nav・main）の使い方を初心者向けに教えてください。
スマホ対応のハンバーガーメニューをヘッダーに実装する基本的な方法を教えてください。
WordPressのheader.phpとfooter.phpを安全にカスタマイズする方法を教えてください。
AIコーディングでヘッダー・フッターを含むページレイアウトを生成してもらうコツを教えてください。