CSSを使用してフッターを最下部に固定する方法を4つまとめました。
スポンサーリンク
Flexboxを使用する
Flexboxを使うと、簡単にフッターを最下部に固定できます。以下の手順で実装します。
HTMLの準備
まず、HTMLの構造を以下のようにします。
<body>
<div class="wrapper">
<!-- ここにコンテンツを配置 -->
</div>
<footer>フッターのコンテンツ</footer>
</body>
CSSの設定
次に、CSSで以下のようにスタイルを定義します。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.wrapper {
flex: 1;
}
footer {
flex-shrink: 0;
}
これで、フッターが常に最下部に表示されるようになります。
Gridを使用する
CSS Gridを活用する方法もあります。以下の手順で実装します。
Step 1: HTMLの準備
まず、HTMLを以下のように修正します。
<body>
<div class="container">
<!-- ここにコンテンツを配置 -->
</div>
<footer>フッターのコンテンツ</footer>
</body>
CSSの設定
次に、CSSで以下のようにスタイルを定義します。
body {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
.container {
/* ここにコンテンツのスタイルを追加 */
}
footer {
/* フッターのスタイルを追加 */
}
これで、フッターが画面の最下部に固定されます。
positionプロパティを使用する
positionプロパティを使ってフッターを最下部に固定する方法もあります。以下のCSSコードを追加します。
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
Stickyフッターを作成する
Stickyポジションを使用すると、フッターを最下部に固定できます。
.footer {
position: sticky;
bottom: 0;
}
まとめ
CSSを使用してフッターを最下部に固定する方法を4つまとめました。Flexbox、Grid、positionプロパティ、Stickyポジションを使用することでフッターを最下部に固定できるのでぜひ試してみてください。
▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ
2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...
スポンサーリンク
