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

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

とうとうマルチレイアウトの最終章にやってきました！（←ちょっと大袈裟）
最後は、「レイアウトを考える」の「４カラムType4-a」のレイアウトを例にお話しますね。
今までのところで、忘れてしまったり、自信がないかも･･･って思うところがあったら、振り返って復習してみてください＾＾

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

さあ、まず最初にすること。そうですね。レイアウト設計をしましょう。
４カラムのレイアウトは、２カラムレイアウトの応用ですよ。
レイアウト設計図は、下図のようになります。
エリアAとエリアＢ、エリアＣとエリアＤをセットで考えてみてくださいね。

枠の名前は、前回までのを引き継がずに、ちょっと変えてみましょう。
４カラムレイアウトは、メイン部分に相当するスペースが無い場合が多いと思うので、目的に見合った名前にしてみましたよ。

「body」「contents」はそのままで、４つに分割した名前は「area-a」「area-b」「area-c」「area-d」にしました。
こうしておくと、配置の順番を変えてしまっても、どこの事を指しているのかがわかりますね。

ちなみに、今回の場合は、エリアＡ、エリアＢ、エリアＣ、エリアＤの全てが同じ設定なので、「area」などと名前付けして、ひとつで済ませてしまってもＯＫですよ♪
その時は、id要素じゃなくて、class要素で指定してくださいね。
⇒ [参照] 実際にCSSでレイアウトをする前に（idとclassの違い）

  • 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
  • エリアＡ＋エリアＢセットの枠の名称：leftの設定（#left）
    • float（配置）：left（左側）
    • width（幅）：320px
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に0px
  • エリアＣ＋エリアＤセットの枠の名称：rightの設定（#right）
    • float（配置）：right（右側）
    • width（幅）：320px
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に0px
  • エリアＡの枠の名称（#area-a）
    • float（配置）：left（左側）
    • width（幅）：150px
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に5px
    • background-color（背景色）：yellow
  • エリアＢの枠の名称（#area-b）
    • float（配置）：right（右側）
    • width（幅）：150px
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に5px
    • background-color（背景色）：#66ccff（水色）
  • エリアＣの枠の名称（#area-c）
    • float（配置）：left（左側）
    • width（幅）：150px
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に5px
    • background-color（背景色）：orange
  • エリアＤの枠の名称（#area-d）
    • float（配置）：right（右側）
    • width（幅）：150px
    • margin（外側の余白）：上下左右に0px
    • padding（内側の余白）：上下左右に5px
    • background-color（背景色）：#99cc33（緑色）
▼XHTML部分
（IE6ではXML宣言による実装差異がある：回避策⇒XML宣言をしない）
<body>
<div id="body">

<div id="contents">

<div id="left">
<div id="area-a">エリアＡ</div>
<div id="area-b">エリアＢ</div>
<div class="c-both"></div>
</div>

<div id="right">
<div id="area-c">エリアＣ</div>
<div id="area-d">エリアＤ</div>
<div class="c-both"></div>
</div>

<div class="c-both"></div>

</div>

</div>
</body>


▼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;
}

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

#right {
float: right;
width: 320px;
margin: 0px;
padding: 0px;
}

#area-a {
float: left;
width: 150px;
margin: 0px;
padding: 5px;
background-color: yellow;
}

#area-b {
float: right;
width: 150px;
margin: 0px;
padding: 5px;
background-color: #66ccff;/* 水色 */
}

#area-c {
float: left;
width: 150px;
margin: 0px;
padding: 5px;
background-color: orange;
}

#area-d {
float: right;
width: 150px;
margin: 0px;
padding: 5px;
background-color: #99cc33;/* 緑色 */
}

.c-both {
clear: both;
}

▼表示例

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

ここで、私が、４カラムレイアウトにチャレンジしたサイトをご紹介しますね。
初弾ということで、ちょっとショボイかもぉ〜＾＾；

⇒東京23区中心・駅近ホテルズ-駅から近い国内ホテルをネットで予約-

リンクしたページの区がズラリと並んでいるところが、４カラムレイアウトです。
HTML 4.01 Transitional で作っていますよ。
もちろん、Web標準を意識しています。
このサイトね、Googoleに申請してから、５日後にはロボット（クローラ）に拾ってもらって、検索結果に載っかったんですよ。
Web標準は、本当にロボットに優しいことが、ひとつだけ証明されちゃいました（＾＾）ｖ

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