このページはコミュニティーの尽力で英語から翻訳されました。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 |
ブラウザーの互換性
Loading...