CSSを使って画像の上に文字を重ねたいんだけど、どうすれば上手くできるかわからない。
Webサイトには画像の上に文字を重ねるデザインが数多くありますが、「どうやってCSSで表現しているんだろう？」と疑問に感じる人は少なくないと思います。
実際に、僕自身も仕事でコーディングする際には必ずと言っていいほど目にするデザインですが、CSSを学び始めた方にとっては難易度が高く、つまずきやすいポイントかもしれません。
そこで、本記事ではCSSを使って画像の上に文字を重ねる方法をわかりやすく解説します。よく出る「画像の中央に文字を配置する方法」も取り扱うので、ぜひ最後までご覧ください。
誰でもわかりやすいよう手順に沿って解説するので、CSS初心者の方でも簡単に理解できますよ。
CSSを使って画像の上に文字を重ねる方法
画像の上に文字を重ねるには、次の手順で実装します。
ポイントは、positionというCSSプロパティと、その使い方です。
- 画像と文字を用意する
- 画像と文字を１つのdivで囲む
- positionを指定する
- 文字の位置を決める
手順1：画像と文字を用意する
まずは、HTMLファイルに、表示したい画像と重ねたい文字を用意しましょう。
画像と文字（テキスト）は、同階層で大丈夫です。
<img src="./img/image.jpg" alt="夜の風景">
<h2>きれいな夜景</h2>ついでに、CSSで画像と文字のスタイリングをしておきましょう。
img{
width: 100%;
}
h2{
margin: 0;
font-size: 40px;
color: #fff;
}手順2：画像と文字を１つのdivで囲む
次に、画像と文字を１つのdivタグで囲みます。
<div>
<img src="./img/image.jpg" alt="夜の風景">
<h2>きれいな夜景</h2>
</div>手順3：positionを指定する
先ほど追加した親要素（div）にposition: relativeを、文字（テキスト）にposition:absoluteをそれぞれ指定します。
こうすることで、親要素（div）を基準として、文字（テキスト）をdiv内の自由な場所に設置できるようになります。
div{
position: relative; /*親要素にrelative*/
}
h2{
margin: 0;
font-size: 40px;
color: #fff;
position: absolute; /*文字にabsolute*/
}手順4：文字の位置を決める
absoluteで指定した文字（テキスト）は、次のプロパティを使って自由に配置することができます。
例えば「画像の上から20px・左から30px」に文字を重ねたい場合は、topとleftを使います。
h2{
margin: 0;
font-size: 40px;
color: #fff;
position: absolute;
top: 20px; /*上から20px*/
left: 30px; /*左から30px*/
}このような見た目になります。
画像の中央に文字を重ねる方法
「画像の中央に文字を重ねるレイアウト」も頻出します。
この場合は、topやleftに加えて「transform」というCSSプロバティを追加して、次のように記述します。
なお、これはposition: absoluteを使って中央寄せする際の「おまじない」みたいなものなので、覚えておきましょう
h2{
margin: 0;
font-size: 40px;
color: #fff;
position: absolute;
/*中央寄せの「おまじない」*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}画像の中央に、文字が重なります。
画像の上に文字を重ねる際にCSSを使うメリット
ここで、「CSSは面倒だから、画像編集ツールで文字を重ねるほうが楽では？」と考える人がいるかもしれません。
確かにそれもOKなのですが、CSSで重ねる「メリット」があります。
1つめは、文字（テキスト）をGoogleなどの検索エンジンが認識してくれることです。文字が検索エンジンに認識されれば、SEO効果が期待できます。
また、文字サイズや色、位置などの変更があっても、CSSなら簡単に修正できるのもメリットの１つです。もし画像編集ツールで重ねていたら、画像ごと修正しなければいけません。ちょっと面倒ですよね。
このように、CSSで画像の上にテキストを重ねることは、SEO・作業面の両方でメリットがあるんです。
まとめ
今回は、CSSを使って画像の上に文字を重ねる方法を解説しました。
positionというプロパティを使うのですが、relativeを親要素に、absoluteを文字（テキスト）に指定するというポイントだけはしっかり押さえておいてください。
あとは文字の位置を決めるだけなので、簡単に実装できるはずです。