初心者の館

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

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


テーブルを作る

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

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

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

<table id="structure">
<!-- ********* ヘッド ******** -->
<tr>
<td colspan="2" id="head"></td>
</tr>

<!-- ********* メイン ******** -->
<tr>
<!--======メイン左====== -->
<td id="main-left">
</td>

<!--======メイン右====== -->
<td id="main-right">
</td>
</tr>

<!-- ********* フット ******** -->
<tr>
<td colspan="2" id="foot"></td>
</tr>
</table>

テーブル用の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のポイントは、

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

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

CSSのポイントは、

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

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

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

確認

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

ステップ1終了時点

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


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


一覧へ戻る


Last Modified 2004-10-26 © きくちゃん 2004 - All Rights Reserved