- ベストアンサー
CSSで背景を多重化する方法
- CSSでdivの中の背景を多重化したいと思っています。テキストの量によって背景の●が下に動くようにしたいですが、試行錯誤してもうまくできませんでした。
- divの中の背景を多重化するためには、positionプロパティを使用します。テキストの量によって背景が動くようにするには、明示的に高さを指定する必要があります。
- CSSを使用してdivの中の背景を多重化する方法を教えてください。テキストの量に応じて背景が動くようにするため、明示的な高さの指定方法についてもお教えください。
- gogoyamada
- お礼率92% (98/106)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HTMLのマークアップは、あくまで文書構造に従うほうが良いです。デザインを想定して付けていたらややこしくなるし、先でデザインを変えるとき整合性がとれなくなる。HTML,CSSの趣旨に反するし。 たとえばコラム枠の背景に右上と左下に別の画像を置きたい場合・・ たとえば <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- div.column{ width:600px;border:solid 1px gray;} div.column{ background:url(./img/top-left.gif) 0% 0% no-repeat;} div.column div{ background:url(./img/bottom-right.gif) 100% 100% no-repeat;} /* 率直にこれだけでよい */ --> </style> </head> <body> <h1>サンプル</h1> <div class="column"> <div> <p>あいうえお</p> <p>CSSでdivの中の背景を多重化したいと思いまして、</p> <p>なんとかお知恵を拝借できればと思い投稿させていただきました。</p> <p>やりたいことは、添付の画像のように、テキストの量によって背景の●がちゃんと下に動いて欲しいのです。</p> <p>こんな感じでできるかなと思って試行錯誤していましたが、ぜんぜんできませんでした。</p> </div> </div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
補足、divの下にまたdivを入れる可能性があれば div.column div div{background:none;} を追加しておく(場所はどこでもよい)。 カスケーディングを理解するには、詳細度を考えること。 <style type="text/css"> <!-- div.column div div{background:none;} div.column{ width:600px;border:solid 1px gray;} div.column{ background:url(./img/top-left.gif) 0% 0% no-repeat;} div.column div{ background:url(./img/bottom-right.gif) 100% 100% no-repeat;} /* 率直にこれだけでよい */ --> </style>
- noris02
- ベストアンサー率74% (56/75)
うまくいってないのは親ボックスの位置指定だと思います。 div.parent { border:1px solid; //見やすくするために入れましたがそれだけ。 position:relative; width:300px; ←出来れば追加 top:0px; ←追加 left:0px; ←追加 } また、私は div を極力重ねないようにし、 （上のボックスのclassで指定したスタイルが悪さをする。また、みにくく、わかりにくくなってしまう） backgroud:url(・・・)をつかいませんでした。 （空のdivになる為、背景画像が表示されない。表示するにはdiv自体にサイズをつくらなきゃいけないくなる。ページ自体の負荷等考えだすと使うかもしれませんが、、) background でやる場合は、調べてみてください。 【css】 div.parent { border:1px solid; width:300px; position:relative; top:0px; left:0px;} div.bg_upper { position:absolute; top:0px; left:0px;} div.bg_lower { position:absolute; bottom:0px; right:0px;} 【html】 <body> <div class="parent"> <div class="bg_upper"><img src="../images/bg_tl.png" /></div> <div class="bg_lower"><img src="../images/bg_br.png" /></div> <div class="contents"> ・・・ text ・・・<br /> ・・・ </div><!--end contents--> </div><!--end parent--> </body>
お礼
早々にお教えいただきましてありがとうございます。 確かにおっしゃる通りの方がわかりやすいですね。 大変勉強になりました。 ただ、やってみたのですが、ちょっとうまくいかず、 テキストが出なかったり下側の画像がつぶれたりと悪戦苦闘しております。 レベルがまだまだ低いので色々試して勉強させていただきたいと思います。 ありがとうございます。
お礼
ばっちりできました！ ありがとうございます。 スマートな方法で、とても参考になりました。 おかげさまで心のもやもやがすっきりです！ まだまだ未熟ですが、一歩前進できました。 本当にありがとうございます！