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

CSSでスティッキーイメージ（追従画像）を作成する方法【初心者向け解説】

Webページをスクロールしても画像が画面上に固定され続ける「スティッキーイメージ」は、position: sticky を使うことで簡単に実装できます。この記事では、CSSだけでスティッキーイメージを作成する具体的なコード例と、その仕組みをわかりやすく解説します。

スティッキーイメージとは？

スティッキー（sticky）配置とは、要素が通常のドキュメントフロー内に表示されつつ、スクロールして指定した位置に達すると、その位置に「貼り付いて」動かなくなる配置方法です。画像に対してこの設定を行うことで、ページを下にスクロールしても画像が画面上部に留まり続ける効果が得られます。

実装コード例

以下は、CSSでスティッキーイメージを作成する完全なHTMLコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
   position: sticky;
   top: 0;
   width: 300px;
   height: 300px;
}
</style>
</head>
<body>
<h1>ヘッダーテキスト</h1>
<img src="https://i.picsum.photos/id/721/400/400.jpg">
<h1>ヘッダーテキスト</h1>
<h1>ヘッダーテキスト</h1>
<h1>ヘッダーテキスト</h1>
<p style="font-size: 40px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat odio ratione officia quod qui blanditiis animi! Repudiandae culpa recusandae dolor id soluta porro commodi quidem, incidunt voluptatum vitae similique nesciunt obcaecati odit enim repellat doloribus.</p>
</body>
</html>

コードのポイント解説

このコードで重要なのは、img要素に指定された以下の2つのプロパティです。

  • position: sticky; … 要素をスティッキー配置に指定します。これにより、スクロール時に要素が指定位置で固定されるようになります。
  • top: 0; … ビューポート（画面）の上端から0pxの位置で要素を固定します。この値を変更すれば、任意の位置で画像を止めることも可能です。

また、width と height を300pxに設定することで、画像の表示サイズを明示的に指定しています。スティッキー配置は親要素の範囲内でのみ機能するため、実際のサイトでは親コンテナの高さにも注意が必要です。

実行結果

上記のコードを実行すると、まず次のようにヘッダーテキストと画像が通常通り表示されます。

CSSでスティッキーイメージ（追従画像）を作成する方法【初心者向け解説】

ここから少し下へスクロールすると、画像が元の位置に留まり続けることが確認できます。テキストだけが流れていき、画像だけが画面上部に固定された状態になります。

CSSでスティッキーイメージ（追従画像）を作成する方法【初心者向け解説】

ブラウザ対応について

position: sticky は、Chrome、Firefox、Safari、Edgeなど主要なモダンブラウザすべてでサポートされています。ただし、古いバージョンのInternet Explorerでは動作しないため、対応が必要な場合はフォールバックとして position: fixed やJavaScriptによる制御を検討しましょう。

まとめ

CSSの position: sticky と top プロパティを組み合わせるだけで、JavaScriptを使わずにスティッキーイメージを実装できます。サイドバーの目次や商品画像の固定表示など、ユーザビリティ向上に役立つテクニックなので、ぜひ活用してみてください。

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

    CSSを使えば、スクロールしても常に画面下部に表示され続く「固定フッター（スティッキーフッター）」を簡単に作成できます。固定フッターの基本原理固定フッターを実現するポイントは、position: fixed; を使用することです。以下の3つのプロパティを組み合わせることで、要素を画面の最下部に固定できます。position: fixed; — 要素をビューポートに対して固定配置にしますbottom: 0; / left: 0; — 画面の左下の端に位置合わせしますwidth: 100%; — フッターを画面幅いっぱいに広げます実装例以下は、CSSで固定フッターを作成する具体的なコード例です。&

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

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