INDEX
footerの概要
| ページやセクションのフッターを定義 HTMLタグ | ||
|
<footer>フッターの内容</footer> 概要 footerタグは、Webページ全体または特定のセクションのフッター（最下部）を定義するためのタグです。 |
||
|
footerタグの主な属性
| 属性 | 説明 | 使用例 |
|---|---|---|
| 特になし | footerタグにはグローバル属性以外の特別な属性はない | – |
footerタグの基本的な使い方
以下の例では、Webページ全体のフッターを作成し、著作権情報とナビゲーションを配置しています。
<footer>
<p>© 2025 MyWebsite. All rights reserved.</p>
<nav>
<a href="/privacy-policy">プライバシーポリシー</a> |
<a href="/contact">お問い合わせ</a>
</nav>
</footer>実行例：
footerタグの応用：記事ごとのフッター
記事（articleタグ）ごとにfooterを設定することも可能です。
<article>
<h2>最新ニュース</h2>
<p>これはニュース記事の内容です。</p>
<footer>
<p>投稿日: 2025年1月30日 | 著者: John Doe</p>
</footer>
</article>実行例：
最新ニュース
これはニュース記事の内容です。
footerタグの応用：固定フッターの作成
CSSを使うと、画面下部に固定されるフッターを作成できます。
footer.fixed {
position: fixed;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}HTMLコード：
<footer class="fixed">
<p>© 2025 MyWebsite. All rights reserved.</p>
</footer>実行例：
このページの最下層に常に表示されています。
注意事項
- footerタグはセクション（article、sectionなど）の中でも使用可能だが、主にページ全体のフッターとして使われる。
- 複数のfooterタグを1ページ内で使用することができる。
- デザインを調整する場合はCSSを活用する。
- ナビゲーションリンクや著作権表記を適切に配置することで、ユーザーの利便性が向上する。
よくある質問
- Q: footerタグは何のために使われますか？
- A: Webページやセクションのフッター部分を定義するために使用されます。通常、著作権情報やナビゲーションリンクが含まれます。
- Q: footerタグは1ページに複数回使用できますか？
- A: はい、ページ全体のフッターと、各記事やセクションごとのフッターに分けて使用できます。
- Q: footerタグのデフォルトの表示スタイルは？
- A: ブロック要素として扱われ、デフォルトでは特にスタイルは適用されません。CSSを使用してカスタマイズできます。
- Q: footerタグを画面下部に固定する方法は？
- A: CSSの
position: fixed;とbottom: 0;を使用すると、フッターを画面下部に固定できます。 - Q: footerタグとheaderタグの違いは？
- A: footerタグはページやセクションの最下部に配置されるのに対し、headerタグはヘッダー（ページの上部）を定義するために使用されます。
まとめ
footerタグは、ページやセクションのフッター部分を定義する。- 著作権情報、ナビゲーション、連絡先などの情報を配置するのに適している。
- 記事ごとやセクションごとのフッターとしても使用可能。
- CSSを使用してレイアウトやデザインを自由にカスタマイズできる。
- 固定フッターを作成する場合は、CSSの
position: fixed;を活用する。