【CSS】画像の上に文字やボタンを重ねる
この記事では、CSSで画像の上に文字やボタンを重ねる方法を詳しく解説していく。これができるようになると、画像の上に見出しをのせたり、画像の拡大ボタンをつけたりすることが可能になる。
画像の上に文字を重ねる方法【4つのステップ】
それでは、画像の上に文字を重ねる方法を次の4つのステップに分けて解説していく。
- 画像とHTMLの準備
- relativeとabsoluteを使って文字を重ねる
- 文字をデザインする
- 文字を画像の中央に表示する
❶ 画像とHTMLの準備
まずはdiv・img・spanタグを使って、次のようにHTMLを構成する。
html
<div>
<img src="awesome.jpg" />
<span>Awesome</span>
</div>❷ relativeとabsoluteを使って文字を重ねる
外枠のdivにrelative、重ねたい要素spanにabsoluteを指定する。
css
div {
position: relative;
}
span {
position: absolute;
top: 0;
left: 0;
color:white;
}
img {
width: 500px;
height: 311px;
}❸ 文字をデザインする
css
span {
position: absolute;
top: 0;
left: 0;
color:white;
font-size:4em; /* 追加 */
font-weight: 600; /* 追加 */
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; /* 追加 */
}❹ 文字を画像の中央に表示する
文字を画像の中央に表示するには次の通り。
css
div {
position: relative;
width:500px; /* 追記 */
}
span {
position: absolute;
top: 0;
left: 0;
color:white;
font-size:4em;
font-weight: 600;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
top: 50%; /* 追記 */
left: 50%; /* 追記 */
-ms-transform: translate(-50%, -50%); /* 追記 */
-webkit-transform: translate(-50%, -50%); /* 追記 */
transform: translate(-50%, -50%); /* 追記 */
}
img {
width: 500px;
height: 311px;
}文字を画像の中央に表示するポイントは次の3つ。
- divに画像と同じ横幅500pxを指定
- spanのtopとleftを50%に指定
- transform: translateを使って文字のズレを補正