おやじ

おやじ

2016年02月07日

基本ボックス(div)の作成

「素材のダウンロードと作成するホームページの概要」でダウンロードした素材を使って進めて行きます。ダウンロードしていない場合は下記よりダウンロードしてください。

 

index.htmlファイルの<body>~</body>間を下記のように編集します。

<!- – 〇〇〇〇〇 – ->はコメントを記述しています。コメントはホームページの動作には影響しません。

スタイルシート「style.css」を下記のように編集します。

 

スタイルシートのコメントは /* */ で囲みます。

「wrapper」ボックスは画面の真ん中にホームページを表示するために設定します。

margin-left:auto; margin-right:auto; で画面の真ん中に表示されます。

「main」ボックス、「sidebar」ボックスに float:left; を設定して「main」ボックスの右横に「sidebar」ボックスを表示させます。

float直後の「footer」ボックスに clear:both; を設定して回り込みを終了しています。

 

 

コメントを残す