Presentation is loading. Please wait.

Presentation is loading. Please wait.

T2V技術 Web製作ラボ 5/9, 2012 hayashiLabo 11.

Similar presentations


Presentation on theme: "T2V技術 Web製作ラボ 5/9, 2012 hayashiLabo 11."— Presentation transcript:

1 T2V技術 Web製作ラボ 5/9, 2012 hayashiLabo 11

2 昨今は、ページレイアウトは、ほとんどdivタグとスタイルシートできっちり行います
スタイルシートによるレイアウト 昔のページレイアウトは、tableタグやframeを使って行ってました 昨今は、ページレイアウトは、ほとんどdivタグとスタイルシートできっちり行います

3 div タグ →段落に対するタグ span タグ →文書の一部に対するタグ divタグとspanタグ
<div style="color:red;"> ところで、ホイットニー・ヒューストンが女優復帰することがわかったそうだ </div> span タグ →文書の一部に対するタグ ところで、 <span style="color:red; font-size:xx-large;">ホイットニー・ヒューストン</span>が女優復帰することがわかったそうだ

4 レイアウト設計 IDを使って入れ子的にレイアウトを組み上げる このとき、ふつうピクセル単位で決めておく container header
content_container content navigation footer body (ブラウザのウィンドウ)

5 レイアウトの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>

6 レイアウトの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、字は右詰め

7 レイアウトの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;} *は全称セレクタと言って一括全部指定

8 floatとclear float :左または右に寄せて配置する clear :回り込みの解除
  float:leftは左寄せ。次の要素はその右に配置される   float:rightは右寄せ。次の要素はその左に配置される clear :回り込みの解除   clear:bothで左右いずれの回り込みも解除する


Download ppt "T2V技術 Web製作ラボ 5/9, 2012 hayashiLabo 11."

Similar presentations


Ads by Google