【CSS】
画像の上に文字を重ねて表示させる方法
position: absoluteを使いこなそう
投稿日 2021/07/07 更新日 2021/07/07
こんにちは。当サイトの管理者「元木皇天」です。
Webサイト制作を行なっていると、“画像に文字を重ねて表示させたい”なんていう場面は多く登場します。
今回はCSSを使用して、画像に文字を重ねる方法と、重ねた文字を中央に配置する方法について解説いたします。
環境
OS：MacOS Big Sur
GoogleChrom：バージョン90.0.4430.212
やりたいこと
画像の上に文字を重ねて表示
画像の上に文字を重ねて表示させるのはとても簡単です。
まず、画像と文字を並べたHTMLを記述します。
<img src="/img/sample.jpg"> <p>テキスト</p>
次に、これらを"div"で囲みます。（ここでは"box"というクラス名をつけています）
<div class="box">
<img src="/img/sample.jpg">
<p>テキスト</p>
</div>
HTMLはこれで完了です。
この状態で表示すると以下のようになっているでしょう。
テキスト
画像と文字が縦に並んで表示されていることがわかります。
次にCSSで画像の上に文字を重ねる処理を実装していきましょう。
CSSには以下のように記述してください。
/* 文字を重ねる処理 */
.box{
position: relative;
}
.box p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
上記のコードを解説しますと、まずdivをposition:relativeにします。これを記述することで、子要素がこのdivを元にして縦横どの位置に文字を配置するか設定することができるようになります。
そして、子要素である"p"にposition:absoluteを記述します。
position:absoluteは、親要素の位置を起点に絶対位置で配置することができるようになるものです。
ですので、先ほど記述したdivのposition:relativeの左上を原点として、自由に文字を配置することができます。
文字の配置はtop,buttom,right,leftそれぞれの値を使用して配置位置を設定できます。（上記の例では縦横中央に配置するように設定しています）
そして最後にtransform: translate(-50%,-50%);を付け加えることで、ちゃんと中央に配置されるように微調整をします。
実際に実装すると以下のような感じになります。
テキスト
以上！
まとめ
画像の上に文字を重ねるにはposition:absoluteを使用しまししょう。
