こんにちは、トム@Webプログラマー見習いです。
さて私はprogateやcodestepでHTMLやCSSの学習を進めていますが、その中で画像の上に文字を重ねる課題が頻繁に出てきます。特に画像の真ん中に文字を重ねるパターンが非常に多いので、今回そのコードを備忘録も兼ねて記事にします。
画像の真ん中に文字を重ねるやり方はいくつかありますが、今回は私も実際の課題で書いた2種類のコードを紹介します。前提としてdivを親要素とし、画像および文字(h2タグ)はdivの子要素とします。
今回のポイント・・・画像の真ん中に文字を重ねるには、text-alignを使う方法と、 transformを使う方法の2種類があります
その1 text-align:centerを使う方法
HTML
<div class="image-box">
<img src="https://images.unsplash.com/photo-1628018030611-59e6b7db307e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDcyOTIyMA&ixlib=rb-1.2.1&q=85">
<h2>画像の真ん中に文字</h2>
</div>
CSS
.image-box{
position:relative;
width:100%;
}
img{
max-width:100%;
max-height:100%;
}
h2{
width:100%;
text-align:center;
position:absolute;
top:45%;
color:white;
font-size:72px;
}
実行結果
See the Pen font-on-image_01 by トム@株&不動産投資・Webプログラマー (@roby_tom) on CodePen.
このコードのポイントは以下の通りです。
- 親要素であるimage-boxクラスにposition:relativeを指定し、子要素のh2にposition:absoluteを指定
- h2にtop:45%を指定し、親要素の左上起点で縦のほぼ真ん中にh2を移動させる(top 50%で無いのは、文字の大きさ分、50%よりも若干上に位置をずらす必要があるため)
- h2のwidthを100%にした上で text-align:centerを指定し、h2の文字の横方向をセンタリングする
その2 transformを使う方法
HTML (その1と共通)
<div class="image-box">
<img src="https://images.unsplash.com/photo-1628018030611-59e6b7db307e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDcyOTIyMA&ixlib=rb-1.2.1&q=85">
<h2>画像の真ん中に文字</h2>
</div>
CSS
.image-box{
position:relative;
width:100%;
}
img{
max-width:100%;
max-height:100%;
}
h2{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
color:white;
font-size:72px;
}
実行結果
See the Pen by トム@株&不動産投資・Webプログラマー (@roby_tom) on CodePen.
このコードのポイントは以下の通りです。
- 親要素であるimage-boxクラスにposition:relativeを指定し、子要素のh2にposition:absoluteを指定(その1と同じ)
- h2にtop:50%, left:50%を指定し、h2の左上を画像の真ん中に移動させる
- h2にtransform:translate(-50%,-50%)を指定し、h2のボックスの大きさの半分(50%)だけ、h2のボックスを上と左に寄せる。
その2でh2のwidthを100%にするとleft:50%の指定が効かなくなるようで上手く行きませんでした。デモを見て頂ければわかりますがその1ではテキストの折り返しが無いですが、その2では折り返されています。その2のやり方ですとh2のボックスの大きさ(横幅)が画面の大きさに比例して拡大・縮小され、一定の大きさを下回るとテキストがh2の幅を超えてしまうのでそこで折り返しが入っています。このあたりの細かいところは、実際の仕様に合わせて作っていくのが良いと思います。
以上、画像の真ん中に文字を重ねる方法について解説しました~