【超基本】CSSで画像の真ん中に文字を重ねる方法（簡単コード）

こんにちは、トム＠Webプログラマー見習いです。

さて私はprogateやcodestepでHTMLやCSSの学習を進めていますが、その中で画像の上に文字を重ねる課題が頻繁に出てきます。特に画像の真ん中に文字を重ねるパターンが非常に多いので、今回そのコードを備忘録も兼ねて記事にします。

画像の真ん中に文字を重ねるやり方はいくつかありますが、今回は私も実際の課題で書いた２種類のコードを紹介します。前提としてdivを親要素とし、画像および文字(h2タグ)はdivの子要素とします。

今回のポイント・・・画像の真ん中に文字を重ねるには、text-alignを使う方法と、 transformを使う方法の2種類があります

その１　text-align:centerを使う方法
その２　transformを使う方法

その１　text-align:centerを使う方法

HTML

<div class="image-box">
  <img src="https://images.unsplash.com/photo-1628018030611-59e6b7db307e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDcyOTIyMA&ixlib=rb-1.2.1&q=85">
  <h2>画像の真ん中に文字</h2>
</div>

CSS

.image-box{
  position:relative;
  width:100%;
}
img{
  max-width:100%;
  max-height:100%;
}
h2{
  width:100%;
  text-align:center;
  position:absolute;
  top:45%;
  color:white;
  font-size:72px;
}

実行結果

See the Pen font-on-image_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

このコードのポイントは以下の通りです。

親要素であるimage-boxクラスにposition:relativeを指定し、子要素のh2にposition:absoluteを指定
h2にtop:45%を指定し、親要素の左上起点で縦のほぼ真ん中にh2を移動させる(top 50%で無いのは、文字の大きさ分、50%よりも若干上に位置をずらす必要があるため）
h2のwidthを100%にした上で text-align:centerを指定し、h2の文字の横方向をセンタリングする

その２　transformを使う方法

HTML　（その１と共通）

<div class="image-box">
  <img src="https://images.unsplash.com/photo-1628018030611-59e6b7db307e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDcyOTIyMA&ixlib=rb-1.2.1&q=85">
  <h2>画像の真ん中に文字</h2>
</div>

CSS

.image-box{
  position:relative;
  width:100%;
}
img{
  max-width:100%;
  max-height:100%;
}
h2{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  color:white;
  font-size:72px;
}

実行結果

See the Pen by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

このコードのポイントは以下の通りです。

親要素であるimage-boxクラスにposition:relativeを指定し、子要素のh2にposition:absoluteを指定（その１と同じ）
h2にtop:50%, left:50%を指定し、h2の左上を画像の真ん中に移動させる
h2にtransform:translate(-50%,-50%)を指定し、h2のボックスの大きさの半分(50%）だけ、h2のボックスを上と左に寄せる。

その２でh2のwidthを100%にするとleft:50%の指定が効かなくなるようで上手く行きませんでした。デモを見て頂ければわかりますがその１ではテキストの折り返しが無いですが、その２では折り返されています。その２のやり方ですとh2のボックスの大きさ（横幅）が画面の大きさに比例して拡大・縮小され、一定の大きさを下回るとテキストがh2の幅を超えてしまうのでそこで折り返しが入っています。このあたりの細かいところは、実際の仕様に合わせて作っていくのが良いと思います。

以上、画像の真ん中に文字を重ねる方法について解説しました～