ブログやWordpressのテンプレートのデザインは、ブロックをCSSによって指定していくのが基本です。
ここ数日いくつかの問題に直面しながらなんとか基本構造を理解したので忘れないためにメモしておこうと思います。
●まず作りたかったのはこんなデザイン。
●そのための基本構造として下図のような構成を考えました。
HTMLはこんな感じ。
<body>
<div id="wrapper">
<div id="flash">フラッシュイメージ</div>
<div id ="main">
<div id="header"></div>
<div id="contents"></div><div id="menu"></div>
</div> ←mainを閉じる
<div id="footer">コピーライトとか</div>
</div> ←wrapperを閉じる
</body>
ここで、#wrapperという全体を覆うブロック構造を用意するのは、２つ理由があります。
- デザインとして、背景画像を２つ使うため。
●body ……backgroundに水玉背景画像を指定
●#wrapper ……backgroundに背景画像を固定＆オレンジカラーを指定
- #flashと#mainを横並びにする際、離れすぎないようにするため
実は２のほうがより切実な理由になります。
２つのブロックを横並びにするために、CSSでfloatというセレクタを使って下記のように指定します。
（後で詳しく説明します）
CSS
#flash {width:120px;
float:left} ←左寄せ
#main{width:700px;
float:right} ←右寄せ
このように指定したとき、#wrapperがないと、bodyが親要素と考えられます。
つまりこんな風になるわけです。
#mainがbodyに対して右寄せになるため、ウィンドウの幅が広がれば広がるほど、#flashと#mainが離れていってしまいます。
そこで、#flashと#mainを囲む#wrapperを記述し、
CSS
#wrapper {width:850px;}
#flash {width:120px;
float:left}
#main{width:700px;
float:right}
とすることで、flashとmainが離れることを防ぎます。
(…ここまで書いておいて何ですが、実は両方ともleft指定でもOKなんですが）
このとき当然ですが、flashとmainの幅（width)の合計はwrapperより小さくなくてはなりません。
もしflashとmainの合計値がwrapperより大きい場合、mainは横並びにならずflashの下になってしまいます。
これはmainの中に入る、contentsやmenu、headerにも同様にあてはまります。
また、marginやpaddingなどの指定もDOCETYPE宣言とブラウザ毎の解釈により同様の問題が発生します。
このあたりはこちらを参考に。
また、今回のデザインでは全てのブロック要素はウィンドウに対し左に寄っていますが、デザインによっては中央になるようにしたい場合もあるでしょう。
こういった場合にも#wrapperは必要です。
CSS
#wrapper {width:850px;
margin:0 auto;}←これで左右の余白が均等になる。
#flash {width:120px;
float:left}
#main{width:700px;
float:right}
CSSによるレイアウトの基本そのいち。
全ての要素を包む大きなブロック(この場合は#wrapper)をひとつ用意しておく。
この幅の中に全て納まるように他の要素も配置していくわけですから、実質bodyと同じ意味合いを持つといってよいでしょう。
それだけにこの幅をいくつにするかは悩ましいところです。
小さすぎると要素が入りきりませんし、大きすぎるとウインドウからはみ出して見づらいことになります。
この問題は結構昔からあって（フレームによるサイトデザインを考えるとき）、昔はモニタの解像度の最小値（600×800px)にあわせるのが基本とされていました。
つまり横幅800px程度です。
今はモニタの解像度も上がって、1024×768とか1280×1152とか普通になってきていますが、まあ最大1000pxとして、800px～1000pxの間と考えておくのがよいのではないでしょうか。
●HTML
<body>
<div id="wrapper">
<div id="flash">フラッシュイメージ</div>
<div id ="main">
<div id="header"></div>
<div id="contents"></div><div id="menu"></div>
</div> ←mainを閉じる
<div id="footer">コピーライトとか</div>
</div> ←wrapperを閉じる
</body>
●CSS
#wrapper {width:850px;}
#flash {width:120px;
float:left}
#main{width:700px;
float:right}
/*wrapper:850pxに対し、flash:120px+main:700px=820pxですから、flashとmainの間には単純計算で、30px程の余白ができていることになります。*/
次はfloatについての注意事項です。