初心者の館

ステップ5(2)〜メニュー部分の作成2〜

ステップ5(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を使って並べています。ここまでできたら一度見てみましょう。 第1段階終了時点

残念ながらこれだけではきれいに並べることはできません。 これが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を使うときは要確認」レイアウトのコツです。

ここまでやると 第2段階終了時点のようになります。

marginで余白を作る

marginを指定してバランスを整えます。次のCSSを追加してみましょう。

#design,#gallery{
    margin-left:50px;
}

今度はmarginを加えてもブラウザーによる崩れはありません。 なんで?と思いつつ上手くいったので、これでレイアウトは完了です。

ステップ5(2)終了時点

ポイント

ここでのポイントは、

  1. floatの改行にはclear:both;を使おう
  2. floatさせたボックスにmarginを指定するときは確認をしながら

の2つです。

割とサクサク書いてきてますが、このレイアウトを初めて組んだときはかなり苦労しました。 マージンの解釈が違う〜とか、上手く並ばないよぅとか悩みの種はつきません。
そこがスタイルシートの困ったところであり、楽しいところでもあります。 試行錯誤の末の達成感をぜひ味わってください。

次は各種テクニックを導入して見栄えをアップさせます


←前のステップへBACK : 次のステップへGO→


一覧へ戻る


Last Modified 2004-10-02 © きくちゃん 2004 - All Rights Reserved