CSSファイルで壁紙の設定をしよう！！
見た目の良さはまず全体の構成を考えることから始めましょう。
全体のバランスが整ってないと、それぞれの部品がどんなに綺麗でもなんかちぐはぐした感じになっちゃいますね！
「木を見て森を見ず」なんてことにならない為にも最初に森を見渡しましょう！！
内容（コンテンツ）はHTMLで、スタイルはCSSで・・・
でも、それを決めていくのはあなたです！！
1.CSSの書き方を理解しよう！
それでは、いよいよあなたのホームページに手を加えていきましょうか！
手始めにまず、壁紙を設定してみましょう。
壁紙は、前のページ で取得したあの素材です。
名前は「kabe03.gif」でしたよね。
1-1.壁紙を設定しよう！
「hommepage」フォルダの中の「style.css」ファイルをダブルクリック
出てきた「style.css - メモ帳」に下の通り打ち込んで上書き保存してください。
例よってコピーアンドペーストでも全然かまいません。
例によって赤い字のところは、書き換えてもいいところです。
（でも理解してからにしましょうね！）
background-image: url(./img/kabe03.gif);
}
するとあなたのホームページは、どうなっているでしょう？
変化がない人は、ブラウザの「更新」ボタンを押してみてね！
←IEで言うとこのぼたんですよ。上の方にあると思いますが・・
先ほどまで、真っ白だった画面一面にあの画像がちりばめられていますね。
ちょっと字が見にくくなっちゃたけど、あまり細かいことは気にしてはいけません！
（・・・ってあまり細かくないか）
それはさておき、これで、あなたのフォルダにもCSSファイルが出来ました。
そう CSSにはHTMLのようなhead部とかbody部もなく、いろんな宣言文もありません！
このような記述をどんどん増やしていくだけです。
・・・意外と簡単かも・・・
それでは、一体どういう規則に沿って書いていくのかを知っておきましょう！
CSSは下のように、
という構造になっています。
（あなたのCSSファイルは見やすいように改行してあるだけです。）
あなたのCSSファイルに当てはめると
| ○○ | body | セレクタ |
| △△ | background-image | プロパティ |
| ×× | url(./img/kabe03.gif) | 値 |
○○の部分を「セレクタ」
△△の部分を「プロパティ」
××の部分を「値」
といいます。
・・・この名前がとっつきにくいんですよねぇ
なので、このホームページでは、○○、△△、××と呼ぶことにします。
ホームページを作るうえでは、何の支障もないですから！
でも、一応こんな名前だってことは覚えておきましょう。
そして、
｛ ・・・「の部分の、」
： ・・・「は、」
； ・・・「だよ」
｝ ・・・「以上。」
と言い換えてみましょう。
○○（セレクタ）の及ぶ範囲を｛ と ｝で囲みます。
「body」の部分の「background-image」は「url(./img/kabe03.gif)」だよ 以上。
なんとなく分かるような気がしませんか！
「body」これは、htmlファイルに書きましたよねっ！画面に表示する部分の最初から最後までを<body>〜</body>で囲むんでしたよね！
「background-image」は、背景画像という意味です。
「url(./img/kabe03.gif)」は、場所と名前はカッコの中のこれですよという意味です。
2.相対パスと絶対パスって！
2-1.相対パスについて
・・・はい、そうですよね。「./img/kabe03.gif」が分かりませんよね。
/ ・・・「フォルダの中の」
./ ・・・「自分がいるフォルダの」
../ ・・・「自分がいるフォルダの（「../」の数だけ）上のフォルダの中の」
と言い換えてみましょう。（言い換えるのがすきなんです、私・・・）
まずこの場合「自分」は、「style.css」です。だって「style.css」に「./img/kabe03.gif」は、書かれてあるんだから！
つまりこの例では
自分（style.css）がいるフォルダ「homepage」の中の「img」フォルダの中の「kabe03.gif」
という意味になります。
もし今後、複数スタイルシートを作ったり、後に出てきますが、HTMLで画像を表示する時も場所と名前の指定は同じ方法なのですが、その時は、その指定する文章（htmlではタグ、スタイルシートでは、値）が書かれているファイルが「自分｣です。
今自分がいるところ・・・「パソコンの前」では、ないんですよ。
もし、「img」フォルダを作らず「homepage」フォルダに直接「kabe03.gif」を置いたとしたら、
「./kabe03.gif」ということになります。
（自分がいるフォルダ「homepage」の中の「kabe03.gif」）
又、「kabe03.gif」は「img」フォルダの中にあり、「style.css」も「img」フォルダの中に置いたとしても
「./kabe03.gif」ということになります。
（自分がいるフォルダ「img」の中の「kabe03.gif」）
書き方は、同じだけど意味が微妙に異なるんですんねぇ。
更に、「kabe03.gif」は「img」フォルダの中にあり、「stairu」というフォルダを「homepage」フォルダの中に作り「stairu」フォルダに「style.css」をおいた場合
「../img/kabe03.gif」となります。
（自分がいるフォルダ「stairu」の１つ上のフォルダ「homepage」の中の「img」フォルダの中の「kabe03.gif」）
更にフォルダを作った場合は「../」を付け足していきます。
例：「../../img/kabe.gif」（自分がいるフォルダの二つ上のフォルダの中の「img」フォルダの中の「kabe03.gif」）
このように、自分のいる位置に対して、対象がどの位置にあるのかを示しているのを相対パスといいます。
2-2.絶対パスについて
ちょっとというか、大分話がそれてますが、ついでに「絶対パス」のお話を・・・
絶対パスとは、自分がどこにいるかは関係なくて対象が、どこにあるかということです。
つまり
という書き方になります。
あなたのホームページから他のホームページ（例えば、このホームページ）へリンクを張るときは「絶対パス」しか使えません。
あなたのホームページ内でのリンクや画像の表示の時は、両方使えますが、通常「相対パス」を使っています。
パスの話がだいぶ、長くなっちゃったので、続きは次のページってことで・・・
