【CSS】画像の上に文字やボタンを重ねる
はじめに
この記事では、CSSで画像の上に文字やボタンを重ねる方法を詳しく解説していく。これができるようになると、画像の上に見出しをのせたり、画像の拡大ボタンをつけたりすることが可能になる。
画像の上に文字を重ねる方法【4つのステップ】
それでは、画像の上に文字を重ねる方法を次の4つのステップに分けて解説していく。
- 画像とHTMLの準備
- relativeとabsoluteを使って文字を重ねる
- 文字をデザインする
- 文字を画像の中央に表示する
❶ 画像とHTMLの準備

まずはdiv
・img
・span
タグを使って、次のようにHTMLを構成する。
<div>
<img src="awesome.jpg" />
<span>Awesome</span>
</div>
❷ relativeとabsoluteを使って文字を重ねる

外枠のdiv
にrelative
、重ねたい要素span
にabsolute
を指定する。
div {position: relative;
}
span {position: absolute;
top: 0;
left: 0;
color:white;
}
img {width: 500px;
height: 311px;
}
❸ 文字をデザインする

span
を編集して、文字をデザインしておこう。「文字サイズ」「文字の太さ」「フォント」を次のように追加した。
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; /* 追加 */
}
❹ 文字を画像の中央に表示する

文字を画像の中央に表示するには次の通り。
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
を使って文字のズレを補正
関連記事
- 【Pythonでサムネ制作①】PILで画像の上に文字を重ねて中央表示
- ESP32へ書き込みエラー・MacBook 2022でconnectできない・自動書き込みに失敗したときの解決方法
- シェル|FFmpegでGIFアニメ作成
- ESP32でjson11を使ってJSONを簡単に扱う方法|JSON文字列のパース|配列をJSONに変換
- 【tesseractでOCR】PDFから文字の抽出→文字データが埋め込まれたPDFを作成【自炊への道】