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で天地中央設置になります
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。