あとがき

制作実習編LV2はいかがでしたか？
今回はスタイルシートで行うにはやや難しいレイアウト部分をテーブルタグで行うことで、
LV1より高度なレイアウトを実現してみました。

今回の最大のポイントはステップ1のテーブルを組んだところにあります。
実際、テーブルを組む以外はLV1と大きな差はありません。
セルの1つ1つにLV1のような縦長のページを埋め込んでいったと言えば分かってもらえるでしょうか？

テーブルタグをレイアウト目的に使用することに対して文句を言う人もいます。
（実際テーブルタグをレイアウトに使うのはHTMLとしては正しくありません）
しかし、LV1、LV2を見た人なら分かると思いますが、テーブルタグを加えるだけで見栄えは劇的に、 しかも簡単に変えることができます。
こんなに便利な方法を使わない手は無いですよね。
全てを正しくやる必要は無いと思います。手を抜けるところは抜いて、 浮いた労力をコンテンツの充実に注いでください。

制作実習編LV３では、ポジション関連のプロパティを導入して、
テーブルタグを使わずに、複雑なレイアウトを組むことに挑戦します。
どーせスタイルシートを使うならこのレベルまで到達してみませんか？

今回書いたソースからテーブルタグを除去して、完全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);/* 背景の画像 */
}
/*リンク関係*/
a:link {/*リンクされた文字の色*/
    color:0000ff;
    font-style:normal;
    text-decoration:underline;
}
a:visited {/*訪問後の色*/
    text-decoration:none;
    color:#934C7B;
    text-decoration:underline;
}
a:hover {/*カーソルを合わせたときの色*/
    color:#ff0000;
    font-style:normal;
    text-decoration:underline;
}
a:active {/*クリック中の色*/
    text-decoration:none;
}

/*枠用ID*/
table#structure{
    background-color:#FFFFFF;
    width:700px;
    text-align:left;
    margin:0px auto;
}
td#head{
    width:700px;
    background-color:#7F2D00;
}
td#main-left{
    width:300px;
    vertical-align:top;
}
td#main-right{
    width:400px;
    vertical-align:top;
}
td#foot{
    width:700px;
}

/*左サイド*/
#img{
    margin-top:10px;
}
#new{
    width:288px;
    margin-top:10px;
    border-color:#663300;
    border-width:1px;
    border-style:solid;
}
#mes{
    width:288px;
    margin-top:10px;
    border-color:#663300;
    border-width:1px;
    border-style:solid;
}
h2.l-side{
    margin:0px;
    font-size:large;
    border-color:#663300;
    border-width:1px 10px;
    border-style:solid;
    text-align:center;
}
ul.new{
    list-style:none;
    margin:0px;
    padding:0.5em 1em;
}
p.l-side{
    margin:10px 1em;
}

/*右サイド*/
#beginer{
    margin:10px 10px 10px 5px;
    border-color:#663300;
    border-width:1px;
    border-style:none none solid solid;
}
#design{
    margin:10px 10px 10px 5px;
    border-color:#663300;
    border-width:1px;
    border-style:none none solid solid;
}
#css-tec{
    margin:10px 10px 10px 5px;
    border-color:#663300;
    border-width:1px;
    border-style:none none solid solid;
}
h2.r-side{
    margin:0px;
    font-size:large;
    border-color:#663300;
    border-width:1px 100px 1px 10px;
    border-style:solid;
    background-image:url(./img/head-menu-back.gif);
    padding:2px 0px 2px 2em;
}
p.comment{
    border-style:none solid solid none;
    border-width:1px;
    border-color:#663300;
    padding:3px;
    margin:10px 1em;
}
ul.contents{
    list-style:none;
    margin:0px;
    padding:0px 1em;
}
li.content{
    list-style:none;
    background-image:url(./img/point-s.gif);
    background-repeat:no-repeat;
    padding:0px 20px;
    margin:3px;
}

/*フット*/
address{
    font-style:normal;
    border-color:#663300;
    border-width:1px;
    border-style:solid;
    padding:0.3em 1em;
}