Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[CSS] [CSS]floatを使った２カラムレイアウトの演習

CSS

はじめに

こういうレイアウトを作ってみたい。 f:id:akatonbo_web:20150406094339p:plain

<body>
<div id="header">
<p>Header</p>
</div>
<div id="nav">
<p>Nav</p>
</div>
<div id="wrapper">
<div id="content">
<p>Content</p>
</div>
<div id="sidebar">
<p>Sidebar</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>    
</html>

/* content */
body{
  text-align: center;
}
#header {
width: 640px;
height: 60px;
background-color: coral;
margin-bottom: 10px;
}
#header p{
line-height: 60px;
}
#nav{
width: 640px;
height: 60px;
background-color: orange;
margin-bottom: 10px;
}
#nav p{
line-height: 60px;
}
#wrapper{/* レイアウト全体の幅を指定 */
width:640px;
height: 300px;
overflow:hidden;
margin-bottom: 10px;
}
#content{
width: 400px;
float: right;/* ボックスを右寄せに指定 */
background-color: yellow;    
}
#content p{
line-height: 300px;
}
#sidebar{
width: 230px;
height: 300px;
float: left;/* ボックスを左寄せに指定 */
background-color: greenyellow;
}
#sidebar p{
line-height: 300px;
}
#footer {
clear: both;/* 回り込みを解除する */
width: 640px;
height: 80px;
background-color: deepskyblue;
}
#footer p{
line-height: 80px;
}

レイアウトの空きはボックスモデルの下部を空ける
コンテンツ内容は#content▶＃sidebarの順に認識される
横レイアウトはwrapperで包む
wrapperにoverflow: hiddenを使う

overflowプロパティ

　overflowプロパティは、ボックスの範囲内に内容が入りきらない場合、はみ出た部分の表示の仕方を指定できます。 * visible:ボックスからはみ出して表示されます。(初期値)Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。 * scroll:入りきらない内容はスクロールして見られるようになります。 * hidden:はみ出た部分は表示されません。 * auto:ブラウザに依存します（一般的にはスクロールして見られるようになります）。