あとがき

制作実習編LV１はいかがでしたか？
LV１ではスタイルシートの基本的な機能に絞って、レイアウトも単調なものでしたが、
これがスタイルシートの基本となります。
CSSテクニックで紹介しているテクニックや、まだまだあるプロパティを加えれば、
さらにカッコいいページへとしていくことが可能です。
暇なときにでもやってみてください。
「スタイルシートでページを丸ごとデザインするのも可能なんだなぁ〜」
と思ってもらえるとうれしいです。
スタイルシートデザインを始めるきっかけにしてもらえると、もっとうれしいです。

制作実習編LV２では、テーブルタグを使ってもうちょっと高度なレイアウトに挑戦します。
やることはあまり変わらないけど、見た目が激変するのでおもしろいですよ。
ぜひ挑戦してみてください。

今回作ったスタイルシート

今回の実習で作ったスタイルシートの全貌です。
こうしてみると結構な量を書きましたねぇ。

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

img{/* 画像表示のデザイン設定*/
	border:0px;
}

/*リンク関係*/
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;
}

h1{
    background-image:url(./img/head-back.gif);
    font-size:medium;
    margin-top:0px;}
h2{
    text-align:center;
    background-color:#663300;
    color:#FFFFFF;
}
p{
    padding-top:0em;
    padding-bottom:0em;
    padding-left:4em;
    padding-right:4em;
    background-color:#FFFFFF;
}
ul{
    padding-left:8em;
    margin-left:4em;
    background-color:#FFFFCC;
}
#head{
    background-color:#7F2D00;
}
#news{
    background-image:url(./img/back.gif);
    background-color:#FFFFFF;
    border-color:#CC6600;
    border-width:0px;
    border-left-width:10px;
    border-style:solid;
}
#beginer{
    background-image:url(./img/back.gif);
    background-color:#FFFFFF;
    border-color:#CC6600;
    border-width:0px;
    border-right-width:10px;
    border-style:solid;
}
#design{
    background-image:url(./img/back.gif);
    background-color:#FFFFFF;
    border-color:#CC6600;
    border-width:0px;
    border-left-width:10px;
    border-style:solid;
}
#css{
    background-image:url(./img/back.gif);
    background-color:#FFFFFF;
    border-color:#CC6600;
    border-width:0px;
    border-right-width:10px;
    border-style:solid;
}