← PC・IT用語集へ戻る

ヘッダー / フッター

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

概要（サマリー）

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

詳細解説

HTMLでの記述方法

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

<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）。なお、<header> や <footer> はページ全体の上部・下部だけでなく、記事やセクションの導入部・末尾を表すために使われることもある。

ヘッダーに置くべき要素

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

フッターに置くべき要素

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

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

PC表示では横並びのヘッダーナビゲーションも、スマホではレスポンシブデザインに合わせて、ハンバーガーメニュー、簡略化したナビゲーション、下部ナビなど画面幅に合った形に切り替えることが多い。CSSのメディアクエリとJavaScriptで制御する。

CMSとの関係

WordPressなどのCMSでは、ヘッダーとフッターはテーマやテンプレートの共通パーツとして管理される。WordPressのクラシックテーマでは header.php と footer.php が使われることが多い。一方、ブロックテーマではヘッダーやフッターをテンプレートパーツやサイトエディターで扱うケースがある。AIにWordPressのカスタマイズを依頼するときは、使っているテーマがクラシックテーマかブロックテーマかも伝えるとよい。

よくある勘違い

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

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

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

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

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

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

情報ソース

AIコーディングとの関係

AIにコード生成や修正を依頼するとき、ヘッダー / フッターの意味を理解していると、出力されたコードやエラー内容を判断しやすくなる。
Webページの上部（ヘッダー）と下部（フッター）に配置されるレイアウト領域のこと。

AIへ相談するときは、「何をしたいのか」「どの環境で起きているのか」「どのファイルやエラーを見ているのか」を一緒に伝えるとよい。
用語だけを投げるより、具体的な状況と期待する結果を添えることで、より実用的な回答を得やすくなる。

まとめ

  • ヘッダー / フッターは、Webページの上部（ヘッダー）と下部（フッター）に配置されるレイアウト領域のこと。
  • 関連する用語や実際の作業場面と一緒に理解すると、使いどころを判断しやすい。
  • AIコーディングでは、用語の意味を理解しているほど、AIの説明や生成コードを確認しやすくなる。
  • 迷ったときは、エラー内容、目的、前提条件を整理してAIに聞くとよい。

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

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