CSS 画像の上に文字や画像を重ねる 左上/右上/左下/右下/中央

CSSを使って画像の上に文字や画像を重ねるには重ねる側にposition:absoluteを使えば実現できます。

ポイントになるCSSはpositionです。position:relativeで重ねる座標の基準を作り、position:absoluteで重ねる位置を設定します。基本さえ覚えてしまえばそこまで難しくはありません。

デモ

See the Pen
by kura (@kuranopen)
on CodePen.

左上にテキストを重ねる

HTML

<div class="box">
<img src="https://picsum.photos/id/237/960/540">
<p class="top-left">左上テキスト</p>
</div>

CSS

.box{
  position: relative;
}
.top-left {
  position: absolute;
  top: 25px;
  left: 25px;
}

• position: relative;で重ねるテキストの設置位置がdivのなか基準になります
• topleft で位置を調整します

右上にテキストを重ねる

HTML

<div class="box">
<img src="https://picsum.photos/id/237/960/540">
<p class="top-right">右上テキスト</p>
</div>

CSS

.box{
  position: relative;
}
.top-right {
  position: absolute;
  top: 25px;
  right: 25px;
}

• position: relative;で重ねるテキストの設置位置がdivのなか基準になります
• top right で位置を調整します

左下にテキストを重ねる

HTML

<div class="box">
<img src="https://picsum.photos/id/237/960/540">
<p class="bottom-left">左下テキスト</p>
</div>

CSS

.box{
  position: relative;
}
.bottom-left {
  position: absolute;
  bottom: 25px;
  left: 25px;
}

• position: relative;で重ねるテキストの設置位置がdivのなか基準になります
• bottom left で位置を調整します

右下にテキストを重ねる

HTML

<div class="box">
<img src="https://picsum.photos/id/237/960/540">
<p class="bottom-right">右下テキスト</p>
</div>

CSS

.box{
  position: relative;
}
.bottom-right {
  position: absolute;
  bottom: 25px;
  right: 25px;
}

• position: relative;で重ねるテキストの設置位置がdivのなか基準になります
• bottom right で位置を調整します

中央にテキストを重ねる

HTML

<div class="box">
<img src="https://picsum.photos/id/237/960/540">
<p class="center">天地中央テキスト</p>
</div>

CSS

.box{
  position: relative;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• position: relative;で重ねるテキストの設置位置がdivのなか基準になります
• .centerのCSSで天地中央設置になります

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選