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(スタイルシート)を設定します。

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

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

次にソースです。

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

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

白いノートの画像

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

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

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

まとめ

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

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

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

CSS
スポンサーリンク
色白おばけをフォローする

おすすめプログラミングスクール

「侍エンジニア塾」は、未経験者でも結果が出せるプログラミング学習サービスです。
専属のインストラクターとの対面かSkypeでのレッスンを通じてプログラミングスキルを身につけて頂き、就職や転職までサポートします。
「侍エンジニア塾」の『3つ』の大きな特徴

  1. 完全マンツーマンレッスン
  2. フルオーダーメイドカリキュラム作成
  3. 独立・起業・フリーランス支援

誰もが自分の技術で稼げる人材になるための教育プログラム
TECH::EXPERTのこだわりは「実務的な教育コンテンツ」と「徹底したサポート体制」の2つです。

  1. 現場で使える実践的な技術が身につく
    有名企業のエンジニアへヒアリングを重ね、1年かけて創り上げた教育プログラムがあなたを実務レベルの即戦力エンジニアへ高めます
  2. 学習方法はライフスタイルに合わせて学べます
    ・一気にエンジニアへ駆け上がる「短期集中スタイル」
    ・無理なく確実にエンジニアへ「週末集中スタイル」
    ・自分のペースで自由に学ぶ「オンラインスタイル」

TECH::CAMP(エンジニアスクール)。
【Webアプリケーションコース】
全くの未経験からWebアプリケーション開発に必要なスキルを全て学ぶことができます。
【iPhoneアプリコース】
全くの未経験から最新の開発言語Swiftを用いてiPhoneアプリ開発を学ぶことができます。
自分だけのiPhoneアプリつくって世界に向けてリリースしたい方には自信を持っておすすめできる内容です。

ソフトウェア開発日記
タイトルとURLをコピーしました