Shiraude Code Docs
用語2026年10月10日footerHTMLセマンティック要素Webページ構造header

footerって何?画面下の定番領域の話

footer(フッター)は「ページのいちばん下」のこと

footer は英語で「足元」という意味で、Webページやドキュメントのいちばん下に置かれる領域を指します。ページの中身が終わったあと、画面を下までスクロールしたときに出てくる、あの部分です。

身近な例えでいうと、手紙の末尾に書く「差出人の住所・名前・連絡先」のようなものです。手紙の本文そのものではないけれど、どの手紙にも同じように付いていて、「これは誰が書いたどういう文書なのか」を補足してくれる。footer もそれと同じ役割を持っています。

サイトによって中身はさまざまですが、だいたい次のようなものが入っていることが多いです。

  • 著作権表記(コピーライト)
  • 運営者や会社の情報
  • 利用規約・プライバシーポリシーへのリンク
  • サイト内の主要ページへのリンク集
  • 問い合わせ先やSNSへのリンク

「本文ほど重要ではないけれど、どのページからでもたどり着けるようにしておきたい情報」が集まる場所、と考えるとイメージしやすいはずです。

header との関係

footer とよく対で語られるのが header(ヘッダー)です。ヘッダーはページの上部、フッターはページの下部。どちらも「本文の外側にある、ページ共通のパーツ」という点は同じですが、置かれる情報の性格が少し違います。

header(上)

サイト名やロゴ、メインのナビゲーションなど、訪れた人が最初に見て操作したいものが置かれる。

footer(下)

著作権表記や規約リンクなど、必要になったときに探しに来る補足的な情報が置かれる。

HTMLでの書き方

HTMLには <footer> というタグがそのまま用意されています。見た目を決めるためというより、「ここはフッターですよ」という意味づけをするためのタグです。

<footer>
  <p>© 2025 Example Inc.</p>
  <ul>
    <li><a href="/terms">利用規約</a></li>
    <li><a href="/privacy">プライバシーポリシー</a></li>
  </ul>
</footer>

正直なところ、最初のうちは「<div> で囲んでも見た目は同じじゃないか」と思いがちです。実際、見た目だけならそのとおりです。ただ <footer> を使っておくと、スクリーンリーダーなどの支援技術や検索エンジンが「ここは補足情報の領域だ」と判断しやすくなります。読む人も、あとからコードを見たときに構造が一目で分かります。

Web以外で使われる「footer」

footer という言葉はWebページ以外でも使われます。WordやPDFなどの文書では、各ページの下部に入るページ番号や文書名の帯を「フッター」と呼びます。プログラムの出力やターミナルのUIでも、画面下部に常に表示される情報行をフッターと呼ぶことがあります。

共通しているのは「主役である中身の下に添えられる、補助的な固定領域」という性質です。場所が下にあって、本文とは別の層にある——この2点を押さえておけば、どの文脈で出てきても意味を取り違えることはないでしょう。

つまずきやすいところ

よくある勘違いが、「footer は画面の下に貼り付いているもの」という思い込みです。<footer> タグ自体には、画面下に固定する機能はありません。普通に書けば、本文のあとに続いて流れるように配置されるだけです。スクロールしても常に下に張り付かせたい場合は、CSSで別途そういう指定をする必要があります。

もうひとつ、footer は必ずしもページにひとつとは限りません。記事やセクションごとに、その内容の締めくくりとして小さなフッターを置くこともできます。ただ、最初は「ページ全体の下にひとつ」という基本形で覚えておけば十分です。

このページは役に立ちましたか?