T2V技術 Web製作ラボ 5/9, 2012 hayashiLabo 11
昨今は、ページレイアウトは、ほとんどdivタグとスタイルシートできっちり行います スタイルシートによるレイアウト 昔のページレイアウトは、tableタグやframeを使って行ってました 昨今は、ページレイアウトは、ほとんどdivタグとスタイルシートできっちり行います
div タグ →段落に対するタグ span タグ →文書の一部に対するタグ divタグとspanタグ <div style="color:red;"> ところで、ホイットニー・ヒューストンが女優復帰することがわかったそうだ </div> span タグ →文書の一部に対するタグ ところで、 <span style="color:red; font-size:xx-large;">ホイットニー・ヒューストン</span>が女優復帰することがわかったそうだ
レイアウト設計 IDを使って入れ子的にレイアウトを組み上げる このとき、ふつうピクセル単位で決めておく container header content_container content navigation footer body （ブラウザのウィンドウ）
レイアウトのHTML記述 <body> <div id="container"> <div id="header">ヘッダー</div> <div id="content-container"> <div id="navigation"> ナビゲーションがここ </div> <div id="content"> メインコンテンツはここ <div id="footer">フッター</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 ：左または右に寄せて配置する clear ：回り込みの解除 float:leftは左寄せ。次の要素はその右に配置される float:rightは右寄せ。次の要素はその左に配置される clear ：回り込みの解除 clear:bothで左右いずれの回り込みも解除する