- ベストアンサー
CSSのボックスの配置について
- CSSを使用してボックスの配置を変更する方法について教えてください。
- Webサイトのボックス配置をCSSで設定する方法について教えてください。
- HTMLの<div>タグを使用してボックスを配置する方法と、CSSを使用してボックスのスタイルを変更する方法について教えてください。
- joef_f
- お礼率100% (2/2)
- その他（プログラミング・開発）
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
一部修正をしてみました。 ・ #example1が抜けていると思われたので追加しています。 ・ 配置を見やすくするため、色を変えたところがあります。 早速IE と Foxfireとで、違いが出てくることが分かります。 両者の実装に違いによります。 ------------------------------------------------------------ <html> <head> <title>Webサイト</title> <style type="text/css"> <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FFEAEF; position: absolute; top: 50px; left: 100px; } #example1 { /* position: absolute; */ top: 50 px; left: 150 px; background-color: #88EAEF } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffcc; position: absolute; top: 150px; left: 150px; } #footer { width: 750px; height: 100px; background-color: #cccccc; position: absolute; top: 750px; left: 1px; } --> </style> </head> <body> <div id="example"> <div id="example1"> <h1> ボックス1 </h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong>ここに必要ならタグと共に記入</strong> </div> </div> </body> </html> ------------------------------------------------------------ #example1 { に position: absolute; を追加してみてください。更に違いが見えてきます。 ＞＞＞ <div id="boxL">ボックス左</div>の所は、普通のHTMLタグを使っても問題ないでしょうか？ 非推奨のものは出来るだけ使わないようにして、HTMLとCSSとで機能を振り分けていくと良いでしょう。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございました！！