ブログパーツのフォントを揃える | Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/1525
の続き(あとで、目次風にまとめておく予定)。
文字の重ね合わせの時に、相対座標だけを使って、「position: relative」を使っていたのですが、
画像を使わずにCSSだけで角を丸くする方法 – [ホームページ作成] All About
http://allabout.co.jp/gm/gc/24004/
を見ると、親タグで「relative」を指定しておいて、子タグに「absolute」を指定すると、座標指定が楽ですね。
そんな訳で、フレーム画像を重ね合わせるときには、
<div id=”bijo-linux” style=”position: relative;“>
<div id=”bijo-image” style=”position: absolute; top: 0px; left: 0px;”><img src=”画像” /></div>
<div id=”bijo-frame” style=”position: absolute; top: 0px; left: 0px;”><img src=”フレーム画像” /></div>
<div id=”bijo-clock” style=”position: absolute; top: 60px; left: 0px;”>00:00:00</div>
<div id=”bijo-copylight” style=”position: absolute; top: 100px; left: 0px;”>00:00:00</div>
</div>
のような形で、親からの相対座標を付ければOKと。
フレームには透過PNGを使えば、こんな風にフレームをつけることができます。
<サンプル>
# 右下の白い部分は、透過されているのではなく、白になっています。
# これは、内枠を透過させて下の画像(女性の画像)を表示させるためで、、、このあたり、フレームの形には、ちょっと限界があるけど、まあ、Javascript オンリーで、簡易的なものであればこれまで出来るということで。
所詮、画像の呼び出しは、サーバーに逐一問い合わせをしているので、PHP呼出しにして加工した画像を返す、という技にすれば、フレームの問題は解決できそうです。
あるいは、Flash で作るとか。