今回は、「HTMLとCSSを使って画像の上にテキストを表示させる方法」について解説します！

実際のWEB制作の業務でも頻繁に使うので、是非参考にしてください。

画像の上にテキストを表示させるメリット

HTMLとCSSを使わずに、画像自体にテキストをあらかじめ表示させることもできます。

しかし、HTMLとCSSを使って画像の上にテキストを表示させることには、以下のようなメリットがあります。

画像にテキストを含んでしまうと、テキストを変更したい時にまた画像を1から作り直さないといけません。

しかし、今回紹介する方法だと画像とテキストは切り離されているので、テキストを柔軟に変えることが出来るのです！

【簡単】画像の上にテキストを表示させる方法【CSS】

それでは「画像の上にテキストを表示させる方法」について解説します！

完成形は以下のようになります。

簡単なので、是非参考にしてください。

HTML

まずはHTMLのコードから。

<div class="box">
      <img src="./image/img.png" alt="">
      <p>画像の上にテキストを表示</p>
</div>

親要素であるboxクラスの子要素に「img」と「p」タグを用意しました。

画像のファイルはご自由に変えてください。

CSS

次はCSSのコード。

.box {
	text-align: center;
	position: relative;
}
.box p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}

◎1行目〜4行目

「text-align: center;」で要素を中央寄せに。

そして親要素boxに対して「position: relative;」を指定します。

◎5行目〜11行目

親要素boxの子要素であるpタグ（テキスト）に対して「position: absolute;」を指定することで、絶対配置に。

そして「top: 50%;」と「left: 50%;」で上からと下から50％の位置にテキストを配置させます。

これだけだと少しずれているので、「transform: translate(-50%, -50%);」を指定することで、テキストが綺麗に上下中央揃えになります。

そして最後にテキストに「color: #fff;」で文字色を白にします。

画像の上にテキストを表示させるポイントは親要素に「position: relative;」を指定し、子要素であるテキストに「position: absolute;」を指定して絶対配置にすること。

子要素であるテキストを絶対配置にすることで、親要素を基準にテキストの配置を決めることが出来るのです。

まとめ

以上が、「HTMLとCSSを使って画像の上にテキストを表示させる方法」でした。

是非制作の参考にしてください！