ステップ1～テーブルで枠を作る～

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

テーブルを作る

全体のレイアウトを基に次のようなテーブルを作ります。

ID：ヘッド
ID:メイン左	ID:メイン右
ID:フット

これをHTMLソースにするとこんな感じです。コピーしてindex.htmlに貼り付けてください。

テーブル用のCSSを書く

今回はここで基本設定と、テーブルの大きさを決めるCSSを書いてしまいます。
コピーしてstyle.cssに貼り付けてください。

/* 全体の設定*/
BODY{
    font-style:normal;/*文字のスタイル*/
    font-weight:normal;/*文字の太さ*/
    font-size:small;/*文字の大きさ*/
    text-align:center;/*文字の寄せ方*/
    color:#000000;/*文字の色*/
    background-color:#ffffff;/* 背景の色 */
    background-image:url(./img/back.gif);/* 背景の画像 */
}

/*枠用ID*/
table#structure{
    background-color:#FFFFFF;
    width:700px;
    border-width:1px;
    border-color:#663300;
    border-style:solid;
    text-align:left;
    margin:0px auto;
}
td#head{
    width:700px;
}
td#main-left{
    width:300px;
}
td#main-right{
    width:400px;
}
td#foot{
    width:700px;
}

ポイント

HTMLのポイントは、

複雑なテーブルを組まないこと
まとまりごとに改行などを入れること
コメントを有効活用すること

の３つです。
ここで複雑なテーブルにしてしまうと、スタイルシートを使う意味があまりなくなってしまいます。
極力シンプルなテーブルになるよう心がけましょう。

CSSのポイントは、

widthを使ってセルの大きさを決めておくこと（枠用ID部分）
paddingは使用しないこと
table#structureのtext-align:left;を忘れないこと

の３つです。
セルの大きさは矛盾が生じないように気をつけてください。
paddingを使わないのはブラウザーによる誤差を起こさないためです。

今回はボックスのセンタリングテクニックを使ってテーブルを画面の中央に寄せています（赤字の部分）。
そのためtable#structureのtext-align:left;が必要になります。もし忘れると原稿がすべて中央寄せになってしまいます。

確認

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

ステップ１終了時点

いろいろやったのに、ほとんどページとして成立していませんね。
今はこれでいいんです。
次回はセルごとに原稿を書き込んでいきます。するとずいぶん見た目が変わりますよ。

←前のステップへBACK : 次のステップへGO→

一覧へ戻る