div

T2V技術
Web製作ラボ
11
5/9, 2012
hayashiLabo
スタイルシートによるレイアウト
昔のページレイアウトは、tableタグやframeを
使って行ってました
昨今は、ページレイアウトは、ほ
とんどdivタグとスタイルシートで
きっちり行います
divタグとspanタグ
div
タグ →段落に対するタグ
<div style="color:red;">
ところで、ホイットニー・ヒューストンが女優復帰することがわ
かったそうだ
</div>
span
タグ →文書の一部に対するタグ
ところで、 <span style="color:red; font-size:xx-large;">ホイットニ
ー・ヒューストン</span>が女優復帰することがわかったそうだ
レイアウト設計
header
navigation
content_container
IDを使って入れ子的にレイアウトを組み上げる
このとき、ふつうピクセル単位で決めておく
content
footer
body
（ブラウザのウィンドウ）
container
レイアウトのHTML記述
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="content-container">
<div id="navigation">
ナビゲーションがここ
</div>
<div id="content">
メインコンテンツはここ
</div>
</div>
<div id="footer">フッター</div>
</div>
</body>
レイアウトのCSS （初期）
body { color:white; }
#container { }
#header { background-color:red; }
#content-container { background-color:yellow; }
#navigation { background-color:blue; }
#content { background-color:purple; }
#footer{ background-color:green; }
以下の仕様でcssを作ってみる
・横600px
・navigation150px
・paddingを20px
・headerの高さ100px、footerの高さ50px
・footerのpaddingだけ10px、字は右詰め
レイアウトのCSS
* { padding:0px; margin:0px; }
body { color:white; }
#container { width:600px; margin:0 auto; }
#header { background-color:red; height:60px; padding:20px; }
#header h1 { text-align:center; font-size:30pt;}
#header h5 { text-align:right; font-size:9pt; }
#content-container { background-color:blue; float:left; }
#navigation { background-color:blue; width:150px; float:left; }
#content { background-color:purple; width:410px; float:left;
padding:20px; }
#footer{ background-color:green; height:30px; clear:both;
padding:10px; text-align:right;}
＊は全称セレクタと言って一括全部指定
floatとclear
float ：左または右に寄せて配置する
float:leftは左寄せ。次の要素はその右に配置される
float:rightは右寄せ。次の要素はその左に配置される
clear ：回り込みの解除
clear:bothで左右いずれの回り込みも解除する

Download Report