実務でよく使用するposition（ポジション）プロパティの応用的なユースケースを紹介します。
Web制作では、ちょっとしたUIパーツを「どこに・どう配置するか」で使い勝手が大きく変わります。
特に position を使った配置テクニックは、画像にバッジを重ねたり、ページトップボタンを固定したり、モーダルを中央に表示したりと、日常的に登場する重要スキルです。
この記事では、実務でもよく使う4つの定番パターン
・画像右上のバッジ表示
・画面右下のページトップボタン固定
・モーダルウィンドウの中央配置
・スクロール追随の購入ボタン固定
を、初心者でも理解しやすい形でまとめて解説します。
「positionって結局どう使えばいいの？」という疑問を、この記事で一気に解消しましょう。
画像の右上にバッジ（ラベル）を表示する
商品画像の「NEW」「SALE」などのバッジは、absoluteとrelativeの組み合わせで実装できます。
※以下の画像を「pc.png」というファイル名で、CSSと同じフォルダにコピーしてください。
例）style.css
| .thumbnail { position: relative; /* バッジの基準 */ width: 200px; } .thumbnail img { .badge { |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div class=”thumbnail”> <img src=”pc.png” alt=”商品画像”> <span class=”badge”>NEW</span> </div> </body> </html> |
このCSSでは、3つのクラスを使っています。
●.thumbnail:画像とバッジ(ラベル)をひとまとめにする外側の枠
●.thumbnail img:.thumbnail の中にある画像()に対するスタイル
●.badge:「NEW」「SALE」などのラベル部分
ポイントは、「CSS position（ポジション）種類.static、relative、absolute、fixed、sticky使い方 position（ポジション）プロパティとは (3)absolute」で説明した「親要素やその外側の要素のうち、position(static以外)が指定された要素を基準に配置する」という仕組みを利用していることです。
仕組みを順番に見ていきましょう。
① .thumbnail(画像とバッジをひとまとめにする外側の枠)に position: relative を指定する
→ .badge の配置基準になる要素を作る
② .badge(ラベル)に position: absolute を指定する
→ .badge は、いちばん近い「position指定された要素」=.thumbnail を基準に配置されるようになる
③ .badge に top: 8px; right: 8px; を指定する
→ .thumbnail の上端から8px下、右端から8px内側に配置される
→ 結果として、画像の右上にバッジが表示される
ブラウザでの表示結果
もし .thumbnail に position: relative を指定しなかった場合、.badge の基準はページ全体になります。その場合、top: 8px; right: 8px; はページの右上を意味することになり、画像の右上ではなくブラウザ画面の右上にバッジが表示されてしまいます。
このように、absoluteで配置したい要素の親に position: relative を指定するのは、positionを使ったレイアウトの基本パターンです。
画面右下にページトップボタンを固定する
fixedを使うと、スクロール位置に関係なく常に画面の決まった位置に要素を表示できます。
例）style.css
| .page-top { position: fixed; bottom: 24px; /* 画面下端から24px */ right: 24px; /* 画面右端から24px */ width: 48px; height: 48px; background-color: steelblue; color: white; border-radius: 50%; text-align: center; line-height: 48px; cursor: pointer; font-size: 20px; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div class=”page-top” onclick=”window.scrollTo(0,0)”>↑</div> <p>コンテンツ1</p> <p>コンテンツ2</p> <p>コンテンツ3</p> <p>コンテンツ4</p> <p>コンテンツ5</p> <p>コンテンツ6</p> <p>コンテンツ7</p> <p>コンテンツ8</p> <p>コンテンツ9</p> <p>コンテンツ10</p> <p>コンテンツ11</p> <p>コンテンツ12</p> <p>コンテンツ13</p> <p>コンテンツ14</p> <p>コンテンツ15</p> <p>コンテンツ16</p> <p>コンテンツ17</p> <p>コンテンツ18</p> <p>コンテンツ19</p> <p>コンテンツ20</p> <p>コンテンツ31</p> <p>コンテンツ32</p> <p>コンテンツ33</p> <p>コンテンツ34</p> <p>コンテンツ35</p> <p>コンテンツ36</p> <p>コンテンツ37</p> <p>コンテンツ38</p> <p>コンテンツ39</p> <p>コンテンツ40</p> </body> </html> |
※window.scrollTo(0,0) はJavaScriptのコードで、クリックしたときにページの先頭へスクロールする動作を指定しています。JavaScriptはWebページに動きや操作への反応を加えるためのプログラミング言語です。詳しくは別の記事で解説します。
ブラウザでの表示結果
右下のアイコンを押下するとJavaScriptのコードが実行されて、ページの先頭へスクロールします。
モーダルウィンドウを画面中央に表示する
「お知らせ」や「確認メッセージ」などで使われるモーダルウィンドウは、position: fixed で画面中央に配置し、右上のcloseボタンは position: absolute でモーダルの右上に配置するのが基本パターンです。
例）style.css
| .modal-overlay { position: fixed; /* ブラウザ画面全体に固定 */ top: 0; left: 0; width: 100%; /* 画面全体を覆う */ height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒で背景を暗くする */ } .modal { position: fixed; /* ブラウザ画面に対して固定 */ top: 50%; /* 画面の上から50%の位置 */ left: 50%; /* 画面の左から50%の位置 */ transform: translate(-50%, -50%); /* 自身のサイズの半分だけ戻して中央に配置 */ width: 320px; background-color: white; padding: 24px; border-radius: 8px; } .modal-close { position: absolute; /* .modalを基準に配置 */ top: 8px; /* .modalの上端から8px下 */ right: 8px; /* .modalの右端から8px内側 */ width: 32px; height: 32px; background-color: lightgray; border: none; border-radius: 50%; /* 丸い形にする */ cursor: pointer; font-size: 16px; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <div class=”modal-overlay”> <div class=”modal”> <button class=”modal-close” onclick=”document.querySelector(‘.modal-overlay’).style.display=’none'”>×</button> <h2>お知らせ</h2> <p>サービスをご利用いただきありがとうございます。</p> </div> </div> </body> </html> |
ブラウザでの表示結果
このCSSでは、3つのクラスを使っています。
●.modal-overlay:画面全体を半透明の黒で覆う背景
●.modal:お知らせの内容を表示する白い枠
●.modal-close:モーダルを閉じるための「×」ボタン
ポイントは2つあります。
① .modal に position: fixed を指定して、ブラウザ画面の中央に固定する
→ top: 50%; left: 50%; でモーダルの左上の角が画面中央に来ます。そこから transform: translate(-50%, -50%) でモーダル自身のサイズの半分だけ左上に戻すことで、モーダルの中央が画面の中央に揃います。
② .modal-close に position: absolute を指定して、.modal の右上に配置する
→ バッジを画像の右上に配置したときと同じ仕組みです。.modal を基準に、top: 8px; right: 8px; で右上に「×」ボタンを配置しています。
※「×」ボタンに書かれている onclick=”document.querySelector(‘.modal-overlay’).style.display=’none'” はJavaScriptのコードで、クリックしたときにモーダル全体を非表示にする動作を指定しています。JavaScriptについては別の記事で解説します。
スクロールしても追随する購入ボタンを画面下に固定する
ショッピングサイトの商品ページなどでよく見かける「カートに入れる」「購入する」ボタンは、position: fixed を使ってスクロールしても画面に表示され続けるように実装できます。
例）style.css
| .buy-button { position: fixed; /* ブラウザ画面に固定 */ bottom: 20px; /* 画面の下端から20px上に配置 */ right: 20px; /* 画面の右端から20px内側に配置 */ background-color: crimson; color: white; padding: 16px 32px; /* ボタン内側の余白 */ border-radius: 4px; /* 角を少し丸める */ text-decoration: none; /* リンクの下線を消す */ } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <h1>商品名</h1> <p>商品の説明文がここに入ります。</p> <p>…(中略)…</p> <p>商品の説明がさらに続きます。</p> <a href=”https://example.com/cart” class=”buy-button”>カートに入れる</a> </body> </html> |
ブラウザでの表示結果
ページをスクロールしても、ボタンは常に画面右下に表示され続けます。
このCSSのポイントは2つあります。
①<a> タグにクラスを指定して、ボタンとして装飾する
→ <a href=”…”>〜</a> はリンクを作るためのHTMLタグです。ここに class=”buy-button” を指定して、CSSでボタンらしい見た目(背景色、内側の余白、角の丸みなど)に装飾しています。text-decoration: none; で、リンク特有の青い下線を消しています。
② position: fixed でブラウザ画面の右下に固定する
→ bottom: 20px; right: 20px; で画面の右下から20px内側の位置に固定します。
リンクの貼り方
<a href=”リンク先のURL”> の リンク先のURL の部分に、購入ページのURLを書きます。
| <a href=”https://example.com/cart” class=”buy-button”>カートに入れる</a> |
＞＞CSS position（ポジション）種類.static、relative、absolute、fixed、sticky使い方