1.全体の構想を考えよう
基本となるbody部の設定が無事出来ましたので、次に具体的にページのレイアウトを設定していくとしましょう。
ここでも、とりあえず サンプル009-01 を見ていただいたほうが話が早そうですね！
ちょっと見づらいかもしれませんが、我慢してくださいね！
今回目標としているホームページのレイアウトを赤線で囲ってみました。
ご覧になってみても分かるとおりこのホームページのレイアウトは大きく
- body部
- field_spc部
- top_waku部
- main_spc部
- sub_spc部
1.body部
（body部の設定は、前ページで行ったので大丈夫だと思いますが、一応まとめておきます。）
-
下の画像を壁紙として設定しました。
- あまり画面のスミの方に文字や画像を置くと見にくい場合があるので四方向にmarginを設定しました。
- その他基本となる、字体、字の大きさ、色、行間等を設定しました。
2.field_spc部
-
このスペースは、いわば台紙のような役割としています。
壁紙には下の画像（縮小しています.）を使いborderで深緑のような色（#003311）を設定することにより紙を何枚か重ねたような感じにしています。
- このスペースには、下部の著作権表示以外は直接、文字や画像をおかないで、「top_waku」「main_spc」「sub_spc」をおいて、その中に文字や文章（コンテンツ）を表示させています。
3.top_waku部
-
このスペースから実際に文字や画像を置いています。
「top_waku」部には、見出しとしての役割を割り当てています。
場所は「field_spc」の中央上部です。
borderを設定し枠を表示させています。 - ここにはホームページの題名と要約した一言を載せています。
4.main_spc部
-
このスペースにメインのコンテンツを書いていきます。
CSSの話ではないですが、ここの内容のよしあしでそのホームページの出来が決まってきますね！
-
場所は、「top_waku」の下、右側です。
メインコンテンツを置くので、広さも一番大きく取ります。
5.sub_spc部
-
このスペースには、目次やメインコンテンツから波及した話題、広告等を載せます。
画面では、左側に位置していますが、HTMLソースでは、「main_spc」の下になります。
今回はこのようなレイアウトでホームページを作成していくことになりますが、いつでもこの形にしなくてはならないなんてことは全然ないので、色々素敵なレイアウトを考えて、自在にそれを組んでいけるようになっていきましょう！
2.ボックスを作っていこう！
先ほどの サンプルページ009-01 を見ていただいても分かるように、ホームページのレイアウトをくむ時は、通常（今回の例で言えば、①～⑤のような）四角のスペースを画面に割り当てていく作業をすることになります。
この四角のスペースは「ボックス」と呼ばれています。
この「ボックス」の大きさや位置にによって、ホームページのレイアウトは決まってきます。
それでは、実際に各ボックスの設定をしてホームページに反映させていきましょう。
だんだん目標のホームページに近づいていきますね！
2-1.field_spcの設定をしよう！
それでは、「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;
}
#field_spc{
width: 780px;
background-image: url(img/kabe01.jpg);
border: 10px solid #003311;
padding: 20px 10px;
}
これは、サンプルページの②「field_spc」についての設定です。
「width」は「幅」という意味です。
「border」（境界線）の××部分、「10px solid #003311」は「太さ、線のタイプ、色」ということは前ページでも書きましたね。
太さや色は大丈夫だと思いますので、線のタイプについてちょっと書いておきます。
タイプには、「solid」「double」「groove」「ridge」「inset」「outset」「dashed」「dotted」等があります。お好みに合わせてご自分で太さやタイプ、色等を色々入れ替えてみて見るのも楽しいですよ！
「padding」（border内側の余白）の××部分、「20px 10px」については、
-
××を一個設定した時（例）padding:10px;
四辺全てについて10px -
××を二個設定した時（例）padding:20px 10px;
上下については20px、左右については10px -
××を三個設定した時（例）padding:30px 20px 10px;
上については30px、左右については20px、下については10px -
××を四個設定した時（例）padding:40px 30px 20px 10px;
上については40px、右については30px、下については20px、左については10px
次に○○の部分「#field_spc」についてですが、「field_spc」という名前は私が勝手に付けた名前ですので、「zentai」でも「sitawaku」でもかまいません。
これは、「top_waku」「main_spc」「sub_spc」についても同じです。
それぞれ、いろんな設定をしてそれに名前を付けてやっているのです。
その点、最初に作った「body{～}」はhtmlタグの「body」に対応しているので、○○の部分は必然的に「body」となります。
HTMLタグに対応させることなく独自に作った名前の頭には、「#」又は「.」をつけます。
頭に「#」を付けると「id（アイディ）」、「.」を付けると「class(クラス）」と呼びます。
これらの違いについては後ほど・・・
「id(アイディ)field_spcの
- widthは780pxだよ
- background-imageはurl(img/kabe01.jpg)だよ
- borderは10px solid #003311だよ
- paddingは20px 10pxだよ
ということになりますね！
又、ここでは字の大きさ、種類等の設定は行いませんでした。１つ上のボックス（この場合は「body｛～｝」で設定しているので、それがそのまま生きてくるのです。
もし、「field_spc」で他とは違う色や大きさ、種類等の文字を表示したければ、ここでそれぞれ設定していくことになります。
2-2.HTMLファイルに対応させよう！
ところで、「body｛～｝」の場合は<body>タグがあるので<body>～</body>が対象範囲でしたが、idやclassは名前を独自に付けているので、HTMLファイルの対象範囲を決めてあげなくてはなりませんね。
ここで、久しぶりに「index.html」を見てみましょう。そして、以下のように書き足してください。
<body>～</body>のみ表示していますが、当然あなたの「index.html」には、head部分も書き込まれていますよね！
<div align="center">
<div id="field_spc">
<h1>Wellcome to my Homepage!!</h1>
<p>初めてホームページなるものを作ってみた。<br>
意外と簡単で面白そうである。</p>
</div>
</div>
</body>
<div>は複数行の文章をグループ化するタグでこの場合は、「id="field_spc"」とつけることにより、CSSファイルの「#field_spc{～}」に対応させています。
あなたのホームページにも サンプルページ009-02 のように先ほど設定した、「field_spc部」が現れましたね！よかったよかった！
![[stmx] - ソーシャルマーケットプレイス](http://sun.d-064.com/images/myu_program/120-600_03.gif)
