CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで固定フッター（スティッキーフッター）を作成する方法

CSSを使えば、スクロールしても常に画面下部に表示され続く「固定フッター（スティッキーフッター）」を簡単に作成できます。

固定フッターの基本原理

固定フッターを実現するポイントは、position: fixed; を使用することです。以下の3つのプロパティを組み合わせることで、要素を画面の最下部に固定できます。

  • position: fixed; — 要素をビューポートに対して固定配置にします
  • bottom: 0; / left: 0; — 画面の左下の端に位置合わせします
  • width: 100%; — フッターを画面幅いっぱいに広げます

実装例

以下は、CSSで固定フッターを作成する具体的なコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .footer {
        font-size: 20px;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: rgb(50, 6, 100);
        color: white;
        text-align: center;
    }
</style>
</head>
<body>
<h1>固定/スティッキーフッターの例</h1>
<div class="footer">
<p>All rights reserved ©</p>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、ページのコンテンツがどれだけ短くても、紫の背景を持つフッターが常にブラウザ画面の最下部に固定されて表示されます。ページをスクロールしても、フッターは画面下端から動かず、常にユーザーの目に触れる状態を保ちます。

補足：注意点と応用

コンテンツとの重なりに注意

position: fixed; を使ったフッターは通常のドキュメントフローから外れるため、ページ末尾のコンテンツがフッターに隠れることがあります。その場合は body やメインコンテンツに padding-bottom を設定して余白を確保しましょう。

body {
    padding-bottom: 60px; /* フッターの高さ分の余白 */
}

position: sticky; との違い

CSSには position: sticky; という指定方法もあります。これは「スクロール位置がしきい値に達するまでは通常通り流れに沿い、達した時点で固定される」という挙動です。常に画面下部に表示したい場合は fixed、コンテンツの終わりまで来たら表示させたい場合は sticky を使うと使い分けがしやすくなります。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {