CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

HTMLとCSSを使って画像の上にテキストを配置する方法

Webページ制作では、バナーやヒーローセクション、写真のキャプションなど、画像の上にテキストを重ねて表示したい場面がよくあります。HTMLとCSSを使えば、画像の四隅や中央など、好きな位置にテキストを自由に配置できます。

ポイントは、画像を包むコンテナ要素に position: relative を指定し、テキスト要素に position: absolute を指定することです。絶対配置されたテキストは、コンテナを基準として任意の位置に置くことができます。

サンプルコード

以下は、HTMLとCSSを使用して画像の上にテキストを配置するコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1{
    text-align: center;
}
.imageContainer {
    margin-left:36%;
    display: inline-block;
    position: relative;
    text-align: center;
    color: rgb(64, 11, 124);
}
.caption{
    font-size: 25px;
    font-weight: bolder;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.BL {
    position: absolute;
    bottom: 8px;
    left: 16px;
}
.TL{
    position: absolute;
    top: 8px;
    left: 16px;
}
.TR {
    position: absolute;
    top: 8px;
    right: 16px;
}
.BR {
    position: absolute;
    bottom: 8px;
    right: 16px;
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h1>Place text on image example</h1>
<div class="imageContainer">
<img src="https://i.picsum.photos/id/59/500/500.jpg">
<div class="caption BL">Bottom Left Text</div>
<div class="caption TL" >Top Left Text</div>
<div class="caption TR">Top Right Text</div>
<div class="caption BR">Bottom Right Text</div>
<div class="caption center">Centered Text</div>
</div>
</body>
</html>

コードの解説

このコードの構成は以下の通りです。

  • .imageContainer：画像とテキストをまとめるコンテナです。position: relative を指定することで、子要素を絶対配置する際の基準となります。
  • .BL / .TL / .TR / .BR：それぞれ画像の左下・左上・右上・右下にテキストを配置するクラスです。top、bottom、left、right の各プロパティで位置を微調整しています。
  • .center：テキストを画像の中央に配置するクラスです。top: 50% と left: 50% で要素の左上を中心に移動し、transform: translate(-50%, -50%) で要素自身の半分のサイズだけ戻すことで、完全な中央寄せを実現しています。

実行結果

上記のコードを実行すると、画像の四隅と中央にテキストが配置された、以下のような出力が得られます。

HTMLとCSSを使って画像の上にテキストを配置する方法

  1. HTMLとCSSでサインアップフォームを作成する方法【初心者向け】

    HTMLとCSSを組み合わせることで、モダンで使いやすいサインアップ（新規登録）フォームを簡単に作成できます。この記事では、メールアドレスとパスワードの入力欄、「ログイン状態を保持」チェックボックス、さらに登録・キャンセルボタンを備えた実用的なフォームを、実際のコード例とともにわかりやすく解説します。 サインアップフォームの完全なコード例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body{ font-family: Seg

  2. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {