フッターとは | バイブコーダーのための名称辞典

フッターとは

ページの一番下に置かれる、リンク集やコピーライト表示などをまとめた領域。

概要

ページの一番下に共通して表示される領域で、利用規約やサイトマップへのリンク、SNS アイコン、コピーライト表示などをまとめて置く場所です。ヘッダーのメニューには入りきらない補助的なリンクの置き場としても使われます。

別名

表記ゆれ：ページフッター、サイトフッター、フッター、footer

単に「フッター」と呼ばれることがほとんどで、ヘッダーとの対比で「サイトフッター」「ページフッター」と呼ばれることもあります。

AI への伝え方

「フッターを作って」で通じます。載せたいリンクの種類（会社概要、プライバシーポリシーなど）や、SNS アイコンの有無を伝えると、必要な要素がそろった状態で作ってもらえます。

似たパーツとの違い

「グローバルナビゲーション」はページ上部で主要なページへ誘導する導線であるのに対し、フッターは下部に置かれる補助的なリンクやコピーライトなどの情報がまとまった領域という違いがあります。

デモ

コード

HTML

<footer class="footer-demo">
  <nav class="footer-demo__nav" aria-label="フッターナビゲーション">
    <a href="#">サービス</a>
    <a href="#">会社概要</a>
    <a href="#">プライバシーポリシー</a>
    <a href="#">お問い合わせ</a>
  </nav>
  <p class="footer-demo__copyright">&copy; 2026 Sample Site</p>
</footer>

CSS

.footer-demo {
  font-family: sans-serif;
  padding: 24px;
  background: #1a1a1a;
  color: #e6e6e6;
  border-radius: 8px;
  text-align: center;
}

.footer-demo__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
}

.footer-demo__nav a {
  color: #e6e6e6;
  text-decoration: none;
  font-size: 14px;
}

.footer-demo__nav a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-demo__copyright {
  margin: 0;
  font-size: 12px;
  color: #b3b3b3;
}