トップページ >>
<< １カラム（１段組）レイアウト || ３カラム（３段組）レイアウト >>
[第０１３号]

２カラム（２段組）レイアウト

今回は、「レイアウトを考える」の「２カラムType2-a」のレイアウトを例にお話します。
超基本になるところについては、前回の「１カラム（１段組）レイアウト」を参照して復習してみてくださいね。

さて、前回学んだサンプルをもとに、２カラム（２段組）にするための記述を追加してみますね。

まず、下のサイズを記入してあるカラフルな図を見てください。
少し複雑ですが、白色背景の内側の部分が今回追加する部分です。
図をよーく見てイメージを膨らませてくださいね。

今回準備する枠は、前回分に加えて、左側のメイン部分と右側のサイド部分の二つです。
メイン部分の名前を「main」、サイド部分の名前を「side」にすることにしますね。
前回のメイン部分の名称は「body」にしましたので、この名前は使ってはいけませんよ。
⇒実際にCSSでレイアウトをする前に（idとclassの違い）

それから、もうひとつ枠がいるんですよ。
これを忘れると痛い目に遭いますからね〜！！！
メイン部分とサイド部分を括（くく）る枠、グループ化する枠が必要なんです。
もうこれはルールとして覚えちゃってくださいね！
おっと、この枠の名前を「contents」とすることにします＾＾

  • body属性の設定･･･済
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に0px
    • background-color（背景色）：#cc0000（ワインレッド）
    • text-align（テキストの行揃え）：center（中央揃え）
  • bodyの設定（#body）･･･済
    • width（幅）：640px
    • margin（外側の余白）：上下は20px、左右はauto（自）
    • padding（内側の余白）：上下左右に20px
    • background-color（背景色）：white（白）
    • text-align（テキストの行揃え）：left（左揃え）
  • メイン部分とサイド部分をグループ化する枠の名称：
    contentsの設定（#contents）
    • width（幅）：640px･･･#bodyのwidthと同じサイズにする
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に0px
  • メイン部分の枠の名称：mainの設定（#main）
    • float（配置）：left（左側）
    • width（幅）：470px･･･※１
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に10px
    • background-color（背景色）：#66CCFF（水色）
  • サイド部分の枠の名称：sideの設定（#side）
    • float（配置）：right（右側）
    • width（幅）：130px･･･※１
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に10px
    • background-color（背景色）：orange（オレンジ）

※１
前回のお話を思い出してくださいね。
「width（幅） に設定したサイズと padding（内側の余白）の合計値が、実際のスペース」ということでした。
つまり、『「width（幅）」＋「padding（内側の余白）」 = 確保したいスペース』ということですね。
今回のメイン部分の例で言うと、490pxのスペースが確保したくて、内側の余白の左右サイズが10pxだから、490px - （ 10px + 10px ） = 470px が指定してあるんですよ。
サイド部分も同じ考え方でイケますね。
150px - （ 10px + 10px ） = 130px です。OKですか？＾＾

▼XHTML部分
（IE6ではXML宣言による実装差異がある：回避策⇒XML宣言をしない）
<body>
<div id="body">

<div id="contents">
<div id="main">メイン</div>
<div id="side">サイド</div>
<div class="c-both"></div>
</div>

</div>
</body>

メイン部分とサイド部分は、あなたの意図で入れ替えてもＯＫですよ。
SEO的には、メニューに使われることが多いサイド部分を先に持ってくるより、本文が書かれているメイン部分を持ってくるほうがメリットがあるかな？といったトコロですね。

▼CSS部分
body {
margin: 0px;
padding: 0px;
background-color: #cc0000;/* ワインレッド */
text-align: center;
}

#body {
width: 640px;
margin: 20px auto;
padding: 20px;
background-color: white;
text-align: left;
}

#contents {
width: 640px;
margin: 0px;
padding: 0px;
}

#main {
float: left;
width: 470px;
margin: 0px;
padding: 10px;
background-color: #66CCFF;/* 水色 */
}

#side {
float: right;
width: 130px;
margin: 0px;
padding: 10px;
background-color: orange;
}

.c-both {
clear: both;
}

最後の仕上げに、これまで触れてこなかったCSSの「ある指定」があります。
それがclear指定です。
CSS部分の一番下にある clear: both がその記述ですよ。
XHTML部分の記述では、<div class="c-both"></div> で関連付けをしていますね。
これは、左右配置の解除をするためのものです。
この解除指定を忘れてしまうと、何かと意図しないレイアウトになっていきますので、忘れずに指定するようにしましょうね。

float指定のleft、rightを入れ替えると、メイン部分とサイド部分のレイアウト位置を変えることもできます。
あなたの好みで変えてみましょう＾＾

▼表示例

▲イメージ図です。実際の表示とはサイズ（実寸の半分）が異なります<(__)>

ちょっと、ここで、どーでもいい失敗ネタを披露しますね＾＾；
CSS部分のcontentsでwidthを設定していますよね。
これ、指定しなかったらどうなると思いますか？
まぁ、ヘンテコな現象が起こります。
Internet Explorer 6で表示してみると、どーしても一行ほどの隙間が開いてしまうんです！
キチンとすべきことをしないと、また、意味不明なものを仕込んでしまうと、可笑しな現象が起きてしまうんですね。
指定すべきところは、キッチリと指定していきましょうね。
空要素（空タグ）など、禁止ですよ〜＾＾

このページのトップに戻る
<< １カラム（１段組）レイアウト || ３カラム（３段組）レイアウト >>