【初心者向け】CSSを使って画像の上に画像やテキストを重ねるには？

Webサイトで、2枚の画像を重ねたり、画像の上にテキストを乗せているデザインをよく見かけますね。

「同じよう画像を重ねたいけど、やり方が分からない」「CSSを使って実装できるの？」

そんな悩みを抱えている方もいるのではないでしょうか？

今回は、positionプロパティを使った方法をメインに紹介していきます。

positionプロパティを使わない方法も2つ紹介しますね。

この記事を読めば、CSSだけで2枚の画像を重ねたり、画像の上にテキストを乗せる方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

---

知っていますか？IT業界は市場価値が高まっています！市場価値の高い業界で働くことで、現在より年収UPが可能です。

また、 ITスキルを身につけることで、どの業界でも必要とされる人材に成長できます！

【DMM WEBCAMP】のプログラミングスクールでは、未経験から最短3ヶ月でエンジニアとして転職が可能です。

DMM WEBCAMPでは転職成功率９８％の転職コースを複数提供しています

✔︎︎︎企業が本当に求めるビジネススキルを優先的に取得可能！

✔︎︎︎︎キャリアカウンセラーとメンターがあなたの転職活動とスキル獲得を両面サポート‼

✓紹介可能企業は６００社以上！？

IT業界に転職したい方はぜひご覧ください！

positionプロパティを使う

CSSのpositionプロパティを使用すると、画像を重ねたり、テキストを重ねたりできるようになります。

positionプロパティには、以下の4つの値があります。

このうち、今回は「relative」と「absolute」を使用します。

要素に「position: relative」を指定した場合、本来配置されるはずだった場所を基準とした位置指定ができるようになります。

位置指定には、topやleftなどのプロパティを使います。

absoluteは、本来の場所ではなく、ページの左上が基準位置になります。

親要素のpositionがstatic以外の値だった場合には、親要素の左上が基準になります。

このプロパティの特徴を利用して、画像やテキストを重ねるデザインを作ることができます。

実際に、HTMLとCSSの記述例を見ていきましょう。

大きい画像の中に小さい画像を重ねる

大きい画像の中に小さい画像を重ねるパターンです。

大きい画像を「sample01.jpg」、小さい画像を「sample02.jpg」とします。

<div class="relative">
  <img src="sample01.jpg">
  <img src="sample02.jpg" class="absolute">
</div>

分かりやすくするために、クラス名をrelativeとabsoluteにしました。

CSSで小さい画像の方にのみ「position: absolute」を指定します。

.relative {
  position: relative;
}
.absolute {
  position: absolute;
  right: 30px;
  bottom: 30px;
}

大きい画像は、本来の場所にそのままの位置に配置され、小さい画像はその上に乗った状態になります。

配置場所は右から30px、下から30pxの位置になります。

上に重ねるものは画像だけでなく、テキストやリンクなど様々な要素が可能です。

アイコンのボタンを作って、クリックできるようにするなど、カスタマイズしてみてくださいね。

同じ大きさの画像を重ねる

2枚の同じ大きさの画像を一部だけ重ねたい、ということがあると思います。

ここでは、縦横300pxのサイズの2枚の画像を想定して説明していきますね。

<div class="relative">
  <img src="sample03.jpg" class="absolute01">
  <img src="sample04.jpg" class="absolute02">
</div>

CSSは以下のように記述します。

.relative{
  position: relative;
  width: 500px;
  height: 500px;
}
.absolute01{
  position: absolute;
  top: 100px;
  left: 100px;
}
.absolute02{
  position: absolute;
  top: 150px;
  left: 350px;
}

今度は、2つの子要素に「position: absolute」を指定しています。

topとleftで別々の数値を指定することで、一部だけ画像が重なったデザインにすることができます。

先ほどとは異なり、親要素では、幅と高さのサイズ指定をしています。

この理由を説明します。

子要素に「position: absolute」を指定してしまうと、高さが計算されなくなり、親要素の高さもなくなります。

それにより、後ろに続く要素が位置を詰めてくるため、重なって欲しくない要素同士が重なってしまいます。

その対処法として、親要素に高さと幅のサイズを指定しています。

画像とテキストを重ねる

画像とテキストを重ねる場合も、画像同士を重ねる方法とほとんど同じです。

縦横600pxの画像を使用します。

<div class="relative">
  <img src="sample05.jpg">
  <p class="absolute">CSS で画像とテキストを重ねるには？</p>
</div>

文字の方だけ、クラス名を指定しています。CSSは以下のように記述します。

.relative {
  position: relative;
  width: 600px;
}
.absolute {
  position: absolute;
  top:300px;
  left: 0;
  bottom: 80px;
  color: #fff;
  background: rgba(0,0,0,.6);
  width: 600px;
  padding: 10px 0;
  font-size:18px;
  font-weight:bold;
  text-align: center;
}

分かりやすいように、テキストに背景色を付けています。

下から80pxの場所に、テキスト部分が乗るように調整しました。

そのほか、テキストのサイズや太さなどを指定しています。

実際にコードを書いて、位置などを変えて試してみてくださいね。

z-indexで重なり方を変える

positionを使って画像やテキストなどの要素同士を重ねられることがわかりましたね。

このとき、後に記述した要素が手前に重なって表示されることが確認できるでしょうか。

「z-index」を使用すると、記述した順序に関わらず、要素の重なり方を指定することができます。

テキストと画像2枚を使用して、実際に記述してみましょう。画像は縦横300pxのものを想定しています。

<div class="relative">
<p>テキストを一番手前に</p>
<img src="sample06.jpg" class="photo01">
<img src="sample07.jpg" class="photo02">
</div>

続いて、z-indexを使ったCSSを書いていきます。

p {
  position:absolute;
  font-size: 32px;
  color:#fff;
  top:200px;
  left:150px;
  z-index: 3;
}
img.photo01 {
  position:absolute;
  top:100px;
  left:100px;
  z-index: 2;
}
img.photo02 {
  position:absolute;
  top:200px;
  left:200px;
  z-index: 1;
}

z-indexの値が大きいほど、手前に重なって表示されます。

HTML内で記述した順番ではなく、z-indexの値のおかげで、先に記述したものが手前にありますね。

z-indexは、positionの値にstatic以外の値が入っていないと使用できないので注意しましょう。

positionプロパティを使わない方法

これまで、positionを使って画像やテキストを重ねる方法を紹介してきました。

この方法は便利ではあるのですが、「position: absolute」を使うことで高さが失われるなど、レイアウトの崩れを引き起こすことがあります。

場合によっては、positionを使わないという選択肢も必要です。

positionを使わずに、画像やテキストを重ねる方法を2つ紹介します。

背景画像に重ねる

要素に背景画像を指定して、その上に画像を配置することができます。

<div class="content">
<img src="sample08.jpg">
</div>

HTMLには上に重ねる画像を指定し、CSSで下に配置する画像を指定します。

.content {
  background: url(sample09.jpg) no-repeat;
  width: 700px;
  height: 700px;
  padding: 20px;
}

backgroundで背景画像を指定しています。

画像の繰り返しをしないために「no-repeat」を指定しました。

この方法では、背景と手前の画像の重なり順を変えることはできません。

ネガティブマージンで重ねる

余白を設定するmarginに負の値を指定することで、要素の上に別の要素を重ねることができます。

<img src="sample10.jpg">
<img src="sample11.jpg" class="photo">

片方だけクラス名を付けて、CSSでmarginを指定します。

img {
  display: block;
}
.photo {
  margin-top: -100px;
  margin-left:100px;
}

上の余白を負の値にして、左の余白を入れることで、2枚の画像の一部を重ねました。

テキストでも同じようにできるので、試してみてください。

まとめ： それぞれの場面でCSSプロパティを使い分けよう

今回は、CSSを使って画像の上に画像やテキストを重ねる方法を解説してきました。

positionプロパティは便利ですが、高さを失うなど、レイアウトを気にする必要がありましたね。

positionプロパティを使用しない方法も2つ紹介しました。

おしゃれに画像やテキストなどを配置したいときに、今回の記事が参考になれば幸いです。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！