1.top_wakuの設定
前ページまでで、CSSとHTMLの関係はご理解いただけたのではないかなと思います・・・
大丈夫ですよね！
それぞれの部分（ボックス）の設定も基本的には同じ考え方と方法で、設定していきます。
思ったより簡単かもしれませんね！
まずは、見出し部分（top_waku）を設定していきましょう！
それでは、あなたの「style.css」に次のように書き加えてください。
（CSSファイルも長くなってくるので、今後は書き加える部分のみを表示します。）
width: 730px;
margin-bottom: 20px;
border: 3px ridge #ffff00;
background-color: #ffffff;
padding: 5px 15px;
text-align: left;
}
h1 {
font-size: 21px; color: #771155;
line-height: 150%;
text-decoration: underline;
}
「text-decoration」は、文字の装飾、「underline」はアンダーラインという意味になります。
見出しの文字「Wellcome to my Homepage!!」にアンダーラインが付きましたよね！
××の部分は他に「overline」「none」等が設定できます。
そして、「top_waku」をHTMLファイルに対応させる為、「index.html」に以下のように書き足してください。
「h1」はHTMLタグにあるので、そのままで大丈夫ですね！
これで、top_waku（見出し部分）は完成です！やりました！
又、CSSファイルの赤い文字の部分を色々変えてみて、その役割を実感してみてください。
<div align="center">
<div id="field_spc">
<div id="top_waku">
<h1>Wellcome to my Homepage!!</h1>
<p>初めてホームページなるものを作ってみた。<br>
意外と簡単で面白そうである。</p>
</div>
</div>
</div>
</body>
2.main_spc、sub_spcの設定
まずは、どうするんでしたっけ？
そうそう、CSSファイルに書き加えていくんですよね！
width: 75%;
margin-bottom: 20px;
padding: 0px 10px;
text-align: left;
float: right;
}
#sub_spc {
width: 22%;
margin-bottom: 20px;
padding: 0px 0px;
text-align: left;
float: left;
}
.fe {
clear: both;
}
「width」の××部分、「75%」は、そのひとつ上のボックスの幅の75%いうことです。
今は、「main_spc」を設定していますよね。
「main_spc」は「field_spc」の中に、「field_spc」は「body」の中にあるので、「main_spc」の幅「75%」ということは、１つ上のボックス、すなわち「field_spc」の幅の75%という意味になります。もちろん「%」の代わりに「px」等で指定してもかまいません。
2-1.「float:right;」について
「mai_spc」△△の部分「float」についてレイアウトを組む上で、重要なのでよく覚えておいてください。
「float」は「回り込み」という意味です。
「main_spc」の部分の「回り込み」は、「右」だよ
という意味になることは、分かりますね。では、これは一体どういうことなのか・・・
（他の△△、××部分は省略しています。）
通常、<div>〜</div>で作るボックスはブロックレベル要素といって、その前後で改行されるように初期設定されています。
そうすると、たて（上下）にボックスを並べるには、支障はないのですが、今回目標とするホームページのように、メインコンテンツのボックスの左にサブコンテンツを配置したり、その逆に配置したりするように左右に並べることはできません。
そこで左図のような配置を可能にする為に「float」を使い、ボックスを回りこませ、レイアウトを作っていきます。
「float:right;」を設定するとそのボックスは、右寄せに配置され次以降のボックスは、その左側にきます。(leftの場合はその逆）
今回は、一番大事なコンテンツを載せる「main_spc」をサブコンテンツのスペース「sub_spc」の右に配置したいので、「main_spc」で「float:right;」を設定しています。
又、IE(Internet Explorer)であれば、「main_spc」の左側に配置する「sub_spc」には「float」の設定をしなくても意図したとおりに画面に表示されますが、「Fire Fox」いうブラウザの場合は、表示が乱れるので、「sub_spc」には、「float:left;」を設定しておきます。
2-2.「.fe{clear:both;}と<br class="fe">」で回り込みを解除します。
回り込みをしたら、解除もしてやる必要があります。
あなたのホームページでは、回り込みを解除した後、<hr>（水平線）を表示させることしかしていませんが、ここに何らかの表示、例えば、著作権表示であったり、広告であったり、更に内容（コンテンツ）が続く場合であったりしたときに、回り込みを解除すると、「float」で指定したボックスの下に表示されるようになります。
「.fe{clear: both;}」が回り込み解除の設定です。
下のHTMLソースのように<br class="fe">と使います。
「.」が頭に付く「class(クラス)」が出てきました。
「id」と働き的には同じですが、クラスの話は、次のページの「豆知識」を読んでみて下さい。
さて、CSSファイルへの記入が終わったら今度はHTMLファイルでしたね！
<div align="center">
<div id="field_spc">
<div id="top_waku">
<h1>Wellcome to my Homepage!!</h1>
<p>初めてホームページなるものを作ってみた。<br>
意外と簡単で面白そうである。</p>
</div>
<div id="main_spc">
話題その１
</div>
<div id="sub_spc">
目次
</div>
<br class="fe">
</div>
</div>
</body>
<body>〜</body>に「field_spc」が入りその中にまず、「top_waku」次に、「main_spc」「sub_spc」が配置されているのが分かりますね。
「main_spc」に「float:right;」と設定しているので、「sub_spc」が、「main_spc」の横に表示されます。
「main_spc」「sub_spc」ともborderを設定していないので、枠線は見えませんが、「話題その１」「目次」の表示位置を見るとしっかりレイアウトされているのが分かりますね！
<div>の開始タグは、「id="main_spc"」等が付いているので何を設定しているか分かりますが、終了タグは、全部</div>で、区別が付かないので、間違わないように気をつけましょう！
これで大まかなレイアウトは出来ました。よかったぁ〜！！
次ページからは、詳細の設定をしてホームページを完成させていきましょう！
