absoluteを使った画像と文字の重ね表示をマスターしよう！

Webデザインでは、画像の上に文字を重ねることで、視覚的に魅力的なレイアウトを作成することができます。
これを実現するためには、CSSのposition: absolute;を活用するのが一般的です。 例えば以下のような感じのデザインが可能になります

この記事では、基本的な方法から応用まで解説し、実際に活用できるコード例を紹介します。

1. 基本的な考え方

   CSSのposition: absolute;を使うことで、要素を親要素の中で自由に配置できます。
   ただし、absoluteで配置された要素は、親要素がposition: relative;を持っていないと、意図しない場所に表示される可能性があるので注意が必要です。

---

2. 画像の上にテキストを重ねる基本

   <div class="image-container">
   	<img src="example.jpg" alt="背景画像">
   	<p class="overlay-text">画像の上のテキスト</p>
   </div>
   

   .image-container {
   	position: relative;
   	display: inline-block;
   }
   
   .image-container img {
   	width: 100%;
   	height: auto;
   }
   
   .overlay-text {
   	position: absolute;
   	top: 50%;
   	left: 50%;
   	transform: translate(-50%, -50%);
   	color: white;
   	font-size: 20px;
   	font-weight: bold;
   	background-color: rgba(0, 0, 0, 0.5);
   	padding: 10px;
   	border-radius: 5px;
   }
   

   

   解説

   • image-containerにposition: relative;を指定することで、.overlay-textの基準位置を決定します。
   • overlay-textにposition: absolute;を設定し、top: 50%、left: 50%で中央に配置。
   • transform: translate(-50%, -50%)を使い、テキストの中心が画像の中央に来るよう調整。
   • background-color: rgba(0, 0, 0, 0.5);で背景を半透明にし、読みやすさを向上。

---

3. 応用例：左下にキャプションを表示

   <div class="image-container">
     <img src="example.jpg" alt="背景画像">
     <p class="bottom-caption">キャプションテキスト</p>
   </div>
   

   .bottom-caption {
     position: absolute;
     bottom: 10px;
     left: 10px;
     color: white;
     font-size: 16px;
     background-color: rgba(0, 0, 0, 0.7);
     padding: 5px 10px;
     border-radius: 3px;
   }
   

   

   解説

   • bottom: 10px; left: 10px;を指定し、画像の左下に配置。
   • 背景を濃い色にして、文字が見やすいように調整。

---

4. まとめ

   • position: absolute;を使うことで、画像の上にテキストを自由に配置できる。
   • position: relative;を親要素に設定することで、absolute要素の位置を適切に制御できる。
   • transform: translate(-50%, -50%)を活用すると、中央配置が簡単に可能。
   • background-color: rgba()を使うと、テキストの可読性が向上。