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リンクを追加しました。これにより、ユーザーが簡単にソーシャルメディアにアクセスできるようになります。
4. フッターのSEO効果
footerタグは、SEO（検索エンジン最適化）の観点からも重要です。検索エンジンは、ページの構造を理解するためにHTMLタグを解析します。フッター内に重要なリンクや情報を配置することで、検索エンジンにとって有益な情報を提供することができます。
また、フッター内にサイトマップやプライバシーポリシー、利用規約などのリンクを配置することは、ユーザーエクスペリエンスを向上させるだけでなく、SEOにも良い影響を与えることが期待できます。
5. footerタグとnavタグを組み合わせる
footerタグの中では、ナビゲーションリンクを整理するためにnavタグを使うことがあります。navタグは、ウェブサイト内のリンクをまとめるためのHTMLタグで、ユーザーがページ内を移動しやすくする役割があります。
例えば、サイトマップや主要ページへのリンクをフッターにまとめて配置することで、ページの最後からでもサイト内の重要なページにアクセスできるようになります。多くのウェブサイトでは、ヘッダーだけでなくフッターにもナビゲーションリンクを配置しています。
<footer>
<p>© 2025 あなたのウェブサイト</p>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">会社情報</a></li>
<li><a href="#contact">お問い合わせ</a></li>
<li><a href="#sitemap">サイトマップ</a></li>
</ul>
</nav>
</footer>
このようにfooterタグの中にnavタグを配置することで、ページ下部に分かりやすいリンクメニューを作成することができます。
6. footerタグを記事やセクションで使う方法
footerタグは、ウェブページ全体のフッターとして使うだけでなく、記事やセクションの補足情報をまとめるために使うこともできます。HTML5ではページ構造を分かりやすくするために、セマンティックタグを使うことが推奨されています。
例えば、ブログ記事の最後に著者情報や更新日、関連記事へのリンクを表示する場合などにfooterタグを使用することがあります。これにより、記事の本文と補足情報を整理して表示することができます。
<article>
<h1>記事タイトル</h1>
<p>ここに記事の本文が入ります。</p>
<footer>
<p>著者：山田太郎</p>
<p>更新日：2025年1月1日</p>
</footer>
</article>
このように記事の最後にfooterタグを配置することで、記事に関する補足情報を分かりやすく整理することができます。
7. footerタグを使った基本的なページ構造
ウェブページを作成する際は、headerタグやmainタグと組み合わせてfooterタグを使うことが一般的です。これにより、ページの構造が整理され、読みやすいHTML構造を作ることができます。
例えば、ページの上部にヘッダー、中間にメインコンテンツ、そして下部にフッターを配置することで、基本的なウェブページのレイアウトを作成することができます。
<header>
<h1>ウェブサイトタイトル</h1>
</header>
<main>
<p>ここにメインコンテンツが表示されます。</p>
</main>
<footer>
<p>© 2025 Sample Website</p>
</footer>
このようにfooterタグをページの最後に配置することで、著作権情報や補足リンクなどを整理して表示することができます。
