ステップ1〜レイアウト用のボックスを作る〜

さっきダウンロードしたindex.htmlとstyle.cssをまずは開いてください。
ステップ１ではレイアウト用のボックスを作成します。
スタイルシートもいきなり登場しますよ。
初回から分量が多いですが、頑張ってください。ここが今回の実習の一番の山場です。

レイアウト用ボックスを作る

全体のレイアウトを基に次のようなボックスを作ります。
これをHTMLソースにするとこんな感じです。コピーしてindex.htmlに貼り付けてください。

<!-- ************* ヘッダー ****************-->
<DIV id="head">
</DIV>

<!-- *************左サイド ****************-->
<DIV id="left">
</DIV>

<!-- *************メイン ****************-->
<DIV id="main">
</DIV>

レイアウト用ボックスのCSSを書く

基本設定と、レイアウト用ボックスCSSを書いてしまいます。
コピーしてstyle.cssに貼り付けてください。

/* 基本設定 */
BODY{
    margin:0px;
    padding:0px;
    background-color:#ffffff;
    color:#350C11;
}
img{border:0px;}
a:hover {color:#ff0000;}
/****** ヘッド ******/
#head {
    width:800px;
    height:50px;
    position:absolute;
    background-color:#7F2D00;
    overflow:hidden;
}
/****** レフト ******/
#left{
    width:150px;
    background-color:#ffffff;
    top:60px;
    position:absolute;
}
/****** メイン *******/
#main{
    position:absolute;
    top:55px;
    left:150px;
    background-color:#FFFFFF;
    background-image:url(../../img/back.gif);
    width:650px;
    font-size:small;
}

ポイント

HTMLのポイントは、

1. まとまりごとに改行などを入れること
2. コメントを有効活用すること

の２つです。

CSSのポイントは、

1. 無駄なプロパティは書かない
2. レイアウト用のボックスにpaddingは使用しないこと
3. ヘッダー用のボックスにはoverflow:hidden;を設定しておくこと

の３つです。

２つ目のpaddingは使用しないことはブラウザーによるブレを防ぐの簡単かつ有効な手段です。 ぜひ覚えてください。

position:absolute;を利用したレイアウトは幅や高さの変化に弱いのが弱点です。 閲覧者が文字サイズを拡大したりすると容易に崩れてしまいます。 そのようなことを防ぐにはoverflow:hidden;やoverflow:scroll;を指定しておくのが有効です。

今回は左端から始める テクニックを使って余白をなくしています。

確認

できたらブラウザーでどのように表示されるか見てみましょう

ステップ１終了時点

背景を指定してあるので、なんとなくレイアウトが組まれているのが分かると思います。 ではヘッダーから順に仕上げていきましょう。