CSSでスティッキー要素を作成する方法｜position: stickyの使い方を解説
CSSでスティッキー（sticky）要素を作成するには、positionプロパティにstickyを指定し、topプロパティで画面上部からの固定位置を設定します。以下に具体的なコード例を示します。
コード例
<!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;
margin: 0px;
padding: 0px;
height: 150vh; /* スクロールバーを発生させるため */
}
div.sticky {
position: sticky;
top: 0;
background-color: rgb(52, 21, 110);
color: white;
padding: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Sticky Element Example</h1>
<h2>Random Header Text</h2>
<div class="sticky">Sticky Element</div>
<p style="font-size: 35px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta quidem porro quia.
</p>
</body>
</html>
実行結果
上記のコードをブラウザで表示すると、次のようになります。
少し下にスクロールすると、スティッキー要素はposition: fixedを指定した場合と同様に、画面上部に固定されたまま表示されます。
position: stickyの仕組みとポイント
position: stickyは、通常はrelativeと同じように文書の流れに従って配置され、スクロールによって指定したしきい値（この例ではtop: 0）に達すると、fixedのように固定される特殊な配置方法です。
- しきい値の指定が必須：
top・bottom・left・rightのいずれかを指定しないと、スティッキー効果は機能しません。 - 親要素の範囲内でのみ有効：スティッキー要素は親コンテナ内でのみ固定され、親要素が画面外に出ると一緒にスクロールしていきます。
- ブラウザ対応：主要なモダンブラウザでは問題なく動作しますが、旧Internet Explorerではサポートされていないため注意が必要です。
-
CSSで固定フッター（スティッキーフッター）を作成する方法
CSSを使えば、スクロールしても常に画面下部に表示され続く「固定フッター（スティッキーフッター）」を簡単に作成できます。固定フッターの基本原理固定フッターを実現するポイントは、position: fixed; を使用することです。以下の3つのプロパティを組み合わせることで、要素を画面の最下部に固定できます。position: fixed; — 要素をビューポートに対して固定配置にしますbottom: 0; / left: 0; — 画面の左下の端に位置合わせしますwidth: 100%; — フッターを画面幅いっぱいに広げます実装例以下は、CSSで固定フッターを作成する具体的なコード例です。&
-
CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック
CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>