HPB18 | HPB19 コンテンツ一覧
ホーム > HPB19 > HTML 画像の上に 画像や文字列等 を重ねて表示する方法
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML 画像の上に 画像や文字列等 を重ねて表示する方法


HTML 画像の上に 画像や文字列等 を重ねて表示する方法



インラインスタイルシートの記述



画像と画像を重ねて表示したい場合、<head>部に、または、外部スタイルシートを記述し、「クラス」、または、「id」でその属性を付与する方法が多く紹介されていますが、その方法では、前頁一律に同じ設定を付与するような場合は便利なのですが、実際に、画像の上に、画像等を重ねて表示したいような場合は、個々のページでその形態が様々ということの方が普通だと思います


ここでは、より実践的な、インラインスタイルシートを利用した、重ね画像の表示方法をご紹介します

画像の上に 画像 文字列等 を重ねて表示したい場合、ベース(背景)画像 と、前面画像、及び、ベース(背景)画像 との表示位置関係を指定するだけで、重ね画像を表示できます



HTML 画像の上に 画像 を重ねて表示する



記述例
<div style="position: relative;"><img src="img/HP_HTML_000004.png" width="300" height="300" border="0" alt="日本周辺地図">
<div style="position: absolute; top : 220px; left : 203px;"><img src="img/HP_HTML_000005.png" width="12" height="12" border="0" alt="西之島"></div>
</div>
解説
<div style="position: relative;"> ~ </div>
ベース(背景)となる画像 (HP_HTML_000004.png : 日本周辺地図) の表示位置が、他の画像表示位置と関連性を持つこと (<style="position: relative;">) を宣言しておきます
<div style="position: absolute; top : 220px; left : 203px;"> ~ </div>
その上(前面)に表示する画像 (HP_HTML_000005.png : 西之島(赤丸)) を、ベース画像が存在する <div> 領域 (<div style="position: absolute;">) の左上から top : 220px; left : 203px; の位置に表示するよう指定しています
表示例
日本周辺地図
西之島



HTML 画像の上に 画像 と 文字列 を重ねて表示する



記述例
<div style="position: relative;"><img src="img/HP_HTML_000004.png" width="300" height="300" border="0" alt="日本周辺地図">
<div style="position: absolute; top : 213px; left : 150px;"><b>西之島</b></div>
<div style="position: absolute; top : 220px; left : 203px;"><img src="img/HP_HTML_000005.png" width="12" height="12" border="0" alt="西之島"></div>
</div>
解説
<div style="position: relative;"> ~ </div>
ベース(背景)となる画像 (HP_HTML_000004.png : 日本周辺地図) の表示位置が、他の画像表示位置と関連性を持つこと (<style="position: relative;">) を宣言しておきます
<div style="position: absolute; top : 213px; left : 150px;"> ~ </div>
その上(前面)に表示する文字列 「西之島」 を、ベース画像が存在する <div> 領域 (<div style="position: absolute;">) の左上から top : 213px; left : 150px; の位置に表示するよう指定しています
<div style="position: absolute; top : 220px; left : 203px;"> ~ </div>
その上(前面)に表示する画像 (HP_HTML_000005.png : 西之島(赤丸)) を、ベース画像が存在する <div> 領域 (<div style="position: absolute;">) の左上から top : 220px; left : 203px; の位置に表示するよう指定しています
表示例
日本周辺地図
西之島
西之島

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML 画像の上に 画像や文字列等 を重ねて表示する方法
HPB18 | HPB19 コンテンツ一覧
   

© 2014 abhp.net All Rights Reserved.

参考情報


画像を重ね合わせて表示するインラインスタイルシートの記述方法
2-3 画像上の自由な位置に文字を重ねる方法 [ホームページ作成] All About

ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP