[CSSコピペ] Sticky Footer、ヘッダー固定、フッター固定を最も簡単に実装する方法。

2024年1月19日

初心者でもコピー＆ペーストで実装できるpure cssサンプル。スティッキーフッター、スクロール追従コンテナの実践ソースコード。

サイトのデザインや機能において、ヘッダーメニューを追従させたり、フッターを固定して広告やリンクを常に表示させたいケースは多いかと思います。また、スティッキーフッター(Sticky Footer)と呼ばれる、下部に張り付くタイプのフッターも実装されることが多いでしょう。

実装方法はたくさんありますが「position: sticky;」「position: fixed;」を利用するのが最も簡単に実装できます。

本記事ではサイト制作で頻繁に実装する以下について、実践的なソースコードで解説いたします。

• スティッキーフッター(Sticky Footer)
• 固定フッター(スクロール追従)
• 固定ヘッダー(スクロール追従)

スティッキーフッター(Sticky Footer)＋固定ヘッダー(スクロール追従)のCSS/HTMLサンプルソースコード。コピペ可。

早速、ソースコードを掲載します。コピペしてご利用ください。

CSSソースコード　※ダブルクリックでコピペできます

HTMLソースコード　※ダブルクリックでコピペできます

実行結果

See the Pen
position: stickyの検証① by KodoCode (@KodoCode)
on CodePen.

簡単に解説しておきましょう。

ヘッダー部分については、「position: sticky;」「top: 0vh;」を設定するだけで、固定ヘッダー(スクロール追従)になります。上記のサンプルをスクロールさせるとスクロールが付いてくるのがわかるかと思います。

注意すべき点は「position: sticky;」を使用すると、自動的に親要素がsticky用のコンテナになる点です。必要に応じて親要素に適切なCSSを適用してください。

スティッキーフッター(Sticky Footer)については、「position: sticky;」「top: 100vh;」を設定します。

上記サンプルだとわかりにくいですので、本体コンテンツ部分を少なくしたサンプルを以下のとおり用意しました。見ての通り、コンテンツ部分のテキストが少ない場合でも、フッターが下部に張り付いていることがわかるかと思います。

See the Pen
position: stickyの検証② by KodoCode (@KodoCode)
on CodePen.

固定フッター(スクロール追従)＋固定ヘッダー(スクロール追従)のCSS/HTMLサンプルソースコード。コピペ可。

次に固定フッター(スクロール追従)＋固定ヘッダー(スクロール追従)のサンプルを掲載します。固定ヘッダーについては前項と同じとなります。

CSSソースコード　※ダブルクリックでコピペできます

HTMLソースコード　※ダブルクリックでコピペできます

実行結果

See the Pen
position: stickyの検証③ by KodoCode (@KodoCode)
on CodePen.

フッター固定については、「position: fixed;」「bottom: 0vh;」「width: 99%;」を設定しています。

サンプルを動かしてみるとわかるかと思いますが、スクロール位置に関わらずフッターが画面下に固定されていることがわかるかと思います。

「スティッキーフッターと固定フッターの違いがわかりにくい」という方もいるかと思いますので、本記事のサンプルを参考に理解していただければと思います。

なお、フッターが完全固定されているのに対して、「position: sticky;」を使ったヘッダー固定はスクロール時に微妙にヘッダーが動く挙動となります。これが気になる方は、フッターと同じように「position: fixed;」「top: 0vh;」「width: 99%;」とfixedを利用すれば、カッチリと完全固定されたヘッダー固定となります。

お好みに合わせて使い分けてみてください。

See the Pen
CodePen Home position: stickyの検証④ by KodoCode (@KodoCode)
on CodePen.

以上となります。