CSSでfixedを使ってスクロールしても位置を固定する方法を初心者向け解説

fixedでスクロールしても位置を固定する方法

先生と生徒の会話形式で理解しよう

生徒

「先生、スクロールしてもボタンやヘッダーを画面の同じ場所に固定したいです。どうすればいいですか？」

先生

「その場合はCSSのpositionプロパティでfixedを使います。fixedを指定すると、その要素はブラウザの画面を基準に固定され、スクロールしても常に同じ位置に表示されます。」

生徒

「absoluteやrelativeとどう違うんですか？」

先生

「absoluteは親要素を基準に位置を決めますが、fixedは画面そのものを基準にするので、ページをスクロールしても動きません。主にヘッダーやフッター、サイドメニューで使います。」

1. fixedを使った要素の基本的な使い方

CSSのposition: fixedは、特定の要素をブラウザの表示画面（ビューポート）に対して固定するプロパティです。通常、ウェブページはスクロールすると上のコンテンツは見えなくなりますが、fixedを指定した要素は、ユーザーがどれだけページを下に読み進めても、常に画面上の決まった位置に居続けます。

基本的な使い方は、CSSで「position: fixed;」と指定し、続けて「画面のどこに配置するか」を top（上）、bottom（下）、left（左）、right（右） の4方向から距離を指定するだけです。例えば、画面の一番上にメニューを固定したい場合は「top: 0;」、右下にボタンを置きたい場合は「bottom: 20px; right: 20px;」のように記述します。

プログラミングに慣れていない方でも、以下のサンプルコードをコピーして試すことで、簡単に「スクロールしても付いてくるボタン」を作成できます。背景色が青いボタンが、画面の右下にぴたっと固定される様子を確認してみましょう。


<style>
    /* 固定したい要素のスタイル */
    .fixed-sample {
        position: fixed; /* 画面に対して固定する設定 */
        bottom: 20px;    /* 画面の下から20pxの位置 */
        right: 20px;     /* 画面の右から20pxの位置 */
        background-color: #007bff;
        color: white;
        padding: 15px 25px;
        border-radius: 30px;
        text-decoration: none;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 9999;   /* 他の要素より手前に表示させる */
    }

    /* ページのスクロールを確認するためのダミーテキスト */
    .content-area {
        height: 1000px;
        padding: 20px;
        background: linear-gradient(#f8f9fa, #e9ecef);
    }
</style>

<div class="content-area">
    <p>このエリアは長いコンテンツです。下にスクロールしてみてください。</p>
    <div class="fixed-sample">
        <i class="bi bi-arrow-up-circle"></i> TOPへ戻る
    </div>
</div>

ブラウザ表示

このように、fixedを使うことで「お問い合わせフォームへのリンク」や「ナビゲーションメニュー」など、ユーザーにいつでも見てほしい情報を効果的に配置できます。設置する際は、メインの文章が隠れて読みづらくならないよう、余白（padding）や配置場所を工夫するのがSEOやユーザビリティの観点からも重要です。

2. 固定ボタンのHTMLとCSS例

ウェブサイトを閲覧している際、右下に「ページトップへ戻る」ボタンや「お問い合わせ」ボタンがずっと表示されているのを見たことはありませんか？これは、position: fixedという設定を使うことで、初心者の方でも数行のコードで簡単に実装できます。

この設定の最大の特徴は、ボタンの配置基準が「ページの内容」ではなく「ブラウザの画面（ウィンドウ）」になる点です。そのため、ユーザーが長い記事を読み進めても、ボタンが画面外に消えてしまうことがありません。以下のサンプルコードでは、実際に画面の右下に丸みのある青いボタンを配置し、スクロールしても追従する様子を確認できます。


<style>
    /* ボタン全体のデザイン設定 */
    .fixed-button {
        position: fixed;   /* 画面に対して位置を固定する */
        bottom: 30px;      /* 画面の下端から30px浮かせる */
        right: 30px;       /* 画面の右端から30px離す */
        background-color: #007bff; /* ボタンの色（青色） */
        color: white;      /* 文字の色（白色） */
        padding: 12px 24px; /* ボタン内の余白（上下 左右） */
        border-radius: 50px; /* 角を丸くしてボタンらしくする */
        box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 浮き出て見える影 */
        cursor: pointer;   /* マウスを乗せた時に指マークにする */
        font-weight: bold; /* 文字を太くして読みやすくする */
        z-index: 1000;     /* 他の画像や文字の下に隠れないようにする */
    }
</style>

<div class="fixed-button">
    <i class="bi bi-chevron-up"></i> TOPへ戻る
</div>

<div style="height: 1000px; padding: 20px; background: #f0f2f5;">
    <p>下にスクロールしてみてください。右下のボタンが動かずに残ります。</p>
</div>

ブラウザ表示

コードのポイントは、bottomとrightの数値を変えるだけで、好きな場所に配置できる点です。例えば「左上に置きたい」場合は、bottomをtopに、rightをleftに変更するだけです。また、z-indexを指定しておくことで、記事内の画像や他の文章が重なった際でも、ボタンが常に一番手前に表示されるようになり、ユーザーがいつでも操作できるようになります。

3. fixed要素のメリットと活用例

CSSのposition: fixedを活用する最大のメリットは、ユーザーがページをどこまでスクロールしても、特定の要素を常に画面内の決まった位置に表示させ続けられる点にあります。これにより、重要なナビゲーションやアクションボタンへのアクセスを劇的に向上させることができます。

例えば、以下のようなケースで非常によく使われています。

固定ヘッダー： 常にメニューを表示させ、他ページへの移動をスムーズにする。
コンタクトボタン： 「お問い合わせ」や「予約」ボタンを常駐させ、成約率（CVR）を高める。
SNSシェアボタン： 記事の途中でいつでも拡散できるように画面端に配置する。
ページトップへ戻るボタン： 長い記事でも一瞬で上部に戻れるようにして離脱を防ぐ。

プログラミング未経験の方でも直感的に理解できるよう、画面の右下に「お問い合わせ」ボタンを固定するサンプルを用意しました。以下のコードを参考に、どのように画面にくっついてくるかを確認してみてください。


<style>
    /* 画面の右下にボタンを固定する設定 */
    .fixed-contact {
        position: fixed;   /* 画面に対して位置を固定 */
        bottom: 20px;      /* 画面の下から20pxの位置 */
        right: 20px;       /* 画面の右から20pxの位置 */
        background-color: #ff5722; /* 目立つオレンジ色 */
        color: #ffffff;    /* 文字は白 */
        padding: 15px 20px;
        border-radius: 8px;
        font-weight: bold;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 1000;     /* 最前面に表示 */
        display: flex;
        align-items: center;
    }

    /* スクロールを確認するための背景設定 */
    .scroll-helper {
        height: 800px;
        padding: 20px;
        background: #fdfdfd;
        border: 2px dashed #ccc;
    }
</style>

<div class="scroll-helper">
    <p><i class="bi bi-info-circle"></i> 下へスクロールしてみましょう。</p>
    <p>オレンジ色のボタンは、画面の右下にずっと残ります。</p>
    
    <a href="#" class="fixed-contact">
        <i class="bi bi-envelope-fill me-2"></i> お問い合わせはこちら
    </a>
</div>

ブラウザ表示

このように、fixedを適切に使うことで「ユーザーが探す手間」を省くことができ、サイトの利便性が向上します。ただし、画面を覆い隠しすぎると逆効果になるため、スマートフォンのような小さな画面では、ボタンのサイズや余白に配慮することがSEOやユーザー体験（UX）の向上につながります。

4. fixed要素の注意点

CSSのposition: fixedは非常に便利な機能ですが、使い方を一歩間違えるとユーザーにとって使いにくいサイトになってしまいます。特に注意すべきは「要素の重なり」と「画面占有率」です。

fixedを指定した要素は、通常のレイアウトの流れから外れて「浮いた状態」になります。そのため、後に続くコンテンツが固定要素の下に潜り込んで隠れてしまう現象が起こります。これを防ぐには、固定ヘッダーの高さ分だけ、最上部の要素にmargin-topやpadding-topを設定して余白を確保することが鉄則です。

また、スマートフォンのような画面の小さいデバイスでは、固定要素が大きすぎると閲覧の邪魔になり、Googleの掲げるユーザー体験（UX）の評価を下げる原因にもなりかねません。以下のサンプルで、固定要素によってコンテンツが隠れる問題と、その対策方法を確認してみましょう。


<style>
    /* 固定ヘッダーの設定 */
    .sample-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #333;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    /* 注意：固定要素の高さ分だけ余白を作らないと文字が隠れます */
    .main-content {
        padding-top: 70px; /* ヘッダー(60px)より少し多めに余白をとる */
        padding-left: 15px;
        padding-right: 15px;
        line-height: 1.6;
    }

    .alert-box {
        background-color: #fff3cd;
        border: 1px solid #ffeeba;
        padding: 15px;
        border-radius: 5px;
    }
</style>

<div class="sample-header">
    <i class="bi bi-list me-2"></i> 固定メニュー（高さ60px）
</div>

<div class="main-content">
    <div class="alert-box">
        <p><i class="bi bi-exclamation-triangle-fill"></i> <strong>重要：</strong></p>
        <p>この文章に「padding-top」を設定していないと、上の黒いヘッダーの下に文字が入り込んで読めなくなってしまいます。固定レイアウトを作る時は、必ず後続の要素に余白（マージンやパディング）を設ける癖をつけましょう。</p>
    </div>
    <p>特にスマホサイトでは、画面の上下を固定要素で埋め尽くすと、実際に記事を読める範囲が極端に狭くなってしまいます。ユーザーがストレスを感じないよう、固定する要素は必要最小限に絞るのがSEOやアクセシビリティの観点からも推奨されます。</p>
</div>

ブラウザ表示

最後に、z-indexの管理も重要です。他の要素と重なった際に、どちらを前面に出すかを数字で指定しますが、あまりに大きな数字を使いすぎると管理が複雑になります。サイト全体の階層構造を意識して、適切な数値を設定するようにしましょう。

5. fixedとabsoluteとの違いを理解しよう

absoluteは親要素を基準に位置を決めますが、fixedは画面そのものを基準にするため、スクロールしても動きません。absoluteはコンテンツの中での位置調整に向いており、fixedはヘッダーやフッター、サイドボタンなど、常に画面上に表示したい要素に向いています。

初心者にわかりやすく例えると、absoluteは「机の上でノートを置く」、fixedは「窓ガラスに貼った付箋のように常に見える」というイメージです。

まとめ

今回はCSSのpositionプロパティの中でも特に利用頻度の高いfixedについて、初心者の方にも理解しやすいように基礎から応用まで丁寧に解説しました。fixedを使うことで、スクロールしても画面上の同じ位置に要素を固定できるため、ユーザーにとって見やすく操作しやすいインターフェースを実現できます。特に、ヘッダー固定、フッター固定、トップへ戻るボタン、ナビゲーションメニュー、サイドバー、問い合わせボタンなど、現代のWebサイトでは欠かせない技術の一つです。

position fixedの最大の特徴は、ブラウザの画面そのものを基準にして位置が決まる点です。これにより、スクロールしても要素が動かず、常にユーザーの視界に入り続けます。これはユーザビリティ向上の観点から非常に重要であり、離脱率の低下や操作性の改善にもつながります。検索エンジン対策の観点でも、ユーザー体験の向上は重要な評価要素となるため、適切にfixedを活用することは結果的にサイト全体の評価向上にもつながります。

一方で、fixedを使う際にはいくつか注意点もあります。例えば、要素が他のコンテンツの上に重なってしまう問題や、スマートフォンなどの小さい画面で表示領域を圧迫してしまう点です。そのため、サイズや配置を適切に調整し、必要最低限の要素のみを固定することが大切です。また、z-indexを調整して重なり順を制御することも重要なテクニックです。

absoluteとの違いについても理解しておくと、より柔軟にレイアウト設計ができるようになります。absoluteは親要素を基準に配置されるのに対し、fixedは画面基準という違いがあります。この違いを正しく理解することで、状況に応じた最適なレイアウト設計が可能になります。

初心者の方はまず、シンプルな固定ボタンやヘッダーから実装してみるのがおすすめです。実際に手を動かしながら確認することで、position fixedの挙動やメリットをより深く理解できるようになります。CSSレイアウトの基礎として非常に重要な内容なので、繰り返し練習してしっかり身につけていきましょう。

サンプルプログラムで復習

ここでは、固定ヘッダーとトップへ戻るボタンを組み合わせた実用的なサンプルを紹介します。実際のWeb制作でもよく使われる構成なので、しっかり理解しておくと役立ちます。


<style>
    body {
        height: 2000px;
        margin: 0;
    }
    .fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #333;
        color: white;
        padding: 15px;
        text-align: center;
        z-index: 1000;
    }
    .content {
        margin-top: 70px;
        padding: 20px;
    }
    .fixed-top-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #007bff;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
    }
</style>

<div class="fixed-header">固定ヘッダー</div>

<div class="content">
    <h1>コンテンツエリア</h1>
    <p>スクロールしてもヘッダーとボタンは固定されます。</p>
</div>

<div class="fixed-top-button">トップへ戻る</div>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「fixedを使うとスクロールしても要素が動かない理由がよくわかりました。画面を基準にしているんですね。」

先生

「その通りです。ブラウザの表示領域を基準にしているので、ページのスクロールとは関係なく固定されます。」

生徒

「トップへ戻るボタンやヘッダーに使う理由も理解できました。ユーザーにとって便利ですね。」

先生

「はい。ユーザーの操作性を高める重要なポイントです。ただし、使いすぎると逆に邪魔になるのでバランスが大切です。」

生徒

「absoluteとの違いもはっきりしました。親要素基準か画面基準かの違いですね。」