画像の上の自由な位置に文字を重ねる

看板画像の上に文字を重ねたい

看板画像の上に文字を重ねたい

画像の上に文字や入力フォームなどを重ねて表示させたいと思ったことはありませんか? 例えば、右のような画像の「看板部分」に、ぴったり合うように文字を表示させるなどです。

画像の上に重ねて文字を表示させたい場合でも、1枚の画像を細かく分割して掲載したり、table要素を駆使したりする必要はありません。スタイルシートを使えば、簡単に、しかも1ピクセル単位で表示位置を微調整しつつ、画像の上に文字を重ねることができます。

今回は、「ウェブページ上に掲載した画像」の上に、「文字」や「入力フォーム」などの任意のオブジェクトを重ね合わせて表示する方法をご紹介致します。

画像の上に文字やオブジェクトを重ねる例

今回ご紹介する方法を使えば、以下のようなことが実現できます。

■看板画像にぴったり合うように文字を重ねる

犬看板
★本日の予定とか★
いかがでしょうか、ここに書いた文字は、画像ではなくテキストです。ですから文字の範囲選択も可能です。修正もHTMLを書き換えるだけなので楽々です。

上図では、キャラクターの持つ看板画像に、文字を重ねて表示しています。上記の看板画像の内側に掲載している文字は、画像ではなくテキストです。ですから、マウスなどで範囲選択してコピーすることもできますし、検索対象にもなります。画像を加工して文字を描き込む方法とは違って、文面を修正したい際にはHTMLソース内のテキストを修正するだけで済むので、とても楽です。

■海の写真を背景にして入力フォームを重ねる

海

上記では、海の写真の右上にプルダウンメニューを重ねて表示しています。画像の上に重ねられるのはテキスト(文字)だけではありません。このような入力フォーム(ここではプルダウンメニュー)なども重ねて表示できます。もちろん、文字や入力フォームだけでなく、その他の要素でも別の画像でも、何でも任意のオブジェクトを重ねられます。

■画像に半分だけ掛かるように文字を重ねて「名札」を表現

羽田上空写真 羽田上空 HANEDA

上図では、画像の下端の中央に、「羽田上空 HANEDA」と書いたカコミを重ねています。このカコミの内側に書かれている文字は、画像ではなくテキスト(文字)です。マウスで文字の部分を範囲選択してみるとよく分かります。

上記に掲載した3つのサンプルのように、画像の上に文字や入力フォームなど様々な要素を重ねて表示するのは簡単です。これらを実現する方法は、数行のスタイルシートソースを記述するだけで済みます。

それでは次のページから、スタイルシートを記述して画像の上に文字や様々な要素を重ねる方法をご紹介致します。