HTMLのfooterタグを完全ガイド！初心者でもわかるフッターの使い方

新人と先輩の会話形式で理解しよう

新人

「HTMLでページの下部にフッターを作りたいんですけど、どうすればいいですか？」

先輩

「HTMLにはfooterタグがあります。これを使うと、ページの下部にフッターを作成できます。フッターは、著作権情報や連絡先、サイトマップなどを配置する場所としてよく使われます。」

新人

「なるほど、フッターを使うとページの最後が整理できるんですね。具体的にどのように使えばいいんですか？」

先輩

「それでは、footerタグの基本的な使い方を見ていきましょう！」

1. footerタグとは？

footerタグは、HTML5で導入されたタグの一つで、ウェブページのフッター部分を定義します。一般的に、著作権情報や連絡先、サイトマップ、SNSリンクなどを含めるために使用します。ページの下部に配置することを前提としているため、内容が最後に表示されることが特徴です。


<footer>
  <p>© 2025 あなたのウェブサイト</p>
  <ul>
    <li><a href="#privacy">プライバシーポリシー</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
    <li><a href="#sitemap">サイトマップ</a></li>
  </ul>
</footer>

ブラウザ表示

上記の例では、footerタグ内に著作権情報といくつかのリンク（aタグ）を含むリスト（ulタグ）を配置しています。

2. フッターのデザインを整える方法

フッターは、HTMLだけではデザインを細かく調整することはできませんが、CSSを使うことでデザインを整えることができます。例えば、背景色を変更したり、リンクの色を変えたり、余白を調整したりすることができます。


<footer>
  <p>© 2025 あなたのウェブサイト</p>
  <ul>
    <li><a href="#privacy">プライバシーポリシー</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
    <li><a href="#sitemap">サイトマップ</a></li>
  </ul>
</footer>

ブラウザ表示

この例では、CSSを使ってフッターのデザインを変更することができます。例えば、背景色やリンクのスタイルを調整して、ウェブサイトの全体的なデザインに合わせることができます。

3. フッター内の要素を追加する方法

footerタグの中には、さまざまな要素を追加することができます。例えば、SNSのアイコンを追加したり、外部リンクを追加したりすることで、ユーザーがさらに便利に情報を得られるようになります。


<footer>
  <p>© 2025 あなたのウェブサイト</p>
  <ul>
    <li><a href="#privacy">プライバシーポリシー</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
    <li><a href="#sitemap">サイトマップ</a></li>
  </ul>
  <div class="social-media">
    <a href="https://facebook.com">Facebook</a>
    <a href="https://twitter.com">Twitter</a>
  </div>
</footer>

ブラウザ表示

ここでは、フッター内にSNSリンクを追加しました。これにより、ユーザーが簡単にソーシャルメディアにアクセスできるようになります。