【CSS】画像の上に文字を重ねよう【relative, absolute, transform】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

１分で理解できるHTML/CSS講座シリーズです。

今回は画像の上に文字を重ねる方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

親要素に子要素を重ねるには？？

要素を重ねるために必要なことは

relative → 相対位置の指定
absolute → 親要素に対する絶対位置の指定

つまり、relative設定した親要素を基準に
子要素の配置を絶対位置で指定できる。ということです。

See the Pen
relative by samehack (@samehack)
on CodePen.

relative、absoluteの補足

相対位置の指定！！絶対位置の指定！！
と聞くとすごく難しく感じるのですが、この場合には

親要素(relative)「ボクを基準に配置を決めてね！！」
子要素(absolute)「わかった！キミから見て上から100px、左から100pxの位置に配置するよ！」

というやり取りをしているだけなので、単純に考えるとめちゃくちゃ簡単です。

子要素を真ん中に配置するには

top:50%; left:50%;だけでは不十分！

これまでの知識をベースに考えると、
以下のような指定方法を思いついたかと思うのですが
実はこれだけでは設定が不十分です。

.親要素 {
  /* 相対位置設定 */
  position: relative;
}

.子要素 {
  /* 親要素に対する絶対位置指定 */
  position: absolute;
  /* 上から50% */
  top: 50%;
  /* 左から50% */
  left: 50%;
}

これだと、画像の中心を“開始位置”として子要素を配置するため、
テキストが若干右下によってしまいます。

transformを使って配置を調整しよう

配置の微調整はtransformを記述することで実現可能です。
※ちなみに、自身の要素の大きさが%の基準になります。

transform: translate(-50%, -50%);

transformの構文

transform: translate(X軸, Y軸);

/* もしくは */
transform: translateX(X軸);
transform: translateY(Y軸);

これは、なにをしているかというと、
X軸、Y軸に対して行き過ぎてしまった50%の部分を戻すことで
親要素の中心部に配置しています。

画像の真ん中に文字を重ねよう

See the Pen
relative-50% by samehack (@samehack)
on CodePen.

position設定、transformを組み合わせることで、
画像の中心にテキストを配置することができました！

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram