CSSファイルで全体の設定をしよう！！
基本の設定を初めにきっちりやっておくと、後が大変楽になります。
個々の設定は、基本（画面全体）の設定の上で考えていくので、ホームページを作っていく上でもここは肝心なところです。
どんなスタイルにしていくのかよ〜く考えて行きましょう！
1.body部の各種設定
1-1.前ページのおさらいをしよう！
相対パスと絶対パスの話が長くなっちゃった（でもこれも大事なんですよね）ので、前ページのおさらいをしておきましょう！
background-image: url(./img/kabe03.gif);
}
これは、下の表の意味になることは、理解できましたか？
出来ましたよね！！
| ○○ | 表示画面全体 body（HTMLの<body>に対応） |
| { | 「の部分の」 |
| △△ | 壁紙 background-image |
| : | 「は、」 |
| ×× | 「homepage」フォルダの中の「img」フォルダの中の「kabe03.gif」 url(./img/kabe03.gif) |
| ; | 「だよ」 |
| } | 「以上。」（○○（この場合は、「body」)の及ぶ範囲） |
もし、他の画像を手に入れて「back_img.gif」と名前を付けて「img」フォルダの中に置き、それを壁紙に使うとしたら上表の「kabe03.gif」の部分は「back_img.gif」に書き換えることになりますよね。
更におさらいですが、なんで「style.css」に書き込むとホームページの画面が変わるか分かりますよね。
あなたの「index.html」に
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel=stylesheet href="style.css" type="text/css">
が書き込んであるからですよね！
もし、「sutaitu.css」というファイルを作ったとしたら、赤字の部分は「sutairu.css」となるんですよね！
1-2.body部の各設定をしよう！
それでは、body部の各種設定をしていきましょう。
「style.css」の先ほど書き込んだ部分に次のように書き加えてみてください。
上書き保存を忘れずに！！
background-image: url(img/kabe03.gif);
margin-top: 20px; margin-bottom: 20px; margin-left: 3%; margin-right: 3%;
padding: 0px;
text-align: center;
line-height: 150%;
font-family: ＭＳ ゴシック,sans-serif; color: #333333;
font-size: 14px;
}
ようは、「△△：××；」が増えただけですよね。
「body部の
- background-imageはurl(img/kabe03.gif)だよ（ここは大丈夫ですよね！）
- margin-topは20pxだよ
- margin-bottomは20pxだよ
- margin-leftは3%だよ
- margin-rightは3%だよ
- padding:0pxだよ
- text-alignはcenterだよ
- line-heightは150%だよ
- font-familyはＭＳ ゴシック,sans-serifだよ
- colorは#333333だよ
- font-sizeは14pxだよ
・・・となりますよね。
このように１つの「○○」に対して複数の「△△：××；」を設定することが出来ます。
後は、それぞれの△△と××の意味が分かれば言うことなしっ！
それでは、個々に見ていきましょうか！
1-3.「margin」と「padding」について
「margin」と「padding」はともに余白をどれだけ取るかの設定です。
話をわかりやすくするために、
「border:1px solid #333333;」とbody○○に書き加えてください。
更に、各「margin」の××の数字を「0」に書き直してください。
「border」は境界線という意味です。
「border」の××部分「5px solid #008800」は「太さ、線のタイプ、色」を表しています。
××部分については、後ほどお話します。
background-image: url(img/kabe03.gif);
margin-top: 0px; margin-bottom: 0px; margin-left: 0%; margin-right: 0%;
padding: 0px;
text-align: center;
line-height: 150%;
font-family: ＭＳ ゴシック,sans-serif; color: #333333;
font-size: 14px;
border: 5px solid #008800;
}
すると、画面に緑色の線で囲まれた境界線が現れたと思います。（ サンプル008-01 ）
この境界線（含：境界線）で囲まれた領域をボックスといいます。サンプルの例では、bodyのボックスということになり、全ての内容（コンテンツ）は、この枠線の中で展開していくことになります。
bodyのボックスの中に様々な、ボックスを作って、コンテンツを振り分けていくことによって、ホームページのデザインを作っていきます。
ちなみに、今はまだ３行程度しか内容がないのでボックスも縦には小さいですが、内容が増えてくればこれが伸びていきます。
次に、各marginの××をもとの数値に戻してみてください。（ サンプ008-02 ）
境界線の外側に余白が現れましたね！
更に、「padding」の××の数字を「20」としてみましょう。> （ サンプル008-03 ）
今度は、境界線の内側に余白が現れましたよね！
「margin」はborder（境界線）の外側、「padding」はborder（境界線）内側の余白を設定します。
「border」についている「-top」はその上方向、「-bottom」は下方向、「-left」は左方向、「-right」は右方向について、という意味であるということは、容易に想像できますよね！
「padding」のように「-top」の部分を省略すると四方向全部について、という意味になります。
××部分の「0px」「20px」「3%」の部分は幅を表します。
「0px」ということはつまり「無し」ということです。
数値の単位については、左側「豆知識」を読んでみてください。
1-4.「text-align」「line-height」について
「text-align」は文章を詰める位置という意味で、××の部分には「left」「center」「right」のいずれかが入ります。
それぞれ、「左詰め」「中央よせ」「右詰め」という意味ですね。
「line-height」は行間という意味で、××の数値分だけ行間をあけるということです。
1-5.「font-size」「color」「font-family」について
「font-size」は、字の大きさ、「color」は字の色、「font-family」は字体という意味です。
色の指定については、左側「豆知識」を読んでみてください。
字体について少しだけ・・・
××の部分には、字体の名前又は、グループ名を入れます。
字体の名前は、「ＭＳ ゴシック」のように大文字小文字の区別やスペース等正確に書いてください。
グループ名は、「serif」（明朝系）、「sans-serif」（ゴシック系）、「fantasy」（装飾系）、「cursive」（草書体系）、「monospace」（等幅系）に分けられます。
字体は、そのホームページを見る人のパソコンにインストールされているかどうかで決まってきますので、あまり特殊な字体を指定してもあなたのホームページを見る人のパソコンにその字体がインストールされていなければ、その字体では見てもらえません。
その場合、最も近い字体で表示されることになります。
「ＭＳ ゴシック,sans-serif」のように、「,」で区切って第二候補、第三候補と並べることも出来ます。
「ＭＳ ゴシック」なければ「ゴシック系の文字」という意味になります。
それでは、「padding: 0px;」と元に戻し、先ほど書き足した「border:1px solid #333333;」を消してこのページは終わりにしましょう！
