【CSS】フッターを画面下部に固定する方法を解説！
Webサイトのフッター、中途半端な位置に浮いていませんか？
Webサイトを制作していると、特にコンテンツ（情報量）が少ないページで「フッターが浮いてしまい、画面の下部に余白ができてしまう」という問題に直面したことはありませんか？
こういったレイアウト崩れは、見た目の印象を損なうだけでなく、サイト全体の完成度を下げてしまう原因にもなりかねません。
サイトを訪れたユーザーに「あれ、このサイト作りかけなのかな？」といった未完成な印象を与えてしまうだけでなく、フッターに記載された重要な情報（コピーライト、プライバシーポリシー、サイトマップなど）へのアクセスを妨げることにも繋がります。
でも大丈夫です！実は、CSSの指定で簡単に改善できちゃいます。
この記事では、フッターを常に一番下に表示させるための具体的な方法を、初心者の方にも分かりやすく解説していきます。
なぜフッターが浮いてしまうのか？基本的な原因を理解しよう
具体的な解決策に進む前に、まずは「なぜフッターが意図した通りに最下部に配置されないのか」という原因を理解することが大切です。原因が分かれば、解決策の理解も一層深まります。
HTMLの基本的な構造とbody要素の高さ
Webページにおいてフッターが浮いてしまう最も一般的な原因は、body要素の高さが足りないことです。
通常、Webページの各要素は中にあるコンテンツの量によってその高さが決まります。つまり、ページ内のテキストや画像の量が少なければ、それらを包括するbodyタグの高さも画面全体の高さ（ビューポートの高さ）に満たない短いものになります。
これはCSSの基本的な考え方である「ボックスモデル」と関係しています。全てのHTML要素は四角い箱として扱われ、その箱の大きさは基本的に中身によって決まるのです。「bodyという大きな箱の中に、コンテンツという小さな箱が少ししか入っていなければ、bodyの箱も当然小さくなる」というイメージですね。
フッターは通常、bodyタグの最後に配置されるため、body自体の高さが画面の下まで届いていなければ、フッターもその途中の位置で表示が終わってしまう、というわけです。
【実践】CSSでフッターを下部に固定する3つの方法
ここからは具体的な実装方法を見ていきましょう。
ここでは、現代のWeb制作でよく使われる代表的な3つの方法をご紹介します。それぞれに特徴がありますので、ご自身の状況に合わせて最適なものを選んでみてください。
HTMLとCSSの準備
まず、HTMLを以下のような構造にします。
以降、３つの方法において共通のHTMLとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フッターを固定</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<p>ヘッダー</p>
</header>
<main>
<div>コンテンツ</div>
<p>ページの内容</p>
</main>
<footer>
<p>フッター</p>
</footer>
</body>
</html>CSSは次のように記述します。
/* 基本的なリセット */
html, body {
margin: 0;
padding: 0;
height: 100%;
text-align: center;
font-size: 34px;
font-weight: bold;
}
header {
background-color: #2ecc71;
color: white;
padding: 20px;
}
main {
padding: 20px;
}
footer {
background-color: #34495e;
color: white;
padding: 20px;
}
ブラウザにはこのように表示されます。
コンテンツが少なすぎるためにフッターが浮いてしまっていますね。
これをベースに、フッターを固定する記述をしていきます。
1.Flexboxを使ったモダンな解決策
現在、最も主流で、かつシンプルな方法がFlexbox（フレックスボックス）を使う方法です。コードが直感的で、レスポンシブデザインにも柔軟に対応できるため、特別な理由がなければこの方法がおすすめです。
Flexboxを使ったCSS
/* 基本的なリセット */
html, body {
margin: 0;
padding: 0;
height: 100%;
text-align: center;
font-size: 34px;
font-weight: bold;
}
/* bodyにflexを指定 */
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* 画面の高さいっぱいに広げる */
}
header {
background-color: #2ecc71;
color: white;
padding: 20px;
}
main {
flex: 1;
padding: 20px;
}
footer {
background-color: #34495e;
color: white;
padding: 20px;
}
フッターが最下部に固定されました！
詳細をまとめると、
bodyにmin-height: 100vh;を指定し、コンテンツの量に関わらず最低でも画面の高さいっぱいに広がるようにする。bodyをFlexコンテナにするためdisplay: flex;と、子要素を縦方向に並べ、flex-direction: column;を指定する。- メインコンテンツ部分
mainにflex: 1;を指定する。
flex: 1;はflex-grow: 1;、flex-shrink: 1;、flex-basis: 0%;を一度に指定するショートハンド（短縮形）です。この中で特に重要なのがflex-grow: 1;で、『コンテナ内に余った空間があれば、それをすべて自分（この場合はメインコンテンツ）が引き受けて伸びますよ』という宣言になります。
このおかげで、フッターの高さがどれだけ変わろうと、メインコンテンツが柔軟に伸び縮みしてフッターを押し下げてくれるのです。
たったこれだけの記述で、コンテンツが少ないページでもフッターは綺麗に最下部に配置され、コンテンツが多いページでは通常通りコンテンツの下に表示されます。
2.Gridレイアウトを使った方法
次に、CSS Grid Layoutを使う方法です。Flexboxが一次元（縦か横か）のレイアウトを得意とするのに対し、Gridは二次元（縦横）のレイアウトを得意とします。フッターの固定だけであればFlexboxで十分ですが、ページ全体のレイアウトをGridで組んでいる場合には、こちらの方法がより整合性が高くなります。
Gridを使ったCSS
CSSの考え方もFlexboxと似ています。
/* 基本的なリセット */
html, body {
margin: 0;
padding: 0;
height: 100%;
text-align: center;
font-size: 34px;
font-weight: bold;
}
/* bodyにgridを指定 */
body {
display: grid;
grid-template-rows: auto 1fr auto; /* ヘッダー, メイン, フッターの順 */
min-height: 100vh;
}
header {
background-color: #2ecc71;
color: white;
padding: 20px;
}
main {
/* grid-template-rowsで高さを制御するため、flex:1のような指定は不要 */
padding: 20px;
}
footer {
background-color: #34495e;
color: white;
padding: 20px;
}Flexboxの場合と表示結果は同じなので画像は省略します。
bodyにmin-height: 100vh;を指定する。bodyをGridコンテナにするためdisplay: grid;を指定する。grid-template-rowsプロパティで行の高さを定義する。auto 1fr autoとすることで、1行目（ヘッダー）と3行目（フッター）はコンテンツに応じた高さ（auto）、そして2行目（メインコンテンツ）が残りの空間をすべて埋める（1fr）ように指定できる。frという単位は「fraction（分数）」の略で、利用可能なスペースの比率を指定するGridレイアウト独自の単位。
Gridを使うと、行と列のレイアウトをより厳密に制御できるのが魅力です。例えば、サイドバーがあるような複雑な2カラムレイアウトなどもGridを使えば直感的に記述できます。
3.positionプロパティを使ったクラシックな方法
最後に、FlexboxやGridが登場する以前から使われてきた、positionプロパティを使う方法です。古いブラウザへの対応が必要な場合などに選択肢となります。
しかし、この方法は少し注意が必要で、コンテンツとフッターが重なってしまうことも。仕組みをしっかり理解しておきましょう。
positionを使ったCSS
html {
height: 100%;
}
/*bodyにposition:relative;を指定*/
body {
text-align: center;
font-size: 34px;
font-weight: bold;
margin: 0;
min-height: 100%;
position: relative;/* フッターを絶対配置する際の基準点 */
padding-bottom: 80px;/* フッターの高さ分 */
box-sizing: border-box;/* paddingを含めて高さを計算 */
}
header {
background-color: #2ecc71;
color: white;
padding: 20px;
}
main {
padding: 20px;
}
footer {
background-color: #34495e;
color: white;
padding: 20px;
position: absolute;/* bodyを基準に配置 */
bottom: 0;/*下部に固定*/
width: 100%;
height: 80px;/* 高さを固定する */
}- 全体を囲む要素（ここでは
body）にposition: relative;を指定する。 - フッターの「高さ」を固定値で決める（例:
height: 80px;）。 bodyに、フッターの高さと同じ値のpadding-bottomを設定する。これにより、ページ全体の高さが確保され、絶対配置したフッターがコンテンツに重なるのを防ぐことができる。- フッター
footerにposition: absolute;、bottom: 0;、width: 100%;を指定し、body要素の最下部に配置する。
この方法のデメリットは、フッターの高さをCSSで固定する必要がある点です。フッター内のコピーライトの年号が2行になったり、リンクを追加したりして高さが変更になった場合、bodyのpadding-bottomの値も手動で修正する必要があり、メンテナンス性に大きく欠ける場合があります。
どの方法を選ぶべき？特徴を比較してみよう
ここまで3つの方法を紹介してきましたが、「結局どれを使えばいいの？」と思いますよね。
それぞれのメリット・デメリットを整理しました。
各手法のメリット・デメリット
3つの方法の特徴を一覧表にまとめてみました。
| 手法 | メリット | デメリット |
|---|---|---|
| Flexbox | ・記述が非常にシンプル ・フッターの高さが可変でもOK ・モダンブラウザの対応率が高い ・垂直方向の中央揃えなども得意 | ・一部の古いブラウザ（IE10以前など）では対応していない |
| Grid | ・記述がシンプル ・フッターの高さが可変でもOK ・複雑なページ全体のレイアウトにも応用可能 | ・Flexbox同様、古いブラウザでは対応していない ・この目的だけには少し大掛かりに感じる可能性も |
| position | ・古いブラウザにも対応しやすい | ・フッターの高さを固定する必要がある ・HTML/CSSの記述が少し複雑になりがち ・メンテナンス性が低い |
【結論】特別な理由がなければFlexboxが最適解
上記の比較から分かる通り、現代のWeb制作においてはFlexboxを使う方法が最もバランスが取れており、多くの場合で最適解と言えます。
IEのサポートが完全に終了した現在、Flexboxが使えない場面はほとんどありません。
コードの直感的な分かりやすさと、フッターの高さが変わってもCSSを修正する必要がないという柔軟性は、開発効率とメンテナンス性を大きく向上させてくれます。
まとめ
今回は、Web制作で多くの初学者がつまずきがちな「フッターを下部に固定する方法」について、原因から具体的な3つの解決策までを詳しく解説しました。
- フッターが浮く主な原因は、コンテンツ不足により
body要素の高さが画面に満たないこと。 - 解決策として、Flexbox、Grid、positionの3つのアプローチがある。
- 特別な理由がない限り、記述がシンプルで柔軟性が高いFlexboxを使う方法が最もおすすめ。
- Flexboxのポイントは、親要素を
display: flex;にし、可変させたいメインコンテンツにflex: 1;を指定すること。
フッターのレイアウトは、サイト全体の印象を整える重要なポイントです。
ぜひ、この記事で紹介した方法を実際に試してみてください。
