ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

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

ウェブ上に表示した画像の上に文字を重ねる方法を解説。HTMLとCSSを使えば、表示位置(座標)を指定することで画像の上に任意の文字を重ねられます。画像そのものを加工する必要は一切ありません。HTMLで画像と文字を掲載し、スタイルシートで文字の配置を調整するだけの簡単な方法です。表示例に加えて、コピー&ペーストで使えるサンプルソースと共に解説。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

HTML+CSSで、画像の上の自由な位置に文字を重ねる方法

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

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

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

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

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

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

今回ご紹介する方法を使えば、以下のような重ね合わせ表示が作れます。ここでは例として、画像の上に文章を重ねたり、画像の上に選択フォームを重ねたり、画像の上に枠付きのキャプションを重ねたりしています。

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

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

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

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

海

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

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

羽田上空写真 羽田上空 HANEDA

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

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

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます