ステップ６〜著作権の追加〜

最後に著作権部分を追加して完成です。しかし、ここでもCSSの罠が待ってます。

---

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;
    clear:both;
    background-color:#FFFFFF;
    border:#7F2D00 2px solid;
    width:534px;
    margin-left:60px;
    padding:10px 0px;
    padding-left:20px;
    font-style:normal;
}

ここのポイントは何と言ってもclear:both;です。
くどいようですがfloatを使った後の要素にはclear:both;です。
widthやpaddingは実際にブラウザーで見ながら微調整して出した値です。 別に計算して出したわけじゃありません。

さてここまでやってブラウザーでみるとCSSテクのボックスとくっついてしまいバランスが悪いです。 では上の方にマージンで余白を作れば良いよね・・・。
と思ってmargin-top:30px;を追加すると・・・。

IE6では、ちゃんと余白ができます。
でもfirefoxでみると・・・できてません！
しょうがないので次の作戦position:relative;とtop:30pxで表示位置をずらして余白を作りましょう。

今度はIEでもfirefoxでもちゃんと余白ができました。が、背景がちょん切れてます。これも失敗

さらにCSSを書く

ではどうすればいいかというと、次のようなCSSを書くことで解決できます。

#gallery{
margin-bottom:30px;
}

floatさせていたボックスの下に余白を作ってやればいいんです！

ポイント

ここでのポイントは、

1. 上下の余白はfloatさせたボックスに指定する

の１つです。

ちなみにDIV.boxにmargin-topを指定しても上手くいきません。
理由はclass="box"のheightの処理の仕方がIEとfirefoxで違うからなんだけど・・・。 ややこしいので別の機会にしましょう。
個人的にはIEの処理の方が好きです。

確認

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

ステップ６終了時点

ついに完成です！お疲れ様でした。
最後にあとがきで今回のまとめをして終了です。

---