HTMLのfooterタグの使い方！意味合いやデザイン例など

html

HTMLのfooterタグについて書いています。

footerタグは、Webページやセクションのフッター（末尾部分）を示すために使用されます。
通常、著作権情報、連絡先、ソーシャルメディアへのリンク、サイトマップ、利用規約など、そのコンテンツの補足的な情報やメタデータを包含します。

footerタグの基本的な使い方と配置

footerタグは、フッターとしてまとめたいコンテンツを囲むだけで使用できます。
通常、Webページ全体のフッターとして<body>の閉じタグの直前に配置されることが多いですが、<article>や<section>などのセクション内にも配置して、そのセクションのフッターを示すことができます。

<body>
  <main>
    <article>
      <h1>記事のタイトル</h1>
      <p>記事の内容...</p>
      <footer>
        <p>この記事に関するコメントやお問い合わせは<a href="/contact">こちら</a>まで。</p>
      </footer>
    </article>
  </main>

  <footer>
    <p>© 2025 〇〇株式会社</p>
    <nav>
      <ul>
        <li><a href="/privacy">プライバシーポリシー</a></li>
        <li><a href="/terms">利用規約</a></li>
        <li><a href="/sitemap">サイトマップ</a></li>
      </ul>
    </nav>
    <div class="social-links">
      <a href="https://twitter.com/example" target="_blank">Twitter</a>
      <a href="https://facebook.com/example" target="_blank">Facebook</a>
    </div>
    <address>
      お問い合わせ先：<a href="mailto:info@example.com">info@example.com</a>
    </address>
  </footer>
</body>

上記の例では、<article>要素内のフッターと、Webページ全体のフッターの両方にfooterタグが使用されています。
ブラウザで実際に表示すると、下記のようになりました。
HTMLのfooterタグの表示確認

footerタグの意味合いと重要性

footerタグは、囲まれたコンテンツがフッターであることを示す意味合い（セマンティクス）を持っています。
これは、単に見た目をフッターのようにするためだけでなく、Webページの構造を明確にし、検索エンジンやスクリーンリーダーなどの支援技術がフッターコンテンツを認識できるようにするために重要です。

footerタグとアクセシビリティ

footerタグを適切に使用することは、Webサイトのアクセシビリティ向上に貢献します。

  • 構造の理解: スクリーンリーダーは、footerタグを認識し、ユーザーに「これはフッターコンテンツである」と伝えることができます。これにより、Webページの構造を理解しやすくなります。
  • 補足情報の提供: フッターには、著作権情報やプライバシーポリシーなど、主要なコンテンツを補足する重要な情報が含まれていることが多いため、footerタグで適切にマークアップすることで、これらの情報へのアクセスを容易にすることができます。

footerタグの使用例

footerタグは、以下のようなコンテンツを包含するために使用できます。

  • 著作権情報 (<p>&copy; ...</p>)
  • 連絡先情報 (<address>)
  • ソーシャルメディアへのリンク (<a> タグなど)
  • サイトマップへのリンク (<nav> タグと <a> タグの組み合わせ)
  • 利用規約、プライバシーポリシーへのリンク (<nav> タグと <a> タグの組み合わせ)
  • 言語選択
  • ページの最終更新日
  • 関連サイトへのリンク

footerタグ内に複数の要素を配置し、CSSでレイアウトを調整することで、様々なデザインのフッターを作成できます。

footerタグを使用する際の注意点

  • 1つの<footer>要素（グローバルフッター）: 通常、Webページ全体を表すフッターは <body>の閉じタグの直前に1つだけ配置することが推奨されます。<article> や <section> などのセクション内には、それぞれのフッターを記述するために footerタグを複数使用できます。
  • 補足的な情報: footerタグは、そのコンテンツの補足的な情報を示すために使用します。主要なコンテンツを記述する場所ではありません。
  • 構造化要素の活用: フッター内のリンク集は <nav> タグで囲むなど、適切な構造化要素を使用してマークアップすることが推奨されます。
  • スタイリングは CSS で: footerタグやその内部の要素の見た目は、CSSで制御します。

footerタグの記述例とCSSデザイン例

以下に、様々な状況におけるfooterタグの記述例と、それに対応する基本的なCSSデザイン例を示します。

記述例1：基本的なフッター

<footer>
  <p>© 2025 〇〇株式会社</p>
</footer>

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

ブラウザで実際に表示すると、下記のようになりました。
HTMLのfooterタグのデザイン例1

記述例2：ナビゲーションリンクを含むフッター

<footer>
  <nav>
    <ul>
      <li><a href="/privacy">プライバシーポリシー</a></li>
      <li><a href="/terms">利用規約</a></li>
      <li><a href="/sitemap">サイトマップ</a></li>
    </ul>
  </nav>
  <p>© 2025 〇〇株式会社</p>
</footer>

footer {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  border-top: 1px solid #ccc;
}

footer nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: flex;
  justify-content: center;
}

footer nav ul li {
  margin: 0 15px;
}

footer nav ul li a {
  text-decoration: none;
  color: #555;
}

footer p {
  margin-top: 10px;
  font-size: 0.8em;
  color: #777;
}

ブラウザで実際に表示すると、下記のようになりました。
HTMLのfooterタグのデザイン例2

記述例3：連絡先情報とソーシャルリンクを含むフッター

<footer>
  <address>
    お問い合わせ先：<a href="mailto:info@example.com">info@example.com</a>
  </address>
  <div class="social-links">
    <a href="https://twitter.com/example" target="_blank">Twitter</a>
    <a href="https://facebook.com/example" target="_blank">Facebook</a>
  </div>
  <p>© 2025 〇〇株式会社</p>
</footer>

footer {
  background-color: #f9f9f9;
  padding: 20px;
  text-align: center;
  border-top: 1px solid #eee;}

footer address {
  font-style: normal;
  margin-bottom: 10px;
}

footer .social-links a {
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}

footer p {
  margin-top: 15px;
  font-size: 0.8em;
  color: #777;
}

ブラウザで実際に表示すると、下記のようになりました。
HTMLのfooterタグのデザイン例3

まとめ

footerタグは、Webページやセクションの末尾を意味的にマークアップするための重要なHTML要素です。
著作権情報、連絡先、ナビゲーションリンクなど、フッターに必要な要素を適切にfooterタグで囲むことで、Webページの構造が明確になり、ユーザーに必要な情報を提供することができます。

グローバルフッターとセクションフッターの使い分けを理解し、適切に活用しましょう。

HTML
yasuaki

コメント