このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<footer>: フッター要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<footer> はHTML の要素で、直近の区分コンテンツまたは区分化ルート要素のフッターを表します。フッターには通常、そのセクションの著者に関する情報、関連文書へのリンク、著作権情報等を含めます。
試してみましょう
<article> <h1>How to be a wizard</h1> <ol> <li>Grow a long, majestic beard.</li> <li>Wear a tall, pointed hat.</li> <li>Have I mentioned the beard?</li> </ol> <footer> <p>© 2018 Gandalf</p> </footer></article>article { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto;}footer { display: flex; justify-content: center; padding: 5px; background-color: #45a1ff; color: #fff;}属性
この要素にはグローバル属性のみがあります。
使用上のメモ
例
html
<body> <h3>FIFA World Cup top goalscorers</h3> <ol> <li>Miroslav Klose, 16</li> <li>Ronaldo Nazário, 15</li> <li>Gerd Müller, 14</li> </ol> <footer> <small> Copyright © 2023 Football History Archives. All Rights Reserved. </small> </footer></body>css
footer { text-align: center; padding: 5px; background-color: #abbaba; color: #000;}アクセシビリティの考慮
Safari 13 のリリース以前は、contentinfo のランドマークロールがVoiceOver によって適切に公開されていませんでした。古い Safari ブラウザーに対応する必要がある場合は、role="contentinfo" をfooter 要素に追加して、ランドマークが適切に表示されるようにしてください。
技術的概要
| コンテンツカテゴリー | フローコンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | フローコンテンツ。ただし、子孫に他の<footer> や<header> がないもの。 |
| タグの省略 | なし。開始および終了タグは両方とも必須です。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。ただし、<address>,<header>, 他の<footer> の子孫要素として配置してはならない。 |
| 暗黙の ARIA ロール | contentinfo、ただしarticle,aside,main,nav,section のいずれかの要素、またはrole=article,complementary,main,navigation,region がある要素の子である場合はgeneric |
| 許可されている ARIA ロール | group,presentation,none |
| DOM インターフェイス | HTMLElement |
仕様書
| Specification |
|---|
| HTML # the-footer-element |