CSSでフッターをウィンドウ最下部に固定する方法【初心者向け】
初心者向けにCSSでフッターをウィンドウ最下部に固定する方法について解説しています。ページのコンテンツの量が多ければ問題ないのですが少ない場合はフッターがページの真ん中に表示されてしまうことがあります。コンテンツ量が少なくてもフッターをページ最下部に固定する方法について解説しています。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
CSSでフッターをウィンドウ最下部に固定する方法について解説します。ページのコンテンツ量が少ない場合でもフッター部分がページ最下部に固定されるようにします。
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
CSSでフッターをウィンドウ最下部に固定する方法について詳しく説明していくね！
お願いします！
フッターを最下部に表示する書き方
ウェブデザインでは、フッターが画面下部にくっついているものは結構多くあるのではないかと思います。
コンテンツがたくさんあって、全てのページが自然と縦長になるサイトなら全く問題ないのですが、コンテンツが少ないページがある場合、フッターを下に固定させ、なおかつ長いページのときは成り行きの位置に配置することが必要な場合があります。
そんな時に使える、jQueryを使わずに、CSSだけで下部に固定させる方法を紹介します。
まずはHTMLを用意します。
<body>
<div class="wrapper">
<div class="container">
<p>現在、このサイトは製作中です。</p>
</div>
<footer>
<p>(c)copy right</p>
</footer>
</div>
</body>
それではCSSを書いていきましょう。
実際に書いてみよう
まずは全体の枠の高さの最小値を決めます。
高さの最小値なので、min-heightを使います。
そしてブラウザによって高さは異なるので、vhという、画面の大きさを基準にした単位を使用します。
100vh が、ブラウザの画面の高さになりますので、まず.wrapper に min-height: 100vh;と指定します。
.wrapper{
min-height: 100vh;
}
footer{
/*footerの装飾*/
width: 100%;
background-color: #89c7de;
color: #fff;
text-align: center;
padding: 30px 0;
}
次に、position の設定を書いていきましょう。
.wrapperを相対位置として、その中でfooterの位置を最下部に決めるようにします。
.wrapper{
min-height: 100vh;
position: relative;/*←相対位置*/
}
footer{
width: 100%;
background-color: #89c7de;
color: #fff;
text-align: center;
padding: 30px 0;
position: absolute;/*←絶対位置*/
bottom: 0; /*下に固定*/
}
これで、最下部に固定されました。
しかし、このままでは下図のようにコンテンツと被ってしまうタイミングがあります。
これを解決するには、padding-bottomとbox-sizingを使います。
.wrapperにまず、footerの高さ分のpadding-bottomを与えます。
今回は、だいたい120pxくらいでしょうか・・・。
このままだと、コンテンツが少ない時も下にはみ出てしまうので、続けてbox-sizing: border-box; を与えて、paddingを含めて、min-height: が100vhになるようにします。
.wrapper{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom: 120px;/*←footerの高さ*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
footer{
width: 100%;
background-color: #89c7de;
color: #fff;
text-align: center;
padding: 30px 0;
position: absolute;/*←絶対位置*/
bottom: 0; /*下に固定*/
}
これで、コンテンツが少ない時も、下に固定されるfooterを作ることができました。
| この記事を監修してくれた方
和田 祥子（わださちこ） テニスと音楽とビールが好きです。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
