【CSS入門】スクロール時に要素を固定するには？
positionプロパティの2つの指定方法を解説
Webサイトを閲覧していると、スクロールしてもヘッダーが常に画面の上部に表示されているサイトを見かけたことがあるのではないでしょうか。
「自分のサイトにも取り入れてみたいけど、どうやって実装するのかわからない」「CSSだけでできるの？」
そんな疑問をお持ちの方も多いと思います。
このような固定表示は、CSSのposition: fixedまたはposition: stickyを使うことで実現可能です。
この記事では、これら2つのプロパティを活用して、スクロール時に要素を固定表示させる方法をわかりやすく解説します。
ぜひ最後までご覧ください！
「position: fixed」で要素を固定する方法
まずは、position: fixedを使って要素を固定する方法をご紹介します。
この指定方法では、ページ読み込み時から要素が特定の位置に固定され、スクロールしても常にその位置に表示され続けます。シンプルで使いやすく、多くのサイトで採用されている基本的な実装です。
【HTML】
<body>
<header class=”site-header”>
<p>スクロールしても固定表示される</p>
</header>
<div class=”content”>
<div class=”box”>ボックス1</div>
<div class=”box”>ボックス2</div>
</div>
</body>
ーーーー
【CSS】
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.site-header {
position: fixed;
top: 0;
width: 100%;
padding: 5px;
background: #333;
color: #fff;
}
.content {
margin-top: 80px;
}
.box {
height: 500px;
width: 500px;
margin: 10px auto;
background: #ccc;
color: #fff;
}
コーディングのポイント！
position: fixedとtop: 0の指定です。
今回は、ページ上部のヘッダーのみを固定させたかったので、top: 0を指定しましたが、
固定する位置は、topのほかにleft、right、bottomなども指定できます。
実際に、ページ上部に戻るボタンを画面右下に固定表示しているサイトなどもよく見かけますね。
（※固定している箇所がわかりやすくなるように、要素のサイズや色も適宜調整しています。
「position: sticky」で要素を固定する方法
2つ目の方法として、position: stickyを使って要素を固定する方法をご紹介します。
このプロパティは、position: fixedとは少し異なり、「ある特定の位置までスクロールされたときに」要素が固定されるという仕組みです。
たとえば以下のようなHTML構造で使うことができます：
【HTML】
<body>
<h2 class=”sticky”>見出し1</h2>
<div class=”box”>ボックス1</div>
<h2 class=”sticky”>見出し2</h2>
<div class=”box”>ボックス2</div>
<h2 class=”sticky”>見出し3</h2>
<div class=”box”>ボックス3</div>
</body>
ーーーーー
【CSS】
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sticky {
position: sticky;
top: 0;
z-index: 10;
width: 100%;
margin: 0;
padding: 5px;
background: #333;
color: #fff;
}
.box {
height: 500px;
width: 500px;
margin: 10px auto;
background: #ccc;
color: #fff;
}
コーディングのポイント！
top: 0で固定される位置を指定しています。
スクロール中、見出しが画面上部に到達すると固定され、親要素の範囲を超えると固定が解除される、という動きになります。
動作の仕組みを理解するために、固定位置や親要素を変更して挙動を確認してみると良いでしょう
「position: sticky」を使う際の注意点
position: stickyを使用する際には、いくつか注意しておくべきポイントがあります。
-
対応ブラウザの確認
一部の古いブラウザではstickyがサポートされていない場合があります。幅広いブラウザに対応させたい場合は、代わりにposition: fixedを使うのが確実です。 -
JavaScriptとの併用
stickyのような動きをより細かく制御したい場合は、JavaScriptを併用することで柔軟な実装が可能になります。 -
親要素の
overflow設定に注意
親要素にoverflowプロパティが指定されている場合、visible以外の値だとstickyが正しく機能しないことがあります。初期状態ではvisibleになっているので、特別に指定していなければ問題ありませんが、うまく動かないときはこの点を確認してみましょう。
まとめ
今回は、CSSだけで実装できる「スクロール時に要素を固定する方法」について解説しました。
具体的には、position: fixedとposition: stickyの2つのプロパティを取り上げ、それぞれの特徴や使い方をご紹介しました。
両者には動作の違いがあるため、目的や表示位置に応じて使い分けることが大切です。
たとえば、「ページの上部に常に表示したい」場合はfixed、
「スクロールで特定位置に達したときに固定したい」場合はstickyが適しています。
また、「途中から固定しつつサイズや見た目を変える」といった複雑な動作を加えたい場合には、JavaScriptなどのプログラミングを併用することでより柔軟な表現が可能です。
Webサイトにおける固定表示の実装を検討されている方にとって、この記事が参考になれば幸いです。