HTML要素 ・ ページ構造
<footer>
フッター領域
ページやセクションの末尾に置く情報（著作権表示、連絡先、関連リンクなど）をまとめる要素です。
01
サンプルコード
HTML
1<footer class="site-footer">
2 <p>Cafe Mimosa ／ 東京都千代田区1-1</p>
3 <small>© 2026 Cafe Mimosa</small>
4</footer>
CSS
1.site-footer {
2 padding: 16px 20px;
3 background: #201f1d;
4 color: #ccc;
5 text-align: center;
6 font-size: 13px;
7}
8.site-footer p {
9 margin: 0 0 4px;
10}
02
実行結果
ブラウザでの表示
03
解説
footer は、その範囲の「終わり」に置く情報をまとめる要素です。ページ全体の下部に置くサイトフッターが代表的です。
article の中に置くと、その記事の著者・タグ・関連リンクなどを表せます。
著作権表示のような注記は、小さな注釈を表す small 要素で書くのが適切です。
04
応用例・注意点
footer に入れる主な内容
| 内容 | 説明 |
|---|---|
著作権表示 | © 年 サイト名（small 要素で） |
連絡先 | 住所・電話番号（address 要素も使える） |
サイトマップ | 主要ページへのリンク |
SNSリンク | 公式アカウントへのリンク |
フッターを画面下に固定する
内容が少ないページでも、フッターを画面の一番下に置けます。
CSS
1body {
2 min-height: 100vh;
3 display: flex;
4 flex-direction: column;
5}
6main {
7 flex: 1;
8}
注意点
- 01footer の中に header や footer は入れられません。
- 02名前は「フッター」でも、必ずしも画面の最下部に置く必要はありません。