3/3 画像上の自由な位置に文字を重ねる方法 [ホームページ作成] All About

最後に、冒頭でご紹介した「画像の上に文字やオブジェクトを重ねる」サンプル3つを実現するHTML＋CSSソースをご紹介いたします。

看板画像に文字を重ねて表示する方法

まずは、以下のような看板画像の内側に文字を重ねる方法をご紹介いたします。

看板の内側に表示する文章です。

上記のように画像に文字を重ねるには、以下のようにHTMLとCSSを記述します。ここでは、どこにどんなスタイルを適用しているのかを分かりやすくするため、HTMLの各要素の中にstyle属性を使って直接CSSソースを記述しています。

<p style="position: relative;">
   <img src="dog.jpg" width="320" height="140" alt="犬看板" /><br />
   <span style="position: absolute; top: 15px; left: 150px; width: 150px;">
      看板の内側に表示する文章です。
   </span>
</p>

上記のソースに記述した各CSSの意味・役割は、以下の通りです。

■position: relative; (1行目：外側のp要素)
親ボックスになるp要素には、positionプロパティに値「relative」を指定します。「relative」は、本来は「相対的に移動」させるための値ですが、移動距離を指定していないため、本来の表示位置からは一切移動しません。ここでは、内側のspan要素(実際に画像の上に重ねて表示したい文字列)の配置を決める基準ボックスにするためだけに利用しています。この記述がないと、「描画領域(ウインドウなど)の端」が基準になってしまいます。

■position: absolute; (3行目：span要素)
このspan要素内に、画像の上に重ねたい文字列を記述しています。positionプロパティに値「absolute」を指定していますので、「基準ボックスの端」からの絶対位置へ移動させることになります。ここでの「基準ボックス」とは、「position: relative;」を指定した「外側のp要素」のことです。

■top:15px; left:150px; (3行目：span要素)
ここでは、「上から15ピクセル・左から150ピクセルの位置」に表示するよう指定しています。移動の基準(起点)になる位置は、「position: relative;」を指定している親ボックス(＝p要素)の端です。重ねる位置を、画像に合わせて微調整する必要がありますが、1ピクセル単位で値を調節して何度か試してみれば、ぴったりに合わせられるでしょう。

■width: 150px; (3行目：span要素)
ここでは、文字を表示する横幅を150ピクセルに制限しています。これは、画像に描かれた「看板」の横幅(枠幅)に合わせるためです。この指定がなければ、文字は、画像を飛び出て右へ右へとウインドウの端(または親ボックスの端)まで続いてしまいます。

写真を背景にして入力フォームを重ねる方法

次に、画像の上に入力フォームを重ねる方法をご紹介いたします。

上記のように画像に入力フォームを重ねるには、以下のようにHTMLとCSSを記述します。

<div style="position: relative;">
   <img src="sea.jpg" width="320" height="200" alt="海" />
   <div style="position: absolute; top: 30px; left: 100px;">
      <form>
          <select>
          <option>All About</option>
          <option>IT・インターネットチャネル</option>
          <option>ホームページ作成</option>
          </select>
      </form>
   </div>
</div>

上記のソースの意味・役割は、最初の例とほぼ同じです。特に改めて解説することもありませんが、簡単にだけ記しておきます。

■position: relative; (1行目：外側のdiv要素)
内側のdiv要素(画像に重ねて表示したい入力フォーム)の配置を決める基準ボックスにするために記述しています。

■position: absolute; (3行目：内側のdiv要素)
「基準ボックスの端」からの絶対位置へ移動させる指定です。

■top: 30px; left: 100px; (3行目：内側のdiv要素)
ここでは、「上から30ピクセル・左から100ピクセルの位置」に表示するよう指定しています。移動の基準(起点)になる位置は、「position: relative;」を指定している親ボックス(＝外側のdiv要素)の端です。ここでは「上端からの距離」(top)と「左端からの距離」(left)を指定していますが、画像の右上の方に重ねたいなら、「上端からの距離」(top)と「右端からの距離」(right)の指定でも良いでしょう。

■備考：
上記の表示例では、プルダウンメニューを操作しても何も起こりません。もし、プルダウンメニューの選択値に応じて別のページへ移動させたい場合には、記事「極短JavaScriptでプルダウンメニューを作る」でご紹介している方法などを使って下さい。

画像に半分だけ文字を重ねて「名札」を表現する方法

最後に、画像に半分だけ重なるように名札を付ける方法をご紹介いたします。

羽田上空 HANEDA

上記のように画像に文字(枠)を重ねるには、以下のようにHTMLとCSSを記述します。

<p style="position: relative;">
   <img src="haneda.jpg" width="320" height="200" alt="羽田上空写真" />
   <span style="position: absolute; top: 183px; left: 80px; border: 1px solid blue; padding: 3px; background-color: #ffffcc; font-family: sans-serif; font-weight: bold; box-shadow: 2px -2px 3px white, -2px -2px 3px white;">
      羽田上空 HANEDA
   </span>
</p>

上記のソースに記述した各CSSの意味・役割は、以下の通りです。

■position: relative; (1行目：外側のp要素)
内側のspan要素の配置を決める基準ボックスにするために記述しています。

■position: absolute; (3行目：内側のspan要素)
「基準ボックスの端」からの絶対位置へ移動させる指定です。

■top: 183px; left: 80px; (3行目：内側のspan要素)
ここでは、「上から183ピクセル・左から80ピクセルの位置」に表示するよう指定しています。

■border:1px blue solid; background-color: #ffffcc; (3行目：内側のspan要素)
これは「羽田上空 HANEDA」という文字を囲んでいる枠の装飾です。線の太さが1pxで、線の色が青色(blue)で、線種が実線(solid)の枠線を引き、背景色を淡い黄色(#ffffcc)にしています。

■box-shadow: 2px -2px 3px white, -2px -2px 3px white; (3行目：内側のspan要素)
これは枠の上部に、白色のぼかしを加えるための装飾です。box-shadowプロパティはボックスに影を付加するプロパティで、値は「横方向の距離(プラスなら右／マイナスなら左)、縦方向の距離(プラスなら下／マイナスなら上)、ぼかし幅、影の色」の順に指定します。カンマ記号「,」を使って複数の影を同時に指定できます。