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

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

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

1. 基本的な考え方

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

---

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

   HTMLコード

   1 2 3 4

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

   CSSコード

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

   .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. 応用例：左下にキャプションを表示

   HTMLコード

   1 2 3 4

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

   CSSコード

   1 2 3 4 5 6 7 8 9 10

   .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()を使うと、テキストの可読性が向上。