【CSS入門】スクロール時に要素を固定する方法とは？positionプロパティの2つの指定と使い方を解説
ページをスクロールしたときに、ヘッダーが上部に固定されているサイトを見たことはありませんか？
「自分のサイトに取り入れてみたいけど、やり方がわからない」「CSSのみで実装できるの？」
そんな悩みを持っている方もいるかと思います。
この実装は、CSSの「position: fixed」または「position: sticky」を使うことで実現できます。
今回は、2つの指定を使って、スクロール時に要素を固定させる方法を解説していきますね。
ぜひ最後まで読んでください！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
「position: fixed」を使う方法
まずは、「position: fixed」を使って、特定の位置で要素を固定する方法を紹介します。
この方法では、ページを開いた最初から要素は固定され、スクロール時も同じ位置にあり続けます。
基本的な方法で、多くのサイトで利用されていますね。
<body>
<header class="site-header">
<p>スクロールしても固定表示される</p>
</header>
<div class="content">
<div class="box">ボックス1</div>
<div class="box">ボックス2</div>
</div>
</body>headerにクラス名を指定し、この要素を固定します。
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」以外にも「left」「right」「bottom」で指定できます。
数値を指定することで、画面の右下に固定するなどの設定が可能です。
ページ上部に戻るボタンを右下に設置しているサイトをよく見かけますね。
要素を固定する指定以外の部分では、要素の固定が分かりやすいようにサイズや色を調整しています。
「position: sticky」を使う方法
2つ目の方法として、「position: sticky」を使う方法を紹介します。
「position: fixed」と少し異なり、特定位置までスクロールしたときに固定されます。
<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>ここでは、見出しを3つ用意して、この要素を固定します。
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」が指定された要素の親要素の範囲内です。
例えば、section要素で囲っていた場合、sectionの範囲から外れたタイミングで固定解除されます。
ぜひ、位置などを変えて挙動を確認してみてください。
「position: sticky」の注意点
「position: sticky」を使用する際には、対応ブラウザを確認する必要があります。
古いブラウザでも機能を実現したい場合には、「position: fixed」を使いましょう。
「position: sticky」のように途中から固定したい場合には、JavaScriptなどのプログラム言語も活用してみてください。
また、「position: sticky」は、親要素のoverflowプロパティに「visible」以外の値が指定されている場合は、うまく機能してくれません。
「visible」は初期値なのでoverflowプロパティを指定していなければ、特に問題ないです。
期待通りの動作にならないときには、チェックしてみてくださいね。
まとめ：「position: fixed」と「position: sticky」を使い分けよう
今回は、CSSのみでできる、ページスクロール時に要素を固定する方法を解説してきました。
「position: fixed」と「position: sticky」のそれぞれを使う方法ですね。
特徴が少し違うので、条件に合わせて活用しましょう。
「途中から固定する」、「固定するときにサイズを変更する」などは、この方法に加えてJavaScriptなどのプログラムを使います。
興味がある方は、そちらも学習してみてくださいね。
Webサイト内で要素を固定させたいときに、今回の記事が参考になれば幸いです。
プログラミングやパソコンを使って働きたい！
そのように考え、成長しているIT業界への転職を考えている方も増えてきました。
『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』
反対にこのような声も聞く事があります。
そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！
