HTML/CSSで画像の上に文字を重ねる方法を解説！

HTML/CSSで画像の上に文字を重ねて、背景画像にメッセージ性を持たしたり、文字に着目してもらいたい、またおしゃれなWEBサイトを作成したいということがあります。

以下の項目で文字だけでなく、アイコン、ボタンを画像の上に表示させる方法まで紹介します。

HTML/CSSで画像の上に文字を重ねる方法を紹介する前に、まず文字やアイコン、ボタンを画像の真ん中に配置するため共通で用いるCSSを解説します。

ではサンプルコードを用いて、挙動を確認してみましょう。

このようにボタンが真ん中に配置されていることが分かります。

ではサンプルコードのCSSの解説を行います。

まずbutton要素を真ん中に配置するため、topとleftを50%にします。

ただそれだけだと文字の大きさ分だけ真ん中からずれてしまうため、transform: translate(-50%, -50%);で縦と横の文字のズレを補正しています。

そして余白が入っていると、中央からズレてしまうため、marginとpaddingの値を0としています。これでボタンを画面の真ん中に配置することができます。

今回はこの真ん中に配置する方法を使って画像の上に文字やアイコンを重ねていきます。

画面の上にテキストを重ねるにはCSSのpositionプロパティを用います。

ではサンプルコードを用いて挙動を見てみましょう。

このように画像の上にテキストが重なっていることが分かります。

ではサンプルコードの解説を行います。

まずHTMLではimgとp要素をdiv要素で囲みます。そしてCSSで親となるdiv要素にposition: relative;、子となる文字が挿入されているp要素にposition: absolute;を設定します。

あとは画像の真ん中に文字がくるように、真ん中で配置する方法で説明したコードを記述します。

これで画像上の真ん中に文字を表示させることができます。

では画像の上にアイコンを重ねる方法について解説します。

こちらの方法は画像の上に文字を重ねる方法とCSSはほとんど同じで、異なるのはHTMLのみとなります。

では実際にサンプルコードを用いて挙動を見てみましょう。

このように画像の上にアイコンが表示されていることが分かります。

ではサンプルコードの解説を行います。

アイコンをFont Awesomeを用いて表示させるために、Font AwesomeのCDNをhead内に追記しましょう。

そしたらHTMLを画像の上に文字を重ねる方法の時p要素だった部分をアイコン要素に変えます。

CSSではアイコンに透明度を持たせるためにi要素にopacity: 0.5;を設定しています。

あとは画像の上に文字を重ねる方法の時と同じです。

最後に画像の上にボタンを重ねる方法について解説します。

方法としては今までと変わりありません。

このように画像の中央にボタンが表示されていることが分かります。

ではサンプルコードの解説を行います。

まずHTMLで画像の上にアイコンを重ねる方法のときにi要素だった部分をbutton要素に変えます。

CSSではbutton要素をホバーしたときにポインターがカーソルになるようにcursorプロパティでpointerを設定し、ボタンの枠を消すためにoutline: none;を設定しています。

あとは画像の上にアイコンを重ねる方法のときと同じです。

いかがでしたでしょうか？

画像上の文字を目立たせたい場合、白などの明るめの文字をのせたいときは暗めの画像を、黒などの暗めの文字をのせたいときは明るめの画像を使うのがおすすめです。

ぜひここで紹介した方法を用いて、ユーザを惹きつけるWEBサイトを作成しましょう。