css

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

 

こんにちは、kei(@KeiKei0815blog)です。

 

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

 

ダミーテキストダミーテキストダミーテキスト

 

CSSを使えば簡単に実装できますよ!
KEI

 

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

 

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

 

 

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:]で背景色を半透明にしています。

 

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

 

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

 

  • SEO対策になる(クローラーから文字と認識される)
  • スマホデザインに合わせて文字サイズを可変できる

 

上記かなと。

 

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

 

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

 

今回は以上です。

 

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

 

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-css