ページレイアウトまとめ その2
こんにちは！先日の健康診断で見事にC判定をくらってしまったゆぅです！本業（？）が忙しすぎてなかなか更新できません。（余裕のあるときにエントリーをストックしておかねば。。。）
さて、今回のテーマは前回にひき続き「ページレイアウト」！
前回はページ全体の配置、今回は中身のレイアウトをまとめてみたいと思います。
今回cssコードでとても長いエントリーになってしまったので、ページ内リンクをつけときます。必要なところだけ読んでいただければ。（でもタイトルだけではよくわからんね。。。）
下記のレイアウトいろいろで使うHTML
<div id="all">
<div id="header">ヘッダー：ページタイトル、ロゴ、ナビ等</div>
<div id="contents">
<div id="main"> メインとなるコンテンツ</div>
<div id="sub">バナー等、サブコンテンツ</div>
</div>
<div id="footer">フッター：コピーライト等</div>
</div>
前回使ったのほぼ同じ。サイドに入るsubっていうのを足してます。（sideって言う名前にしたらわかりやすかったかも？）
中身のレイアウトいろいろ
幅固定2カラムレイアウト（左メイン）
このブログもこのレイアウトです。ユーザーはまずヘッダー部分を見て、次に本文が目に入るレイアウトですね。
#all {
width:980px;
margin:0 auto;
}
#header,
#contents,
#footer {
clear:both;
}
#main {
float:left;
width:680px;
}
#sub {
float:right;
width:236px;
}
簡単に書くとこんな感じ。サイズは適宜変えてください。
幅固定3カラムレイアウト（左メイン）
幅固定2カラムレイアウト（左メイン）の応用編ですね。情報量の多いブログによくあるレイアウトです。ガジェットやバナーをたくさん入れたい人におすすめ。cssはsubの中を二つにわけるだけなので割愛します。
幅固定2カラムレイアウト（右メイン）
ユーザーはまずヘッダー部分を見て、次にサブコンテンツが目に入るレイアウト。
サブコンテンツにナビゲーションが入る場合に初心者ユーザーが迷わずに済みますね。
#all {
width:980px;
margin:0 auto;
}
#header,
#contents,
#footer {
clear:both;
}
#main {
float:right;
width:680px;
}
#sub {
float:left;
width:236px;
}
先ほどの幅固定2カラムレイアウト（左メイン）の逆なわけですから簡単ですね。
ポイントはページの記述順。
生身の人間には記述順（コード）なんて関係ないのですが、世の中には検索エンジンのクローラーというロボットさんがおられるのです。そのこは見た目なんか関係なしにコード上から順にスルーっと見て行ってくれるらしいので、素直に上（ヘッダー）、左（サブ）、右（メイン）、下（フッター）の順にコーディングするとサブを見てからメインという順になってしまうわけですね。
「メインコンテンツのSEOを強くしたい！」っていうことならこう見て行ってほしいわけです。
サブの中にナビゲーション（重要なコンテンツ）がある場合はサブが先のほうが良いかと思いますが。。。
幅可変2カラムレイアウト（右メイン）
幅固定2カラムレイアウト（右メイン）の可変バージョン。実は可変のレイアウトってあまりやったことがないので自信ナシ。いつかやるであろう可変レイアウトのためにまとめます。
記述順については前述の通り。サブは固定幅にしてみます。
#all {
width:100%;
}
#header,
#contents,
#footer {
width:100%;
clear:both;
}
#contents {
position:relative;
}
#main {
margin-left:236px;
}
#sub {
position:absolute;
top:0;
left:0;
width:236px;
}
#contentsにposition:relative;を指定して絶対配置の基準点にし、サブ（#sub） はposition:absolute;で左上に。メイン(#main)に margin-left:236px;でサブの幅分余白をつける。。。うぉぅ！難しい！
サブも可変なら簡単なことに実験していて気がつきました。。。あまりないだろうけど。。。
#all {
width:100%;
}
#header,
#contents,
#footer {
width:100%;
clear:both;
}
#main {
float:right;
width:80%;
}
#sub {
float:left;
width:20%;
}
幅固定3カラムレイアウト（中央メイン）
通称：やほーレイアウト（笑）。中央にメインを配置して両側にサブのレイアウト。
使用HTMLは下記。
<div id="all">
<div id="header">ヘッダー：ページタイトル、ロゴ、ナビ等</div>
<div id="contents">
<div id="main"> メインとなるコンテンツ</div>
<div id="sub1">バナー等、サブコンテンツ1</div>
<div id="sub2">バナー等、サブコンテンツ2</div>
</div>
<div id="footer">フッター：コピーライト等</div>
</div>
本当はidにナンバー振りたくないけど今回は分かりやすさ重視で！
#all {
width:980px;
margin:0 auto;
}
#header,
#contents,
#footer {
width:100%;
clear:both;
}
#contents {
position:relative;
}
#main {
float:left;
width:508px;
margin-left:236px;
}
#sub1 {
position:absolute;
top:0;
left:0;
width:236px;
}
#sub2 {
float:right;
width:236px;
}
今までのレイアウトの応用ですね。いきなりやれと言われたらパニクるレベル。←弱
ついでに可変（サブは固定幅）も。
#all {
width:100%;
}
#header,
#contents,
#footer {
width:100%;
clear:both;
}
#contents {
position:relative;
}
#main {
margin:0 236px;
background:#FFFF99;
}
#sub1 {
position:absolute;
top:0;
left:0;
width:236px;
background:#f00;
}
#sub2 {
position:absolute;
top:0;
right:0;
width:236px;
background:#f00;
}
これも全部可変のほうが簡単かもしれない。。。
もうちょっと簡単な方法を見つけたら追記するかもです。
※一応全てのレイアウトを実験しながら書いていますが、うまくいかなかったらごめんなさい＆コメントください。直します。
