CSSでイメージ画像の上に文字を配置する方法

 

こんにちは、kei（@KeiKei0815blog）です。

 

今回は、以下のように画像上に文字を置いて、テキストが目立つように実装してみました。

 

 

 

また、画像上にテキストを配置することで得られるメリットもあります。

 

本記事では、CSSを使って画像上にテキストを配置する方法と、置くメリットについて簡単に紹介します。

 

[toc]

 

HTML

 

 HTML
<div class="container">
　<img src="画像URL" alt="" style="width:100%;">
　　<div class="text-block">
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
　　</div>
</div>

 

参考サイト：https://www.w3schools.com/howto/howto_css_image_text_blocks.asp

 

「img src=""」の部分に画像のURLを入れます。

 

CSS

 

 CSS
.container {
　position: relative;
}
.text-block {
　position: absolute;
　bottom: 20px;
　right: 20px;
　background-color: #1a1a1a8c;
　color: white;
　padding-left: 20px;
　padding-right: 20px;
}

 

親要素である「.container」に[position:relative;]を指定してあげます。

 

 
.container {
　position: relative;
}

 

続いて、「.text-block」に[position: absolute;]を指定します。

 

[bottom:][right:]の数値を変えることで、お好みでテキスト位置を変更できます。

 

また、[background-color:]で背景色を半透明にしています。

 

画像上に文字を置くことのメリット

 

画像の上に文字を配置することのメリットは

 

 

上記かなと。

 

スマホでみたときに画像内のテキストが読みづらい時があります。

 

そんなときに、テキスト化しておくと読みやすくユーザビリティ的に良くなりますよ！

 

今回は以上です。

 

本記事が参考になりましたら幸いです！