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

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

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

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

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

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

・後でテキストのサイズやフォントを調整できる

・レスポンシブデザインのサイズを調整することができる(例、PCは20pxでスマホの時は12pxにする)

 

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

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

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

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

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

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

HTML

まずはHTMLのコードから。

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

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

CSS

次はCSSのコード。

◎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を使って画像の上にテキストを表示させる方法」でした。

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

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事