実行できるHTMLドキュメント: footer タグ

Q: フッターをページの最下部に置くには？

body をウィンドウ以上の高さの flex の縦並びにし (display: flex; flex-direction: column; min-height: 100vh;)、 に flex: 1 を指定します。するとメインの領域が空いたスペースを埋めるように伸び、短いページでもフッターが下に押し下げられます。

Q: HTML で著作権記号 (コピーライト) を書くには？

文字参照 © を使うと © が表示されます。ページで を使っていれば、文字を直接入力することもできます。その行を で囲むと、注意書きの小さな文字であることを表せます。

Q: 1 ページにフッターを複数置けますか？

置けます。各 や は、著者の情報やタグのための独自のフッターを持てます。スクリーンリーダーにとってページの contentinfo ランドマークになるのは、article、aside、main、nav、section の中にないフッターだけです。

HTML でフッターを作る方法

ページを締めくくる内容を <footer> 要素に入れます。普通は <body> の最後に置きます。<header> と同じく初期の見た目はないので、CSS でフッターのバーにします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

© は © の記号を表示します。<small> はコピーライトの行を注意書きの小さな文字として示します。HTML ではこれが <small> の意味で、単にフォントを小さくするだけではありません。リンクのリストは本物の <ul> のリストなので、ほとんどのスクリーンリーダーは各列にリンクがいくつあるかを読み上げます。

フッターを最下部に置く

内容の少ないページでは、フッターは内容のすぐ下に表示され、その下に空白ができます。解決策は flex の縦並びです。入れ物をウィンドウ以上の高さにし、メインの領域に残りの高さをすべて使わせます。下のグレーの箱をブラウザのウィンドウに見立てています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

main から flex: 1 を消すと、フッターが段落の下に跳ね上がります。実際のページでは、固定の高さの代わりに min-height: 100vh (と margin: 0) を付けて同じルールを <body> に指定します。そうすれば、短いページではフッターが最下部に、長いページでは内容の後に表示されます。

記事の中のフッター

<footer> はいちばん近い記事やセクションを締めくくるので、ブログ記事やコメントも、著者、日付、タグを入れた独自のフッターを持てます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

スクリーンリーダーが contentinfo ランドマークとして扱うのは、ページの階層のフッターだけです。記事の中のフッターは普通のグループなので、サイトのフッターと競合しません。

address で連絡先を示す

ページやその所有者の連絡先には、フッターの中で <address> を使います。これは連絡先専用で (内容に出てくる住所一般のためのものではありません)、ブラウザは初期状態で斜体で表示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

address の中の改行は、<br> の正しい使い方の 1 つです。メールのリンクについて詳しくは mailto のページを参照してください。

フッターに入れられるもの

フッターには、リンク、リスト、フォーム (ニュースレターの登録)、画像、<nav> を入れられます。<header>、別の <footer>、<main> は入れられません。フッターの 2 つ目のメニューは、メインのものと区別できるラベルを付けた <nav> にできます。

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

よくある間違い

<footer> を <body> の外に置く。 フッターも含めて、見えるものはすべて <body> の中に入れます。
下に留めるために position: fixed を使う。 固定されたフッターは小さな画面で内容を覆い、あちこちに padding が必要になります。flex の縦並びのパターンを使いましょう。
どんな住所にも <address> を使う。 これはページや記事の著者の連絡先のためのものです。店舗一覧の中の住所は普通の <p> です。
<br> タグでリンクの列を作る。 構造が読み上げられるよう <ul> のリストを使いましょう。
去年の年をそのまま書いておく。 コピーライトの年はテンプレートで更新するか、サーバーやビルドの処理で出力しましょう。

よくある質問

HTML の footer タグとは何ですか？

<footer> はページやセクションを締めくくる内容のためのセマンティックな要素で、著作権、連絡先、関連リンク、著者情報を入れます。初期スタイルのないブロックボックスです。

Web サイトのフッターには何を入れればいいですか？

一般的なフッターには、著作権表示、プライバシーポリシーや利用規約などの法的なページへのリンク、連絡先、SNS のリンク、簡単なサイトマップを入れます。すべての訪問者が最後までスクロールするわけではないので、メインのナビゲーションは上部の <nav> にも置いておきましょう。

フッターをページの最下部に置くには？

body をウィンドウ以上の高さの flex の縦並びにし (display: flex; flex-direction: column; min-height: 100vh;)、<main> に flex: 1 を指定します。するとメインの領域が空いたスペースを埋めるように伸び、短いページでもフッターが下に押し下げられます。

HTML で著作権記号 (コピーライト) を書くには？

1 ページにフッターを複数置けますか？

置けます。各 <article> や <section> は、著者の情報やタグのための独自のフッターを持てます。スクリーンリーダーにとってページの contentinfo ランドマークになるのは、article、aside、main、nav、section の中にないフッターだけです。