コンテンツ区分

footerタグの使い方 [HTMLリファレンス]

HTMLのfooterタグは、文書やセクションのフッター部分を定義するために使用されます。

通常、footerタグには著作権情報、連絡先情報、サイトマップ、関連リンクなどが含まれます。

このタグは、文書全体のフッターだけでなく、各セクションのフッターとしても使用できます。

また、footerタグはHTML5で導入され、セマンティックなマークアップを提供することで、検索エンジンやスクリーンリーダーにとって文書の構造を理解しやすくします。

目次から探す

footerタグとは
footerタグの基本的な使い方
- footerタグの基本構文
- footerタグの配置場所
footerタグのスタイリング
footerタグの応用例
footerタグのアクセシビリティ
footerタグのSEOへの影響
まとめ

footerタグとは

footerタグは、HTML5で導入されたセマンティックな要素の一つで、ウェブページやセクションのフッター部分を定義するために使用されます。

このタグは、通常、著作権情報、連絡先情報、サイトマップ、関連リンク、クレジット情報などを含むことが一般的です。

footerタグを使用することで、ページの構造をより明確にし、検索エンジンやスクリーンリーダーに対してコンテンツの意味を伝えやすくします。

footerタグは、ページ全体のフッターだけでなく、記事やセクションごとに使用することも可能です。

footerタグの基本的な使い方

footerタグの基本構文

footerタグは、HTML文書内でフッターを定義するために使用されます。

基本的な構文は以下の通りです。

<footer>
  <!-- フッターに含めるコンテンツ -->
</footer>

この構文の中に、フッターとして表示したいコンテンツを記述します。

footerタグは、他のHTML要素と同様に、CSSでスタイリングすることが可能です。

footerタグの配置場所

footerタグは、ページ全体のフッターとして使用することが一般的ですが、特定のセクションや記事のフッターとしても使用できます。

以下に、footerタグの配置場所の例を示します。

ページ全体のフッター: ページの最後に配置し、サイト全体の情報を提供します。
セクションのフッター: 各セクションの最後に配置し、そのセクションに関連する情報を提供します。

<body>
  <header>...</header>
  <main>
    <section>
      <h2>セクションタイトル</h2>
      <p>セクションの内容</p>
      <footer>セクションのフッター情報</footer>
    </section>
  </main>
  <footer>ページ全体のフッター情報</footer>
</body>

footerタグに含めるべき要素

footerタグには、以下のような要素を含めることが一般的です。

要素名	説明
著作権情報	サイトやコンテンツの著作権に関する情報を記載します。
連絡先情報	メールアドレスや電話番号などの連絡先情報を提供します。
サイトマップ	サイト内のページリンクを一覧表示し、ナビゲーションを助けます。
ソーシャルリンク	FacebookやTwitterなどのソーシャルメディアへのリンクを含めます。
クレジット情報	サイトのデザインや開発に関するクレジットを記載します。

これらの要素を適切に配置することで、ユーザーにとって有益な情報を提供し、サイトの信頼性を高めることができます。

footerタグのスタイリング

CSSを使ったfooterタグのデザイン

footerタグのデザインは、CSSを使用してカスタマイズすることができます。

以下は、基本的なスタイリングの例です。

footer {
  background-color: #333; /* 背景色をダークグレーに設定 */
  color: #fff; /* 文字色を白に設定 */
  padding: 20px; /* 内側の余白を設定 */
  text-align: center; /* テキストを中央揃えに設定 */
}

このスタイルを適用することで、footerタグはダークグレーの背景に白い文字が表示され、中央揃えのテキストが20pxの余白を持つデザインになります。

レスポンシブデザインにおけるfooterタグ

レスポンシブデザインでは、footerタグが異なるデバイスサイズに適応するようにスタイリングすることが重要です。

メディアクエリを使用して、画面サイズに応じたスタイルを適用できます。

footer {
  padding: 20px;
}
@media (max-width: 600px) {
  footer {
    padding: 10px; /* 小さい画面では余白を減らす */
    font-size: 14px; /* フォントサイズを小さくする */
  }
}

この例では、画面幅が600px以下の場合、footerの余白とフォントサイズを調整しています。

これにより、スマートフォンやタブレットでも見やすいフッターを実現できます。

フレックスボックスを使ったfooterのレイアウト

フレックスボックスを使用すると、footer内の要素を柔軟に配置することができます。

以下は、フレックスボックスを使用したレイアウトの例です。

footer {
  display: flex; /* フレックスボックスを有効にする */
  justify-content: space-between; /* 要素を左右に配置 */
  align-items: center; /* 要素を中央に揃える */
  padding: 20px;
}
footer div {
  flex: 1; /* 各要素が均等にスペースを取る */
}

このスタイルを適用すると、footer内の要素が左右に均等に配置され、中央に揃えられます。

フレックスボックスを使用することで、複雑なレイアウトも簡単に実現できます。

footerタグの応用例

複数のfooterを持つページの設計

HTML5では、footerタグをページ内の複数のセクションに使用することができます。

これにより、各セクションに特化したフッターを設けることが可能です。

例えば、記事ごとに異なるフッターを持たせることで、関連情報やリンクを提供できます。

<article>
  <h2>記事タイトル</h2>
  <p>記事の内容...</p>
  <footer>この記事のフッター情報</footer>
</article>
<article>
  <h2>別の記事タイトル</h2>
  <p>別の記事の内容...</p>
  <footer>別の記事のフッター情報</footer>
</article>

このように、各articleタグ内にfooterタグを配置することで、記事ごとに異なるフッターを設計できます。

footerタグを使ったナビゲーションメニューの作成

footerタグ内にナビゲーションメニューを配置することで、ユーザーがページの下部からもサイト内を移動しやすくなります。

以下は、footerタグを使ったナビゲーションメニューの例です。

<footer>
  <nav>
    <ul>
      <li><a href="#home">ホーム</a></li>
      <li><a href="#about">会社情報</a></li>
      <li><a href="#services">サービス</a></li>
      <li><a href="#contact">お問い合わせ</a></li>
    </ul>
  </nav>
</footer>

この例では、footerタグ内にnavタグを使用し、リスト形式でナビゲーションリンクを配置しています。

ソーシャルメディアリンクを含むfooterの作成

footerタグにソーシャルメディアリンクを含めることで、ユーザーが簡単にソーシャルメディアアカウントにアクセスできるようになります。

以下はその例です。

<footer>
  <ul>
    <li><a href="https://twitter.com/youraccount">Twitter</a></li>
    <li><a href="https://facebook.com/youraccount">Facebook</a></li>
    <li><a href="https://instagram.com/youraccount">Instagram</a></li>
  </ul>
</footer>

この例では、footerタグ内にリスト形式でソーシャルメディアリンクを配置しています。

フッターにおける著作権表示のベストプラクティス

フッターに著作権情報を表示することは、サイトの信頼性を高めるために重要です。

以下は、著作権表示のベストプラクティスの例です。

<footer>
  <p>&copy; 2023 Your Company Name. All rights reserved.</p>
</footer>

この例では、©を使用して著作権記号を表示し、会社名と年を記載しています。

これにより、訪問者に対してコンテンツの所有権を明確に示すことができます。

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

アクセシビリティを考慮したfooterの設計

アクセシビリティを考慮したfooterの設計は、すべてのユーザーが情報にアクセスしやすくするために重要です。

以下のポイントを考慮することで、アクセシブルなフッターを作成できます。

明確な構造: footer内の情報を論理的にグループ化し、見出しやリストを使用して構造を明確にします。
十分なコントラスト: 背景色と文字色のコントラストを高くし、視認性を向上させます。
フォーカス可能な要素: キーボード操作でフォーカスできるリンクやボタンを使用し、すべてのユーザーが操作しやすいようにします。

スクリーンリーダーに優しいfooterの作成

スクリーンリーダーを使用するユーザーにとって、footerの情報がわかりやすくなるように設計することが重要です。

以下の方法を活用します。

適切なHTML要素: footerタグを使用することで、スクリーンリーダーがフッターであることを認識しやすくなります。
見出しの使用: フッター内のセクションに見出しを追加し、スクリーンリーダーが内容を簡単にナビゲートできるようにします。
リンクテキストの明確化: リンクテキストは、リンク先の内容を明確に示すように記述します。

例：<a href="#contact">お問い合わせページへ</a>

footerタグとARIA属性の活用

ARIA属性を使用することで、footerのアクセシビリティをさらに向上させることができます。

以下は、footerタグでのARIA属性の活用例です。

aria-label属性: フッター全体にラベルを付けることで、スクリーンリーダーがその役割を理解しやすくします。

  <footer aria-label="サイト全体のフッター">
    <!-- フッターの内容 -->
  </footer>

role属性: 特定の役割を持つ要素に対して、role属性を使用して役割を明示します。

例：<nav role="navigation">

これらのARIA属性を適切に使用することで、スクリーンリーダーを利用するユーザーに対して、より明確で理解しやすい情報を提供することができます。

footerタグのSEOへの影響

footerタグがSEOに与える影響

footerタグは、SEOにおいても重要な役割を果たします。

フッターは通常、ページのすべてのセクションに共通して表示されるため、検索エンジンはフッター内のリンクや情報を特に注意して評価します。

以下の点がSEOに影響を与える要素です。

内部リンクの配置: フッターに配置された内部リンクは、サイト全体のリンク構造を強化し、ページのクロール効率を向上させます。
キーワードの使用: フッター内に適切なキーワードを含めることで、関連性のあるコンテンツとして評価されやすくなります。
重複コンテンツの回避: フッターがすべてのページで同一である場合、重複コンテンツとして扱われる可能性があるため、注意が必要です。

検索エンジンに好まれるfooterの構造

検索エンジンに好まれるfooterの構造を設計することで、SEO効果を高めることができます。

以下のポイントを考慮します。

明確な階層構造: フッター内のリンクを階層的に整理し、重要なページへのアクセスを容易にします。
テキストリンクの使用: 画像リンクよりもテキストリンクを使用することで、リンクの内容を検索エンジンに伝えやすくします。
適切なアンカーテキスト: リンクのアンカーテキストは、リンク先の内容を明確に示すように記述します。

例：<a href="#services">サービス一覧</a>

フッターリンクの最適化

フッターリンクを最適化することで、SEO効果をさらに向上させることができます。

以下の方法を活用します。

リンクの数を適切に制限: フッターに過剰な数のリンクを配置すると、リンクの価値が分散されるため、必要最低限のリンクに絞ります。
関連性のあるリンクを配置: フッターには、ユーザーが次に訪れる可能性の高い関連ページへのリンクを配置します。
nofollow属性の活用: SEO効果を伝えたくないリンクには、rel="nofollow"属性を使用して、検索エンジンにリンクの評価を伝えないようにします。

これらの最適化を行うことで、フッターがSEOに与えるポジティブな影響を最大化し、サイト全体の検索エンジン評価を向上させることができます。