通常フッター（static）
フロー
フロー内
位置指定
テキストは「行（line box）」の中に配置される
横
- 行ボックスは横いっぱいに広がっている
-
text-align: centerは行ボックス内のテキストをその真ん中にもってくる
縦
-
line-hightは1行分の「行ボックスの高さ」 - デフォルトは文字サイズに応じた高さになる
-
height:100px;とline-height:100px;
→フッターの高さと一行の高さが一緒
→行ボックスがフッターの箱いっぱいに広がる - 文字は行ボックスの中央付近（ベースライン基準）に配置される
→行の高さを箱いっぱいにする
→文字はその行の中央付近にくる
→結果、見た目が縦中央になる
大きさ
-
min-height: 300px;でメインコンテンツは最小でも300pxまでにする - heightでフッター箱の高さ指定
- footerはブロック要素なのでwidthは指定しなくても横いっぱい（100%）になってる
完成コード
ex.css
<style>
* {
box-sizing: border-box;
margin: 0;
}
header {
height: 80px;
background: lightblue;
}
main {
min-height: 300px;
background: #f5f5f5;
}
footer {
height: 100px;
background: seagreen;
color: white;
text-align: center;
line-height: 100px;
}
</style>
ex.ma
<body>
<header>ヘッダー</header>
<main>本文</main>
<footer>フッター</footer>
</body>
固定フッター
フロー
- フロー外(
position:fixed;) - 本文が下に隠れないよう余白調整が必要
位置指定
- bottomやleft
- display は「子要素の並び方」を決めるだけ→親のフロー状態には関与しない
- 今回フッター(フロー外)にflex指定→子であるフッターの「中身」のレイアウトをつくる
-
align-items: center;:縦方向の中央揃え -
justify-content: center;:横方向の中央揃え
大きさ
-
left:0;&right:0;とすると横いっぱいに広がる(100%) - 両端にベタ付けしたい → left:0; right:0;
- 明示的に幅を指定したい → width:100%;
完成コード
ex.css
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding-bottom: 100px;
/* フッター高さ分 */
}
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: seagreen;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
#main {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
border: 3px solid red;
}
</style>
ex.ma
<div id="main">
<h2>本文</h2>
<p style="height:1500px;">スクロール確認用コンテンツ</p>
</div>
<footer id="footer">
固定フッター
</footer>
常に画面下にあるフッター
- min-heightで最低高さを決める
- flex:1で余りを吸収する
→コンテンツが短い場合でも下にくっつく
フロー
フロー内
大きさ
body が縦方向のFlexコンテナ になる
body
├ header
├ main
└ footer
→子要素が縦に並ぶFlexアイテムになる
- main に flex:1→余った高さを全部 main が使う
コンテンツが短い場合
画面高さ 800px
header 100px
main 200px
footer 100px
----------------
合計 400px
→ 800px-400px=400pxが余ってしまう
→ flex:1でflex が付いているmainが400pxを吸収
→ footer が下に押される
コンテンツが長い場合
main 1200px
→ブロック要素（body含む）は中身の高さに合わせて自動で伸びる
→ bodyは中身に合わせて1200px以上に伸びる
→ footerは自然に一番下へ
- bodyにmin-height：最低ラインに中身が届かなかった場合その余りをflex:1が吸収
完成コード
ex.css
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
/* ここが最重要 */
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
/* ← これが本体 */
padding: 20px;
background: #f5f5f5;
}
footer {
background: seagreen;
color: white;
padding: 20px;
text-align: center;
}
</style>
ex.ma
<header>
<h1>ヘッダー</h1>
</header>
<main>
<h2>本文</h2>
<p>コンテンツが短い場合でもフッターは下にくっつきます。</p>
</main>
<footer>
フッター
</footer>