ステップ5(2)〜メニュー部分の作成2〜
ステップ５(1)でマークアップしたHTMLをCSSでデコレーションしていきます。 まずはレイアウトを整えます。
各メニューを配置する
次の原稿を参考にやってみましょう。（コピーして貼り付けてもいいです）
/* コンテンツ用 */
#beginer,#design,#csstec,#gallery{
position:relative;
width:250px;
border:#7F2D00 2px solid;
margin-top:30px;
background-color:#FFFFFF;
float:left;
}
新しいCSSの書き方が登場しました。
ID(class、タグ),ID(class),・・・と
コンマで区切りながらセレクタを並べると、並べた全てのセレクタに同じスタイルを適用させることができます。
とっても便利なのでぜひ覚えてください。
ここではfloatを使って並べています。ここまでできたら一度見てみましょう。 第１段階終了時点
残念ながらこれだけではきれいに並べることはできません。 これがfloatが難しいと言われる所以です。
class="box"の活用
きれいに並べるためにclear:bothを活用します。次のCSSを追加してみましょう。
DIV.box{
position:relative;
clear:both;
margin-left:60px;
}
これで上段と下段がきれいに配置されます。マークアップのとき一見無駄に見えたclass="box"が
ここで活きてきます。
「floatをきれいに改行するなら、包んでclear:both」覚えておくと便利です。
margin-left:60px;をここで加えたのには理由があります。#beginerにmargin-leftを指定すると
IEとfirefoxで表示が違ってしまうからです。原因は・・・バグでしょうね。
「floatさせたボックスにmarginを使うときは要確認」レイアウトのコツです。
ここまでやると 第２段階終了時点のようになります。
marginで余白を作る
marginを指定してバランスを整えます。次のCSSを追加してみましょう。
#design,#gallery{
margin-left:50px;
}
今度はmarginを加えてもブラウザーによる崩れはありません。 なんで？と思いつつ上手くいったので、これでレイアウトは完了です。
ポイント
ここでのポイントは、
- floatの改行にはclear:both;を使おう
- floatさせたボックスにmarginを指定するときは確認をしながら
の２つです。
割とサクサク書いてきてますが、このレイアウトを初めて組んだときはかなり苦労しました。
マージンの解釈が違う〜とか、上手く並ばないよぅとか悩みの種はつきません。
そこがスタイルシートの困ったところであり、楽しいところでもあります。
試行錯誤の末の達成感をぜひ味わってください。
次は各種テクニックを導入して見栄えをアップさせます