おやじ
2016年02月07日
基本ボックス（div）の作成
「素材のダウンロードと作成するホームページの概要」でダウンロードした素材を使って進めて行きます。ダウンロードしていない場合は下記よりダウンロードしてください。
ホームページ作成素材-01 46.59 KB
index.htmlファイルの<body>～</body>間を下記のように編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <div id="wrapper"> <div id="header"> </div><!-- header END --> <div id="navi"> </div><!-- navi END --> <div id="main"> </div><!-- main END --> <div id="sidebar"> </div><!-- sidebar END --> <div id="footer"> </div><!-- footer END --> </div><!-- wrapper END --> </body> |
<!- – 〇〇〇〇〇 – ->はコメントを記述しています。コメントはホームページの動作には影響しません。
スタイルシート「style.css」を下記のように編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
/*--------------------------------------*/ #wrapper{ width:1040px; margin-top:0px; margin-bottom:0px; margin-left:auto; margin-right:auto; text-align:left; } /*-------------------------------------*/ /* header */ /*-------------------------------------*/ #header{ width:1040px; height:200px; background-image:url(images/header_01.jpg); } /*-------------------------------------*/ /* navi */ /*-------------------------------------*/ #navi{ width:1040px; height:40px; } /*-------------------------------------*/ /* main */ /*-------------------------------------*/ #main{ float:left; width:700px; padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px; } /*-------------------------------------*/ /* sidebar */ /*-------------------------------------*/ #sidebar{ float:left; width:300px; padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px; } /*-------------------------------------*/ /* footer */ /*-------------------------------------*/ #footer{ clear:both; width:1040px; height:100px; } |
スタイルシートのコメントは /* */ で囲みます。
「wrapper」ボックスは画面の真ん中にホームページを表示するために設定します。
margin-left:auto; margin-right:auto; で画面の真ん中に表示されます。
「main」ボックス、「sidebar」ボックスに float:left; を設定して「main」ボックスの右横に「sidebar」ボックスを表示させます。
float直後の「footer」ボックスに clear:both; を設定して回り込みを終了しています。
