文字を画像の上に重ねて表示させる方法（第1回）

こんにちは。All About ホームページ作成ガイドの西村文宏です。

画像の内部に文字を書き込みたい場合、その都度、Photoshopなどのソフトウェアを使って画像を加工するのは面倒ですよね。

画像を直接加工してしまうと、「修正したくなったときに再加工する作業が面倒」「文字部分が検索にはヒットしなくなる」などといったデメリットもあります。

そこで、スタイルシートの出番です。スタイルシートを活用すれば、簡単に文字を画像の上に重ねて表示できます。

画像を直接加工する手間は不要です。重ねた文字を修正したい場合は、HTMLソースを編集するだけで済むため、メンテナンスも楽々です。

もちろん、文字部分は検索にもヒットします。今回は、スタイルシートを使って、画像の上に文字を重ねる方法をご紹介いたします。

以下の手順で記述してみてください。

■STEP.1　画像を表示させる

ウェブページ上に画像を表示するには、img要素を使いますね。

例えば、「photo.jpg」というファイル名で、横幅が320px・高さが210pxの画像を表示したいなら、以下のようにHTMLソースを記述します。

<img src=”photo.jpg” width=”320″ height=”210″ alt=”写真”>

■STEP.2　画像に文字を追加する

ここで、画像に文字を追加してみます。先ほどのimg要素の直後に、span要素を配置して、そこに文字を記述します。

さらに、その全体を（「段落」を表す）p要素で囲みます。

文字の掲載にspan要素を使っているのは、後からスタイルを適用するためです。

<p>
   <img src=”photo.jpg” width=”320″ height=”210″ alt=”写真” /><br />
   <span>画像の上に重ねて表示する文章です。</span>
</p>

上記のソースだと、単に画像の下部に文字が表示されるだけです。

最後に、この文字が画像の上に重なるように、スタイルシートを書きます。

■STEP.3　文字が画像の上に重なるようにスタイルを追記する

p要素とspan要素に対して、以下のようにスタイルを追記します。

   <p style=”position: relative;”>
   <img src=”photo.jpg” width=”320″ height=”210″ alt=”写真” /><br />
   <span style=”position: absolute; top: 30px; left: 75px; width: 145px;”>
      画像の上に重ねて表示する文章です。
   </span>
</p>

上記のようにスタイルシートを追記すると、span要素内に記述している文字が、画像の「上から30px」・「左から75px」の位置に重なって表示されます。

実際の表示例は、サンプルページをご覧ください。

■補足：

先ほどのソースでは、HTML中にstyle属性を使ってスタイルを記述しました。

スタイルシート部分を分離して、以下のように書いても構いません。

 <style type=”text/css”>
   p.imagebox { position: relative; }
   p.imagebox span.inside { position: absolute; top: 30px; left: 75px; width: 145px; }
</style>
<p>
   <img src=”photo.jpg” width=”320″ height=”210″ alt=”写真” /><br />
   <span>
      画像の上に重ねて表示する文章です。
   </span>
</p>  

さて、上記で記述したスタイルシートのポイントは、要素の表示位置を指定するために利用する「positionプロパティ」です。

詳しい記述方法の解説は、次回にご紹介いたします。

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス（ツール）は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

講師「All About ホームページ作成ガイド　西村 文宏」のコラム一覧