画像の上に文字を入れたいと思ったことはありませんか？

これらは今まで、1枚の画像をスライスして（細かく分割して）中に文字を入れたり、テーブルの背景に画像を指定してその上から文字を入れたりして行ってきました。 しかし、ブラウザによってレイアウトがくずれたり、 テーブルがくずれて表示されたり（すきまが空く）という難点がありました。

このスタイルシートを使えば、いとも簡単に、ピクセル単位で、 画像の上に文字を重ねることが出来てしまいます。
なにより画像を加工したりせずにそのまま美しい状態で、お気に入りのイラストを「インフォメーションボード」に変える事が出来るのです！
素材屋にとってもうれしいチップスです。ぜひ、使ってみて下さいネ♪
この文章はテキストです。

画像にはなんら手を加えていません。
また、テーブルの背景に指定して、その上から文字を書いているのでもありません。


(C)季節の窓
↑タグです。<BODY></BODY>間のお好きなところに入れてお使い下さい。

●説明
<div style="position: relative;">
<img src="○○○.jpg" width="○○○" height="○○○">
<div style="position:absolute; top:○○px; left:○○px; width: ○○px;">
ここに文章を入れます。文字色やサイズも指定できます。
</div></div>

赤い文字のところは画像の名前です。よこ幅たて幅も指定しています。
青い文字のところは文章の開始位置です。上から何ピクセルで、左から何ピクセルのところと指定しています。top・bottom・left・rightも使えます。
緑の文字のところは文章が入る範囲の指定です。ここを指定していないと文章は画像を通り過ぎて右へ右へと流れてしまいます。（様子を見ながら改行すればいいのですが。）
バリエーションを作って遊んでみました。参考までにどうぞ。
勝手ながらこのページに対するご質問等は受け付けておりません。ご了承下さいませ。
この文章はテキストです。Father's Dayという文字だけが画像です。どうです？文字ですからあとから編集もできますヨ♪
 バナ－のように文字数が少ないなら、
テーブルの背景に画像を指定してセルの中に文字を書いた方がいいかも？
<Back
季節の窓
Next>


こんなんなってます♪ border="0"で非表示にすると↑このように見えます。
編集可能なバナ－の出来上がり。
<Back
季節の窓
Next>