ステップ４〜著作権の表示〜

著作権部分を書き込みます。LV3のときとは違ってfloatに困らせられることはありません。

HTMLを書く

次の原稿を参考にやってみましょう。（コピーして貼り付けてもいいです）

<!-- *************メイン ****************-->
<DIV id="main">
<DIV id="intro">
　〜略〜
</DIV>

<DIV id="content">
　〜略〜
</DIV>

<ADDRESS>
©きくちゃん 2004 - All Rights Reserved　mail:<A href="mailto:kikuyan85@hotmail.com">kikuyan85@hotmail.com</A>
</ADDRESS>
</DIV>

ここは特に問題はないです。

CSSを書く

次の原稿を参考にやってみましょう。（コピーして貼り付けてもいいです）

/* コピーライト */
ADDRESS{
    position:relative;
    background-color:#FFFFFF;
    border:#7F2D00 2px solid;
    width:544px;
    clear:both;
    margin-left:50px;
    margin-top:30px;
    padding:10px 0px;
    padding-left:20px;
    font-style:normal;
}

LV3の時みたいに#garallyにmargin-bottomなんて無茶苦茶なことをしなくても大丈夫です。

ちゃんとmargin-topが効果を発揮してくれます。

確認

できたらindex.htmlをブラウザーでどのように表示されるか見てみましょう。

ステップ４終了時点

無事完成です。floatのせいで余白がうまく作れないなんて事は一度もありませんでしたね。