それではついにcontent部分のコーディングに入っていきます。content内の要素に対してのコーディングは、複雑になっていく可能性が大きく、全体やヘッダーやフッターなどへのcssと一緒に書くと後で探すのに苦労することになりますので、contents.cssに書いていくことにします。では、他のページでも共通して使っていくであろうsidebarのコーディングからはじめたいと思います。

id名「gloval_vavi」のulに対して、margin：15pxを指定します。コレはひとつのハックしないCSS技術でもあります。今回の場合はとくに効果はないですが、内側のボックスにmarginをつけるという癖をつけておきましょう。「ボックスモデル」を説明しているサイトはたくさんあります。ぜひ理解してくださいね。
sidebarにmarginをもたせたサンプルページ

グローバルメニューとして使っているリストの背景、文字色、ボーダーを指定していきますが、こういったタイプのナビゲーションでよく使われる「リストの中のインライン要素<a>に対して指定する」をやってみましょう。

display:blockでaをブロック要素に見せかけます。これで、リストの範囲目いっぱいまでaが占領します。そのaにpadding:5pxを指定すると、aが広がった分だけリストの範囲も押し広げられます。
サンプルページ

しかし、これだけではIE6で表示がおかしくなっています。
　
左がGoogleChrome、右がInternetExplorerで見た場合の表示の違いです。GoogleChromeは正しく表示していますが、IE6がおかしいのです。ちなみにIE7ではChromeと同じように表示していました。では、この表示の差をなくすには…ハックを使いません。aタグに付けているdisplay:block;を削除すると変なスペースが消えるので、これを調整するべきでしょう。aタグのdisplay:block;に対して、一つ上のブロック要素liタグにdisplay:inline;を付けてみるとどうでしょうか？

サンプルページ。あ、解決しました。このようにハックしないで解決する方法があるはずなんです。ソースがくちゃくちゃにならないように、グーグル先生に質問してみましょう。

次に背景を指定していきます。マウスオーバーでsidebarの背景色と同じ色になるようにします。
サンプルページ

線をつけていきます。まずは、左右に線をつけて、マウスオーバーの時に、なくなればいいのですが、ここでちょっとしたテクニック。マウスオーバーの際に、線をまったくなくす（border:none;）とマウスオーバーのときに位置がずれてしまいます。
正しいサンプルページ

さて、次は上下に線をつけていきましょう。しかし…リストに上下の線をつけてしまうとうまくいかないのでは？？？下の線と上の線が合わさって2pxの線に見えるし…どうしたものか。下だけに線をつけておいたら？一番上と一番下のリストに問題がありそうです。と、いうことは「first-child」を使ったらどうなるんだ？（ただし、IEには効かない）

理想の形になりました！サンプルページ
しかし、これではIEに対応していません。IEでfirst-childがなんとか使えるようですが、last-childが機能していないようです。これを使えるようにするには、javascriptでクラスを振るか、htmlでリストに直接クラスを書いてしまえればいいわけです。

あまりスマートなやり方ではありません。次回はjavascriptもご紹介したいとおもいます。サンプルページ

※CSSのプロパティも整理して書いていきましょう。私の場合、アルファベット順に書いています。また、borderの指定もpadding同様に「上右下左」の順に書いています。あとから見直したときにもわかりやすいようにしましょう。「他の人も共同で作業をするんだということを意識していれば自然に美しいコーディングになっていくはずです。

次回は10月27日(月)に、第6回　コーディングの基礎　「バナーと本文のかんたんな装飾」をお届けします。