← 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のカスタマイズを依頼するときは、使っているテーマがクラシックテーマかブロックテーマかも伝えるとよい。

AIコーディングとの関係

AIにWebページのレイアウトを作らせると、<div> ばかりを使った構造で返ってくることがある。ヘッダー / フッターの意味を理解していれば、「<header> と <footer> を使ったセマンティックな構造にしてください」のように具体的に指示できる。

WordPressのテーマカスタマイズをAIに依頼するときは、使っているテーマがクラシックテーマ（header.php / footer.php を直接編集する）かブロックテーマ（テンプレートパーツやサイトエディターで編集する）かを伝えると、的確なコードや手順を提案してもらいやすくなる。

たとえば、次のように相談すると具体的な回答を得やすい。

WordPressのクラシックテーマを使っています。header.phpのナビゲーションを、
スマホ表示時にハンバーガーメニューへ切り替えたいです。
既存のCSS設計を大きく変えない範囲で、実装方法を教えてください。

よくある勘違い

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

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

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

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

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

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

まとめ

  • ヘッダー / フッターは、Webページの上部（ヘッダー）と下部（フッター）に配置されるレイアウト領域のこと。
  • HTMLでは <header> <footer> タグを使い、ページの構造を機械にも人にも伝えやすくする（セマンティックHTML）。
  • ヘッダーにはロゴやナビゲーション、フッターには著作権表示や補足リンクなど、置くべき要素の役割が異なる。
  • スマホ表示では、レスポンシブデザインに合わせてハンバーガーメニューなど画面幅に合った形に切り替えることが多い。
  • WordPressなどのCMSでは、テーマの共通パーツとしてヘッダー・フッターが管理される。

情報ソース

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

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