No.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>
No.1
- 回答日時:
それぞれの色の領域(例えば<DIV>)が連続した一つの領域であるならば、
おおむね不可能です。
ただし、それぞれ全部をposition:absoluteして、left:XXpx;top:XXpx;width:XXpx;height:XXpx;
と位置と大きさを固定値でもたせれば可能です。
分割してよいなら、よくあるCSSによる3カラムレイアウトの要領
で、出来ると思います。
最初に緑のDIVがあって、その下にDIVが二つ、その二つのDIVの
中に三つDIVを作って、緑・黄・緑 もう一組は 灰・黄・灰
3つのDIVはfloat:right; float:left; で回り込ませておく。
幅と高さはそれぞれ統一しておく。
この回答へのお礼
お礼日時:2010/12/13 20:27
早速のご回答をありがとうございます。
>ただし、それぞれ全部を~
こちらの方がシンプルにできそうですね。もう少し具体的に教えていただけないでしょうか?申し訳ありませんが、お願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- Visual Basic(VBA) 昨日、質問した件『VBA にて、条件付き書式で背景色を設定しているセルの範囲で、背景色付きのセルをカ 4 2022/04/07 14:39
- Visual Basic(VBA) マクロ実行時、自動で背景色を変えたい。 C列にあるチェックボックスをチェックするとB列に「TRUE」 4 2022/11/08 11:14
- その他(ブラウザ) zoomのバーチャル背景が選べない 4 2022/12/08 12:38
- Visual Basic(VBA) VBA にて、条件付き書式で背景色を設定しているセルの範囲で、背景色付きのセルをカウントできる、VB 2 2022/04/06 21:33
- Windows 95・98 タスクバーの背景の色だけを変えたい。 2 2022/07/13 14:44
- その他(Microsoft Office) エクセル 表の移動 2 2023/04/05 20:29
- Excel(エクセル) こんなことできますか?例えば、sheetに貼り付けた図形のタイトルを、セルA1の文字で表示する。 5 2022/04/22 15:25
- JavaScript ローディングアニメーションのロゴがページを読み込んだ後でも消えません 1 2022/09/20 21:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【CSS】floatで左右に並べた...
-
divのheight指定で画面一杯に表...
-
クリッカブルマップとインライ...
-
3点リーダーの作り方
-
CSSでdivの縦幅を指定する方法
-
htmlのstyleのposition:relativ...
-
positionのrelativeとabsolute...
-
レイアウトが崩れないようにす...
-
オンマウス時に別画像を上に重...
-
HTMLですCSSです この画像のよ...
-
YES or NO形式で進んで行く、タ...
-
HTMLですCSSです 画像のように...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
複数画像のランダム複数表示(...
-
Gifアニメ、最後のコマに行った...
-
Slick.jsのオプションrtlについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
HTMLですCSSです この画像のよ...
-
css固定したフッターが本文と重...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スタイルシートで画面を上下に...
-
チェックボックスの背景色って...
-
フッターの下に隙間ができてしまう
-
文字をクリックしたら別の文字...
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
CSSでdivのheightを動的に
-
★★★フッター最下部固定/スクロ...
-
離れた場所にマウスオーバーで...
-
htmlのstyleのposition:relativ...
おすすめ情報