CSSで文字を画像の上に重ねる方法【a/img/spanタグで】



サイトデザインなどで、画像の上に大きな見出しをのせたいことはよくあると思う。
画像ファイルに直接文字を重ねてしまうより、HTMLで表現できたほうがあとあとの修正管理がラクだと思った。

そこでこの記事では『CSSで文字を画像の上に重ねる方法』を説明していく。



完成イメージはこんな感じとなる。








CSSで文字を画像の上に重ねる方法【コピペOK】


HTMLをこのように用意してみた。
サムネをクリックしたいので、aタグ を使った構成となっている。
画像の上に重ねたい文字は spanタグ で囲っておく。





そしてCSSをこのように設定する。
ほぼコピペで動くと思う。





CSSの設定の4つのポイント


うまく動かなかった場合の参考になるよう、CSSの設定の4つのポイントを解説する。

① 画像サイズの指定

imgタグ に画像のサイズを指定しておこう。


② 外枠をblockに変更

今回は外枠に aタグ を使っているので、 display: block; でblockに設定する。
ちなみにaタグの代わりにdivタグを使っている場合は省略可能。


③ 相対位置と絶対位置の指定

まずは aタグpositionrelative で相対位置にする。
そして重ねたい文字 spanタグabsolute に設定する。

これだけで画像の上に、文字が重なるはずだ。


④ 文字を中央に表示


文字を中央に表示するために次のようなことをしている。
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);


top: 50%;left: 50%; だけで文字が中央に表示されそうだが、実際は、文字サイズ分のズレが発生してしまう。

そこで transform: translate を使って文字サイズの分のズレを補正している。





おわりに


みなさんもこのように画像の上に文字が表示できただろうか?




実際にこちらのページで、アイキャッチ画像の上に文字を表示させているのでご参考に。
1分でわかる!『Harmonize』の遊び方 - 音楽系スマホアプリ


Web制作者のためのCSS設計の教科書

モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

KindleAmazon

あなたにおすすめ