CSSスティッキーフッターの実装方法｜固定フッターとの違いを解説
スティッキーフッターと固定フッター（fixed footer）は混同されやすいですが、実は異なるレイアウトパターンです。スティッキーフッターとは、ページのコンテンツが画面を埋めきらない場合にフッターを常に画面の最下部に張り付け、コンテンツが長い場合にはコンテンツの末尾にフッターを配置するパターンのことです。一方、固定フッターは、ユーザーがページをどれだけスクロールしても、常に画面の下部に表示され続けるフッターを指します。
以下の2つのコード例で、それぞれの違いを確認してみましょう。
固定フッター（Fixed Footer）の実装例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>固定フッター</title>
</head>
<style>
body {
width: 100%;
margin: 0 auto;
text-align: center;
}
header {
background: orange;
height: 100px;
display: inline-block;
width: 100%;
}
p {
text-align: left;
width: 80%;
margin: 0 auto;
line-height: 5rem;
font-size: 2rem;
text-indent: 5rem;
}
footer {
background: black;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
<body>
<header>
<h1>これはヘッダーです</h1>
</header>
<div>
<h2>これはウェブサイトのコンテンツです。</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Aspernatur cum aliquid nostrum dolore sunt ex exercitationem,
enim provident quia laudantium, blanditiis repellendus similique
in possimus, nisi voluptatem? Quibusdam, suscipit impedit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
veritatis doloremque recusandae similique mollitia quod impedit,
rerum inventore beatae quia vel aperiam maiores corrupti tenetur
illo praesentium repudiandae a distinctio?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta
saepe, reiciendis in maxime perspiciatis cum similique a quis
accusamus blanditiis harum voluptates at doloribus autem numquam
sint? Qui, tempora ratione!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde,
deserunt placeat? Laborum voluptates minus, adipisci odit
repellat corrupti libero! Asperiores delectus quasi debitis
mollitia eum et vel recusandae quas esse.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestias ad dolorem rerum suscipit eos eius libero animi omnis,
ea esse distinctio doloremque corporis, a quidem inventore sequi
nostrum aut impedit.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quod ipsum maiores, minus non atque asperiores corrupti
placeat nulla temporibus est libero numquam ad culpa architecto
reprehenderit nemo doloribus ipsa?
</p>
</div>
<footer>
<h5>これは固定フッターです。</h5>
</footer>
</body>
</html>スティッキーフッター（Sticky Footer）の実装例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>スティッキーフッター</title>
</head>
<style>
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-header, .page-footer {
flex-shrink: 0;
}
h1, h2, h3, h4, h5 {
text-align: center;
}
.orange {
background: orange;
}
.page-body {
background: blue;
flex-grow: 1;
}
.page-body p {
text-align: left;
width: 80%;
margin: 0 auto;
line-height: 4rem;
font-size: 1.8rem;
text-indent: 4rem;
}
.black {
background: black;
color: white;
}
</style>
<body>
<div class="container">
<header class="page-header orange">
<h1>これはヘッダーです</h1>
</header>
<div class="page-body">
<h2>これはウェブサイトのコンテンツです。</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
</div>
<footer class="page-footer black">
<h5>これはスティッキーフッターです。</h5>
</footer>
</div>
</body>
</html>スティッキーフッターの仕組み：Flexboxの活用
2つ目の例では、Flexboxのプロパティを組み合わせることでスティッキーフッターを実現しています。それぞれの役割は以下のとおりです。
- min-height: 100vh：コンテナの最小の高さをビューポート（画面）の高さいっぱいに設定します。これにより、コンテンツが少ない場合でもフッターが画面の下部まで届きます。
- flex-direction: column：ヘッダー・本文・フッターを縦方向に並べます。
- flex-grow: 1：本文エリアが余ったスペースをすべて埋めるため、フッターは常にコンテンツの最下部に配置されます。
- flex-shrink: 0：画面が狭くなったときにヘッダーとフッターが縮まないようにします。
まとめ
固定フッターは position: fixed を使って画面の下部に固定するのに対し、スティッキーフッターはFlexboxの flex-grow と flex-shrink プロパティを活用して、コンテンツの下部にフッターを配置します。それぞれのコード例で、フッターの動作の違いに注目してみてください。
実際にコードの値を書き換えながら試してみると、これらのレイアウトパターンへの理解がさらに深まります。ぜひさまざまな値を変更して、挙動の違いを確かめてみましょう。
-
CSSでスティッキー要素を作成する方法｜position: stickyの使い方を解説
CSSでスティッキー（sticky）要素を作成するには、positionプロパティにstickyを指定し、topプロパティで画面上部からの固定位置を設定します。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "
-
CSSで固定フッター（スティッキーフッター）を作成する方法
CSSを使えば、スクロールしても常に画面下部に表示され続く「固定フッター（スティッキーフッター）」を簡単に作成できます。固定フッターの基本原理固定フッターを実現するポイントは、position: fixed; を使用することです。以下の3つのプロパティを組み合わせることで、要素を画面の最下部に固定できます。position: fixed; — 要素をビューポートに対して固定配置にしますbottom: 0; / left: 0; — 画面の左下の端に位置合わせしますwidth: 100%; — フッターを画面幅いっぱいに広げます実装例以下は、CSSで固定フッターを作成する具体的なコード例です。&