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

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

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

今回もレイアウト設計を、初めにしてしまいましょうね。
３カラムレイアウトはした図のようになりますよ。
メイン部分のスペースを少し小さくして、右サイドと同じサイズのスペースを左側にも設けました。
設計の仕方は、２カラムレイアウトと、あまり変わりませんね＾＾

前回までに作った枠の名前は「body」「contents」「main」「side（今回の右サイド部分）」でしたね。
今回追加するのは、左サイド部分（名前を「in-side」）、メイン部分（「名前を「in-main」」）２つになりますよ。
左サイド部分と右サイド部分を括（くく）るのが、 「main」になるわけです。

  • 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（幅）：490px
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に0px
  • サイド部分の枠の名称：sideの設定（#side）
    • float（配置）：right（右側）
    • width（幅）：130px
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に10px
    • background-color（背景色）：orange（オレンジ）
  • サイド部分の枠の名称：in-sideの設定（#in-side）
    • float（配置）：right（右側）
    • width（幅）：130px
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に10px
    • background-color（背景色）：yellow（黄色）
  • サイド部分の枠の名称：in-mainの設定（#in-main）
    • float（配置）：right（右側）
    • width（幅）：320px
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に10px
    • background-color（背景色）：#66ccff（水色）
▼XHTML部分
（IE6ではXML宣言による実装差異がある：回避策⇒XML宣言をしない）
<body>
<div id="body">

<div id="contents">

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

<div id="side">右サイド</div>
<div class="c-both"></div>
</div>

</div>
</body>

赤文字部分が今回追加したXHTMLのソースコードですよ。
どうですか？前回とそっくりな構造ですね。
左右にレイアウトを振るときは、こんな風に書き足していくと出来ちゃうんですよ♪

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

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

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

#main {
float: left;
width: 490px;
margin: 0px;
padding: 0px;
}

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

#in-side {
float: left;
width: 130px;
margin: 0px;
padding: 10px;
background-color: yellow;
}

#in-main {
float: right;
width: 320px;
margin: 0px;
padding: 10px;
background-color: #66ccｆｆ;/* 水色 */
}

.c-both {
clear: both;
}

▼表示例

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

次は、４カラムレイアウトに進みますよ。
あまり実用性のないレイアウト例かと思いますが、これができちゃうと、かなりCSSレイアウトが身についた感触が沸いちゃうんです。
わかりやすい枠の名前を考えないといけませんね。
ちょーっと考えてから、次を読み進めてみてくださいな＾＾

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