最新のInternet Explorer、Firefox、Opera、Google Chromeでご覧ください。
htmlやCSSに関してあれこれ。
掲載している情報はご自由にお使いください。
トップページ>2カラムレイアウト(左固定幅、右リキッド)
2カラムレイアウト(左固定幅、右リキッド)
HTML部分
<div id="header">
<p>ヘッダー</p>
</div>
<div id="container">
<div id="left">
<p>左</p>
</div>
<div id="right">
<p>右</p>
</div>
</div>
<div id="footer">
<p>フッター</p>
</div>CSS部分
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 150px;
background-color: #808080;
}
#container {
width: 100%;
}
#left {
width: 200px;
height: 300px;
background-color: #A9A9A9;
float: left;
}
#right {
width: 100%;
height: 300px;
background-color: #DCDCDC;
}
#footer {
clear: both;
width: 100%;
height: 150px;
background-color: #808080;
}
CSS部分
これは簡単です。floatで左右に分けて、片方の幅を決めてもう一方を100%(これは要らないのですが)にすればできます。
 【送料無料】プロとして恥ずかしくないWEBデザインの大原則新版 |
 【送料無料】HTMLとCSSで基礎から学ぶJavaScript |
 【送料無料】Webデザイン知らないと困る現場の新常識100 |
