【HTML Living Standard】footer要素の使い方
footer要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
footerオブジェクトは、HTML文書やセクションのフッター（末尾の部分）を表すオブジェクトです。HTMLでは、<footer>タグを用いてこのオブジェクトをマークアップします。このオブジェクトは、通常、そのコンテンツが属するセクションや文書に関する補足的な情報を含みます。具体的には、著作権情報、サイトマップや関連文書へのリンク、著者情報、連絡先、法的な情報（プライバシーポリシー、利用規約など）などが該当します。
footerオブジェクトは、ウェブページ全体の一番下だけでなく、<article>（記事）や<section>（セクション）といった特定のコンテンツブロックの末尾にも配置できます。これにより、各コンテンツブロックに関連するフッター情報を独立して提供することが可能です。例えば、一つのページ内に複数の記事がある場合、それぞれの記事の最後にその記事固有の著作権情報や著者情報を配置するといった使い方ができます。
このオブジェクトは、単なる見た目の装飾のためではなく、コンテンツの構造的な意味付けのために使用されるべきです。意味的に適切な箇所に配置することで、検索エンジンやスクリーンリーダーなどの補助技術がページの構造を正確に理解しやすくなり、ウェブサイトのアクセシビリティ向上や検索エンジン最適化（SEO）にも貢献します。ただし、main要素の直接の子孫として配置することは推奨されません。フッターは、コンテンツの末尾を構造的に定義する重要な役割を担っています。
構文(syntax)
1<footer> 2 <p>Copyright © 2023</p> 3</footer>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML footer 要素を画面下部に固定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML footer 要素の固定サンプル</title> 7 <style> 8 /* bodyのデフォルトマージンをリセットし、フッターの高さ分だけ下部にパディングを追加 */ 9 body { 10 margin: 0; 11 padding-bottom: 60px; /* フッターの高さに合わせて調整 */ 12 min-height: 100vh; /* 画面全体の高さを確保 */ 13 display: flex; /* Flexboxを使用してコンテンツを配置 */ 14 flex-direction: column; /* 要素を縦方向に並べる */ 15 } 16 17 /* メインコンテンツエリアのスタイル */ 18 .main-content { 19 flex-grow: 1; /* 残りのスペースを全て埋める */ 20 padding: 20px; 21 } 22 23 /* <footer>要素を画面下部に固定するスタイル */ 24 footer { 25 position: fixed; /* 画面のビューポートに対して固定 */ 26 bottom: 0; /* 画面の下端に配置 */ 27 width: 100%; /* 横幅いっぱいに広げる */ 28 height: 60px; /* フッターの高さ */ 29 background-color: #333; /* 背景色 */ 30 color: white; /* 文字色 */ 31 text-align: center; /* テキストを中央寄せ */ 32 line-height: 60px; /* テキストを垂直方向中央に配置 */ 33 z-index: 1000; /* 他のコンテンツの上に表示されるようにz-indexを設定 */ 34 } 35 36 /* フッター内のpタグのデフォルトマージンをリセット */ 37 footer p { 38 margin: 0; 39 } 40 </style> 41</head> 42<body> 43 <div class="main-content"> 44 <h1>HTML <code><footer></code> 要素 固定の例</h1> 45 <p>このページは、画面下部に固定されたフッターを持っています。</p> 46 <p><code><footer></code>要素は、ページのセクションのフッターや、最も近い祖先のセクショニングコンテンツのフッターを表します。</p> 47 <p>通常、著作権情報、ナビゲーションリンク、連絡先情報などが含まれます。</p> 48 <p>この例では、CSSの<code>position: fixed;</code>プロパティを使用してフッターを画面下部に固定しています。</p> 49 <p>メインコンテンツがどれだけ長くても、フッターは常に画面の最下部に表示され続けます。</p> 50 <p>下にスクロールしてみてください。フッターは動かないはずです。</p> 51 <!-- スクロールを発生させるためのダミーコンテンツ --> 52 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 53 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 54 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 55 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 56 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 57 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 58 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 59 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 60 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 61 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 62 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 63 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 64 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 65 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 66 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 67 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 68 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 69 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 70 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 71 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 72 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 73 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 74 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 75 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 76 </div> 77 <footer> 78 <p>© 2023 固定フッターサンプル. All rights reserved.</p> 79 </footer> 80</body> 81</html>
このサンプルコードは、HTMLの<footer>要素をウェブページの画面下部に常に固定して表示する方法を示しています。<footer>要素は、ウェブページの各セクションや文書全体の末尾（フッター）を表し、通常は著作権情報、ナビゲーションリンク、連絡先情報などを記述する際に利用されます。この要素自体は、特定の処理を行うための「引数」を受け取ったり、「戻り値」を返したりする機能は持たず、マークアップとしてコンテンツの構造的な意味付けを行う役割を果たします。
コードでは、CSSのposition: fixed;とbottom: 0;プロパティを<footer>要素に適用することで、ブラウザの表示領域（ビューポート）の最下部にフッターを固定しています。これにより、ページのコンテンツをスクロールしても、フッターは常に画面下部に表示され続けます。また、width: 100%;で画面の横幅いっぱいに広げ、height: 60px;で高さを指定しています。
重要な点として、固定されたフッターがメインコンテンツに隠れてしまわないように、body要素にはフッターの高さと同じ値のpadding-bottom: 60px;を設定しています。さらに、body要素をFlexbox（display: flex; flex-direction: column;）でレイアウトし、メインコンテンツ領域（.main-content）にflex-grow: 1;を指定することで、コンテンツがフッターの上に適切に配置され、全体のレイアウトが安定するように工夫されています。
このサンプルコードで<footer>要素を画面下部に固定するには、HTMLだけでなくCSSの知識が不可欠です。<footer>自体はページのフッター領域を意味する要素であり、固定する機能は持ちません。
固定表示はCSSのposition: fixed;プロパティによって実現されています。position: fixed;は要素を通常の文書フローから外し、ビューポート（画面表示領域）に固定するため、フッターの真下に位置するコンテンツがフッターに隠れてしまう可能性があります。この問題を避けるため、body要素にフッターの高さ分（この例では60px）のpadding-bottomを設定しています。フッターの高さが変わる場合は、このpadding-bottomの値も必ず調整してください。
また、z-indexでフッターが他のコンテンツの上に表示されるように重ね順を制御しています。コンテンツが少ないページでもフッターが画面の最下部に表示されるように、bodyにはmin-height: 100vh;とFlexboxが適用されています。これらのCSS設定全体が連携して、<footer>が正しく固定表示されます。
HTML footer 要素でページ下部を装飾する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML footer 要素の例</title> 7</head> 8<body> 9 <header> 10 <h1>ウェブサイトのヘッダー</h1> 11 <nav> 12 <ul> 13 <li><a href="#">ホーム</a></li> 14 <li><a href="#">サービス</a></li> 15 <li><a href="#">お問い合わせ</a></li> 16 </ul> 17 </nav> 18 </header> 19 20 <main> 21 <h2>メインコンテンツ</h2> 22 <p>この部分はウェブサイトの主要なコンテンツです。</p> 23 <p><code><footer></code>要素は、ウェブページのセクションまたはドキュメント全体のフッターを表します。</p> 24 <p>通常、著作権情報、連絡先情報、サイトマップへのリンクなどが含まれます。</p> 25 <p>このサンプルでは、フッターがページの論理的な「一番下」に配置されていることを示しています。</p> 26 <p>フッターは、視覚的にもページの最下部に表示されることが一般的です。</p> 27 <!-- コンテンツを増やすことで、フッターがページの一番下に来ることを明確にします --> 28 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 29 <p>スクロールしてページの一番下を見てください。</p> 30 </main> 31 32 <!-- footer要素は、ドキュメントの最終セクションに配置され、 33 通常、ウェブページの一番下に表示される情報（著作権、連絡先など）を含みます。 --> 34 <footer> 35 <p>© 2023 サンプルウェブサイト. 無断転載を禁じます。</p> 36 <p>連絡先: info@example.com</p> 37 <nav> 38 <ul> 39 <li><a href="#">サイトマップ</a></li> 40 <li><a href="#">プライバシーポリシー</a></li> 41 </ul> 42 </nav> 43 </footer> 44</body> 45</html>
HTMLの<footer>要素は、ウェブページのセクションまたはドキュメント全体のフッター（一番下の部分）を表すために使用されます。これは、ウェブサイトの各ページにおいて、情報の最終部分を示すための重要な構造的要素です。
フッターには、通常、ウェブサイトの著作権情報、連絡先情報、関連ドキュメント（プライバシーポリシーやサイトマップなど）へのリンクといった内容が含まれます。これにより、ユーザーはページの一番下で重要な補助情報を見つけることができます。
この<footer>要素自体には、関数のように直接渡す引数や、何らかの値を返す戻り値といった概念はありません。HTMLはコンテンツの構造を定義するマークアップ言語であるため、プログラミング言語の関数における引数や戻り値とは異なる扱いです。
サンプルコードでは、<footer>要素が<body>タグの最終部に配置されています。これは、この要素がウェブページの論理的な「一番下」に位置し、訪問者がページをスクロールした際に最も下部に表示されることを意図しています。具体的には、ページの著作権表示や連絡先情報、その他補助的なナビゲーションがここにまとめられており、ウェブページの標準的な構造を保ち、ユーザーにとって分かりやすい情報配置を実現しています。
<footer>要素は、ドキュメント全体または特定のセクションに関する補足情報（著作権、連絡先、関連リンクなど）をマークアップする際に使用します。サンプルコードではページの「一番下」に配置されていますが、これはコンテンツの「意味的なフッター」を指し、物理的な表示位置を強制するものではありません。ページの最下部に表示されるのは、通常、デフォルトのブラウザスタイルやCSSによる配置の結果です。<footer>は、<article>や<section>といった個別のコンテンツブロックの内部にも配置でき、その場合はそのブロックのフッターとして機能します。サンプルコード中の<br>タグは、フッターがページの一番下に見えることを示すためのものであり、実際のウェブページレイアウトで空白を作る目的では使用しないのが一般的です。HTMLはコンテンツの構造と意味を定義し、見た目の調整はCSSで行うという役割分担を理解することが重要です。