西洋桜草 CSSで画像を重ねる
パソコンくらぶの先生からcssで画像を重ねるというPDFが送られてきました。
3枚の画像をスタイルシートで重ねるというものです。宿題のようですが、回答もちゃんと送られてきたので作ってみました。でも、テーブルタグを使っているのでこのブログでは出来ません。gooブログは簡単に出来るそうです。普通のホームページもテーブルを使って出来ます。
テーブルタグを使ったホームページでの重なりです。ついでに画像の枠もCSSでつけました。

エキサイトブログではテーブルタグが使えないので背景画像とDIVタグを使って3枚の画像を重ねました。
今年初めて咲いた我が家の桜草です。ピンはフォトスケープから持ってきました。
 

桜草S
ピン 










このブログで使用したタグですので他のブログやページではレイアウトが崩れる場合があります。(私のgooブログではログインメニューがず~っと下に行ってしまい、あわてて削除しました)
(メモ)
<div style="background-repeat: no-repeat;background-image:url(背景画像のURL);margin-top:30px;margin-left:10px"><div style="margin- top:-30px;margin-left:20px"><img src="上に重ねる画像のURL" width="164" height="157" alt="桜草S"></div><img style="margin-top:-220px; margin-left:30px" src="ピン画像のURL" width="50" heught="70" alt="ピン">


</div>

数字は画像によって変える。背景画像は最後の</div>までに現れるように空白または文字入れまたは透明画像を配置する。


relativeタグを使って 12月9日追記


桜草小

ピン

桜草



<div style="text-align:center"><div
style="position:relative"><div style="position:absolute; top:80px;
left:50px"><img style="border:5px solid #0f9" src="img/sakurasouS.jpg"
width="164" height="157" alt="桜草小"></div><div
style="position:absolute; top:30px; left:70px"><img src="img/pin.gif"
width="50" height="70" alt="ピン"></div><img style="border:15px ridge
#0f9" src="img/sakurasou.jpg" width="410" height="349"
alt="桜草"></div></div>


tableタグを使ってgooブログでも試してみました。
[PR]
by mmi331 | 2009-12-02 23:32 | html・css | Comments(2)
Commented by すみれ at 2009-12-03 15:07 x
mmiさんこんにちは いつもお世話になりありがとうございます。
鎌倉のお写真拝見させていただきました。紅葉きれいですね
私も何年か前、紅葉の時期に行ったこと思い出しました。

先日の「フォントで作った枠」の加工を練習させていただきました。
間違えているかもしれませんが、いくつか作りました。
スローですので思うようにはかどりません。
↑のタグ、どのようになるでしょうか使わせて頂きます。
いつもありがとうございます。
Commented by mmi331 at 2009-12-03 20:26
すみれさん、こんばんは。
↑のタグはエキサイトブログのタグですのでgooでは使えないと思います。
gooブログでも試してみました。うまく行かないかも知れませんが、gooブログにリンクを張りましたのでそちらで試してみてください。

gooブログは難しくて良くわからないのです。皆さんすいすいアップロードなさっていて感心します。画像はいちいち画像フォルダにアップロードしてからからコピーして貼り付けるのですか?
「この画像を使用する」にチェックをつけたら変なところに張り付くのですが・・・・???
textエディターを使用しています。
<< 手作り 鎌倉 天園ハイキングコース >>