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

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

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

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

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

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

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

今回ご紹介する方法を使えば、以下のような重ね合わせ表示が実現できます。

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

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

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

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

海

上記では、海の写真の右上にプルダウンメニューを重ねて表示しています。画像の上に重ねられるのはテキストだけではありません。このような入力フォームなども含め、HTMLで掲載できるものなら何でも重ねられます。

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

羽田上空写真 羽田上空 HANEDA

上図では、画像の下端の中央に「羽田上空 HANEDA」と書いたカコミを重ねています。このカコミの内側に書かれている文字は、画像ではなくテキストです。マウスで文字の部分を範囲選択してみるとよく分かります。ここではカコミの周囲に白いぼかしを加えることで、名札を見やすくしています。このぼかしもスタイルシートで実現できます。

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

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