- ベストアンサー
HTML/CSS 背景
下記のように背景の色を3色にしたいのですが、どのようにすればよいのでしょうか？ ＢＯＤとＤＩＶを二つ作り、いろいろやったのですがうまく行きません。 初歩的な質問だとは思いますが、よろしくお願いします。
- nagoyanosuke
- お礼率83% (65/78)
- HTML
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
1例です（あらゆるブラウザーでは試してませんが） <meta charset="UTF-8"> <title>HTML 5 complete</title> <style type="text/css"> #piyo {background-color:gray; position:absolute; top:30%; left:0px; width:100%; height:100%; } #hoge {background-color:green; position:absolute; top:0px; left:0px; width:100%; height:30%; } #fuga {background-color:yellow; position:absolute; top:25%; left:33%; width:33%; height:100%; } </style> </head> <body> <div id="hoge">緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色</div> <div id="piyo">灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色</div> <div id="fuga">黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄</div> </body> </html>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
それぞれの色の領域（例えば<DIV>)が連続した一つの領域であるならば、 おおむね不可能です。 ただし、それぞれ全部をposition:absoluteして、left:XXpx;top:XXpx;width:XXpx;height:XXpx; と位置と大きさを固定値でもたせれば可能です。 分割してよいなら、よくあるCSSによる3カラムレイアウトの要領 で、出来ると思います。 最初に緑のDIVがあって、その下にDIVが二つ、その二つのDIVの 中に三つDIVを作って、緑・黄・緑 もう一組は 灰・黄・灰 3つのDIVはfloat:right; float:left; で回り込ませておく。 幅と高さはそれぞれ統一しておく。
お礼
早速のご回答をありがとうございます。 ＞ただし、それぞれ全部を～ こちらの方がシンプルにできそうですね。もう少し具体的に教えていただけないでしょうか？申し訳ありませんが、お願いします。
お礼
お礼が遅れ、申し訳ありません。 大変、参考になりました。ありがとうございます！