※ ChatGPTを利用し、要約された質問です(原文:ウインドウサイズを小さくしてもレイアウトが乱れないようにする方法)
ウインドウサイズを小さくしてもレイアウトが乱れないようにする方法
このQ&Aのポイント
ウインドウサイズを変更しても、レイアウトが乱れない方法を紹介します。
HTMLとCSSに適切な設定を追加することで、ウインドウサイズの変更に対応できます。
要素の横幅をパーセントで指定することや、floatプロパティを使用することが有効です。
ウインドウサイズを小さくしてもレイアウトが乱れないようにする方法
下のHTMLとCSSに、何を追加すればウインドウサイズを変更しても、レイアウトが乱れないようにすることができるでしょうか?
div { float: left
}
div.Kukaku1 { background-color:blue;
width: 900px;
height: 150px;
}
div.Kukaku2_1 { background-color:green;
width: 300px;
height: 25px
}
div.Kukaku2_2 { background-color:aqua;
width: 300px;
height: 25px
}
div.Kukaku2_3 { background-color:gray;
width: 300px;
height: 25px
}
div.Kukaku3_1 { background-color: black;
width: 250px;
height: 200px;
}
div.Kukaku3_2 { background-color: fuchsia;
width: 650px;
height: 150px
}
div.Kukaku3_3 { background-color: lime;
width: 650px;
height: 50px
}
div.Kukaku4_Ga { width: 450px;
height: 150px
}
div.Kukaku4_1 { background-color: maroon;
width: 450px;
height: 80px
}
div.Kukaku4_2 { background-color: navy;
width: 450px;
height: 70px
}
div.Kukaku4_3 { background-color: red;
width: 450px;
height: 150px
}
<div class="Kukaku1"></div>
<div class="Kukaku2_1"></div>
<div class="Kukaku2_2"></div>
<div class="Kukaku2_3"></div>
<div class="Kukaku3_1"></div>
<div class="Kukaku3_2"></div>
<div class="Kukaku3_3"></div>
<div class="Kukaku4_Ga">
<div class="Kukaku4_1"></div>
<div class="Kukaku4_2"></div>
</div>
<div class="Kukaku4_3"></div>
回答よろしくお願いします。
お礼
なるほど。そのための #wrapper{width:900px;} <div id="wrapper"> </div> だったんですね。 ありがとうございました。