CSSで画像に文字を重ねて表示する方法

CSS(スタイルシート）ではpositionプロパティにrelativeとabsoluteを組み合わせることで自由にHTMLの要素や画像を重ねて表示することができます。

今回は画像の上に文字を重ねて表示する方法を解説します。

CSSで画像に文字を重ねて表示する方法

CSSで画像に文字を重ねて表示するにはpositionプロパティにrelativeとabsoluteを組み合わせます。

positionプロパティには以下の値を設定することができます。

今回は以下の画像

に

をという文章を重ねます。

CSSで画像に文字を重ねてみる

ではまずCSS（スタイルシート）を設定します。

.outside-box {
    position: relative;
    width:500px;
}
.messgae-box {
    position: absolute;
    left : 50px;
    top  : 30px;
}

CSS（スタイルシート）では画像と文字を１まとめにする「outside-box（外側の箱）」とメッセージを書き込む「messgae-box」を定義します。

「outside-box（外側の箱）」relative、にメッセージを書き込む「messgae-box」にabsoluteを設定します。

次にソースです。

<div class="outside-box">
    <img src="http://lightgauge.net/wp-content/uploads/2019/03/white-note.jpg" alt="白いノートの画像"/>
    <span class="messgae-box">
        画像エリアのpositionプロパティに<br>
        relativeを指定してleft:50px、top:30pxの位置に<br>
        文字を書いています。<br>
        文字エリアにはabsoluteを指定します。<br>
        こうすることによって画像に文字をCSSで<br>重ねることができます。<br><br>
        ここは通常の画像の文字と異なり<br>
        マウスで選択してコピーすることもできます。<br><br>
        またSEO的ににも文字なのでクローラーが<br>
        解析しやすくなり有利になります。
    </span>
</div>

ソースは外側の箱の中に画像と重ねるメッセージを書き込むエリアを１つにまとめて記述します。

実行結果は以下のとおり。

画像エリアのpositionプロパティに
relativeを指定してleft:50px、top:30pxの位置に
文字を書いています。
文字エリアにはabsoluteを指定します。
こうすることによって画像に文字をCSSで
重ねることができます。

ここは通常の画像の文字と異なり
マウスで選択してコピーすることもできます。

またSEO的ににも文字なのでクローラーが
解析しやすくなり有利になります。

まとめ

CSS（スタイルシート）のpositionプロパティにrelativeとabsoluteを組み合わせれば簡単に画像の上に文字を重ねて表示することが可能です。

SEO的にも有利になるので効果的に使うようにしましょう。

以上、CSSで画像に文字を重ねて表示する方法でした。