１４c．スタイルシートを使用し画像の上に文字を重ねる-2
　　雛形の作成
　　次のとおりと作成します。
１．ホームフォルダにファイル【test3c.htm】を作成する。
２．次ぎにアニメ工房のHTML作成ツールHTML Table Builderを
　　使用する。HTML Table Builder にはデータ入力なしで【HTML 作成】ボタンを
　　クリックする。
　　下の方にHTML文が作成され全て選択状態になるのでこれをコピーしてメモ帳に
　　貼り付け上書き保存する。
　　自動作成される雛形にたいし黒文字を削除し青文字および赤文字の部分を書き変える。
　　赤文字の数値で文字の配置を決めている。

　　赤文字の数値がゼロの場合は文字の表示位置は変わらない。
　　数値を±変更してpixel単位で文字の表示位置を変えることが出来る。
　　left および top の値がいずれもゼロの場合は無意味であるが説明のために両方ゼロの
　　場合を記述した。

　　完成サンプル


<html lang="ja">
<head>
<title>画像に文字を重ねる</title>
<style type="text/css">
<!--
@import url(qqq.css);
body{font-size:16pt;color:red;background-color:white}
div,img{position:absolute}　　　<!-- この行削除 -->
span{position:relative}
-->
</style>
</head>
<body>
<div align="center">
<b>文字の表示位置を相対的に移動し画像の上に文字を重ねる。</b><br><br>
<img src="hana/hana2s.jpg"><br>
★<span style="left:0px;top:0px">イカリソウ</span>★<br><br>
<img src="hana/hana3s.jpg"><br>
★<span style="left:20px;top:-25px">シモバシラ</span>★<br><br>
<img src="hana/hana4s.jpg">
★<span style="left:-80px;top:-10px"><b>ユリ</b></span>★
</div>
</body>
</html>


スタイルシート解説参照　　left　　top

タグ解説参照