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

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

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

note