実務でよく使われるUIパーツの中でも、「視覚的な強調」や「画面上の動き」をコントロールする要素は、Webサイトの印象や使いやすさに大きく影響します。
特に、画像やカードの一部に表示されるバッジ（ラベル）や、画面中央に表示されるモーダルウィンドウは、どちらもユーザーの視線を引きつけたり、重要な情報を伝えたりするために頻繁に使われる重要なUIです。
これらのUIは、単に配置するだけでなく、「どの要素の上に表示するか」「画面のどこに固定するか」といったレイアウトの考え方がポイントになります。適切に実装することで、デザインの完成度だけでなく、ユーザー体験も大きく向上します。
ここでは、実務でもよく使われる次の2つのUIパーツについて、初心者にも分かりやすい形で作り方を解説します。
・画像右上に表示するバッジ（ラベル）の作り方
・画面中央に表示するモーダルウィンドウの作り方
それぞれの実装方法を通して、「なぜその配置になるのか」という考え方もあわせて理解できるように解説していきます。
画像の右上にバッジ（ラベル）を表示する
商品画像の「NEW」「SALE」などのバッジは、absoluteとrelativeの組み合わせで実装できます。
※以下の画像を「pc.png」というファイル名で、CSSと同じフォルダにコピーしてください。
例）style.css
.thumbnail {position: relative; /* バッジの基準 */ width: 200px; } .thumbnail img { width: 100%; /* 親要素にサイズを合わせる */ } .badge { position: absolute; top: 8px; right: 8px; background-color: crimson; color: white; font-size: 12px; font-weight: bold; padding: 4px 8px; border-radius: 4px; } |
例）index.html
| <html> <head> <title>ページのタイトル</title>
<style>
@import url(style.css)
</style>
</head> <div class="thumbnail"> <img src="pc.png" alt="商品画像"> <span class="badge">NEW</span> </div> </body> |
この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を使ったレイアウトの基本パターンです。
モーダルウィンドウを画面中央に表示する
「お知らせ」や「確認メッセージ」などで使われるモーダルウィンドウは、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); /* 半透明の黒で背景を暗くする */ } position: fixed; /* ブラウザ画面に対して固定 */ top: 50%; /* 画面の上から50%の位置 */ left: 50%; /* 画面の左から50%の位置 */ transform: translate(-50%, -50%); /* 自身のサイズの半分だけ戻して中央に配置 */ width: 320px; background-color: white; padding: 24px; border-radius: 8px; } 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> <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> |
ブラウザでの表示結果 
この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については別の記事で解説します。
＞＞CSS positionページトップボタン、スクロール追随ボタン、表見出し(ヘッダー)固定の作り方
＞＞CSS position（ポジション）種類.static、relative、absolute、fixed、sticky使い方