こんにちは！お久しぶりです！

健康診断やらなんやらで間が空いてしまっていやはや。。。
しかも今後もちょっと忙しそうなんで、しばらく週一更新になるやもしれません。。。

さて、今回のテーマは「ページレイアウト」！
よく使うレイアウトから使ったことの無いレイアウトまで、css、特徴なんかをまとめてみたいと思います。

基本配置

まずはページ全体のレイアウト。画面に表示したときの、配置をまとめます。
HTMLは以下。

<div id="all">
    <div id="header">ヘッダー：ページタイトル、ロゴ、ナビ等</div>
    <div id="main">メインとなるコンテンツ</div>
    <div id="footer">フッター：コピーライト等</div>
</div>

左配置サイズ固定

一番基本的なレイアウト。floatなんかは指定しなくても幅固定でいけるはず。

#all {
    width:850px;
}

表示されたとき、一番最初に目がいく場所にヘッダーがある。ディスプレイの横幅が大きいと右側が寂しくなってしまう可能性も。

中央配置サイズ固定

中央配置。一番よく見るレイアウトかも。

body {
    text-align:center;/*IE向け中央揃え*/
}
#all {
    width:850px;
    margin: 0 auto;/*Fx向け中央揃え*/
    text-align:left;/*中の文字まで中央揃えになるのを直しておく*/
}

このブログも中央配置ですね。ディスプレイの横幅が大きくてもあまり違和感はないかな。

右配置サイズ固定

あまり見ないレイアウトですね。あったら教えてほしいです。

#all {
    float:right;
    width:850px;
}

一番最初に目がいく部分がお留守になってしまうのでもったいないレイアウトですね。珍しさはあるかも。

100%配置サイズ可変

画面の幅いっぱいに配置するレイアウト。

#all {
    width:100%;
}

ウィンドウの大きさによってサイズが変わるので、見え方は様々。

フリー配置

画面上に自由配置。flashサイトでよくみますね。cssでやれと言われたら泣きます。

時間が無くなったので、今日はここまで。
次回は中身のレイアウトをまとめます。