こんにちは。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プロパティ」です。
次に、ソースの内容を解説いたします。
ここでしていることは「span要素の内容を、p要素の上に重ねる」という装飾です。
p要素の中にはimg要素（画像）があり、span要素の中には文字がありますから、「画像の上に文字が重なる」ことになります。
ここでは、以下のような5つのスタイルを記述しています。
- p要素に対して、positionプロパティに値「relative」を指定。
- span要素に対して、positionプロパティに値「absolute」を指定。
- span要素に対して、topプロパティに値「30px」を指定。
- span要素に対して、leftプロパティに値「75px」を指定。
- span要素に対して、widthプロパティに値「145px」を指定。
1では、重ねる基準位置になる要素を指定しています。
こう記述することによって、後述のspan要素は、「p要素の表示位置」を基準にした位置に再配置されます。
2の記述によって、span要素は「本来の表示位置」から離れ、(1)で指定された基準位置に移動します。つまり、重なって表示されるようになります。
2と4は、基準位置からの移動距離を指定しています。
ここでは、「上端から30px」・「左端から75px」の位置を指定しています。
つまり、span要素の内容（文字）は、p要素内の画像の上から30px・左から75pxの位置から表示されることになります。
5は、span要素を表示する横幅を指定しています。ここで横幅を指定しないと、span要素内の文字が、画像の右端を越えて右方向へ飛び出してしまいます。
画像内の「文字を重ねたい範囲」に合うように数値を調整してください。
1と2は常にそのまま記述します。3〜5の各値は、実際の画像や、文字を表示したい位置に応じて修正してください。
実際の表示例は、サンプルページをご覧ください。
このサンプルページからHTMLソースをコピーして、いろいろ値を変更してみると、どのような表示になるのかがよく分かるでしょう。
今回は、画像を直接加工することなく、画像の上の自由な位置に文字を重ねて表示する方法をご紹介いたしました。とても手軽に実現できますので、ぜひ、お試しください。
ご注意ください
- 本記事の内容は、2013/08/15更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら