ステップ４〜基本設定とリンクの色〜

ここからスタイルシートを使って見た目を変えていきます。
ステップ０でダウンロードしたstyle.cssを開いてください。
この何も書かれていないスタイルシートにいろいろ書いて、仕上げていきます。
まずは壁紙と、リンクの色を設定しましょう。

スタイルシートを書く

ではスタイルシートを書いてみましょう。
次のソースをコピーしてstyle.cssに貼り付けてください。

/* 全体の設定*/
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 {/*訪問後の色*/
    color:#934C7B;/*文字の色：紫*/
    text-decoration:underline;/* 下線 */
}
a:hover {/*カーソルを合わせたときの色*/
    color:#ff0000;/*文字の色：赤*/
    font-style:normal;
    text-decoration:underline;/* 下線 */
}
a:active {/*クリック中の色*/
    text-decoration:none;/* なし */
}

ポイント

ここでのポイントは、

1. 基本となる文字や背景はbodyタグをセレクタにして設定する
2. リンクに関する設定の順番を間違えない

の２つです。
imgタグのスタイルの意味はCSSテクニックを見てください。
/* コメント */はスタイルシートでコメントを書きたいときに使います。
HTMLとは書き方が違うので気をつけましょう。
リンクに関する設定はこの順序でやらないと上手くいかないことがあります。
自分でスタイルシートを書くときは気をつけましょう。

確認

できたらindex.htmlをブラウザーでどのように表示されるか見てみましょう。
index.htmlには既にスタイルシートを読み込む設定がしてあるので、
そのままでOKです。

ステップ４終了時点

壁紙が表示されましたね。
リンクもカーソルを乗せると赤くなるはずです。
確認できたら、自分でいろいろいじってみましょう。
そして、どこをいじるとどこが変化するのかを確かめてください。
自分であれこれいじってみるのが上達への近道です。

次は見出し部分の見栄えを設定します。