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

記事内に広告が含まれています。

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

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

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

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

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

  • static
    配置方法を指定しない
  • relative
    相対位置への配置
  • absolute
    絶対位置への配置
  • fixed
    スクロールしても固定される絶対配置

今回は以下の画像

白いノートの画像

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

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

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

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

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

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

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

CSS(スタイルシート)では画像と文字を1まとめにする「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>

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

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

白いノートの画像

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

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

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

まとめ

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

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

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

タイトルとURLをコピーしました