Blog Detail

[ CSS ] オーソドックスな3カラム・レイアウト、コーディング

02 4月 18
Kazu
No Comments

 

3カラム・レイアウトのコーディングの手順

  1. 各段の幅を設定。
  2. float を指定して2段組にする。
  3. float したボックス内でさらに float を指定する。

HTMLのコーディング

id=”contents” の中に、id=”main”,”left-side”,”right-side” の div を記述する。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />
    <script src="main.js"></script>
</head>
<body>
<div id="contents">
      <div id="main">
            <p>メインのカラムです。</p>
      </div>
      <div id="left-side">
            <p>左サイドです。</p>
      </div>
      <div id="right-side">
        <p>右サイドです。</p>
      </div>
</div>  
</body>
</html>

div#main と div#left-side を div 要素で囲む。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />
    <script src="main.js"></script>
</head>
<body>
<div id="contents">
<div class="wrap-contents">
    <div id="main">
            <p>メインのカラムです。</p>
      </div>
      <div id="left-side">
            <p>左サイドです。</p>
      </div>
</div>
      <div id="right-side">
        <p>右サイドです。</p>
      </div>
</div>  
</body>
</html>

CSS のコーディング

まず、各ボックスの位置がわかりやすいように、背景に色を付ける。

@charset "utf-8";

#main {
    background-color: red;
}
#left-side {
    background-color: green;
}
#right-side {
    background-color: blue;
}

3カラム・レイアウトのコーディング

要素の幅を設定する。

@charset "utf-8";

.wrap-contents {
    width: 750px;
}
#main {
    background-color: red;
    width: 500px;
}
#left-side {
    background-color: green;
    width: 200px;
}
#right-side {
    background-color: blue;
    width: 160px;
}

#main を500px、左サイドを200px、右サイドを160pxとし、要素間の間隔を50pxとする。

div.wrap-contents は、

#main:500px + #left-side:200px + 間隔:50px = 750px

となる。

3カラム・レイアウトのコーディング

float 属性を設定する。

div.wrap-contents に、float: left; div#right-side に、float: right; を設定する。

@charset "utf-8";

.wrap-contents {
    float: left;
    width: 750px;
}
#main {
    background-color: red;
    width: 500px;
}
#left-side {
    background-color: green;
    width: 200px;
}
#right-side {
    background-color: blue;
    float: right;
    width: 160px;
}

float された要素は浮いてしまうため、親要素は子要素の高さを算出できなくなり、div#contents の高さが0になり、その下の要素が入り込んでしまう。

そのため、親要素(div#contents)に、overflow:hidden; を記述する。

IE 6/7 は、overflow:hidden; に対応していないため、IE 独自属性 zoom 属性を設定する。

width は、

div.wrap-contents 750px + div#right-side 160px + 要素間の間隔 40px = 950 px

を設定する。

#contents {
    overflow: hidden;
    zoom: 1;
    width: 950px;
    margin: 20px auto 0;
}

3カラム・レイアウトのコーディング

overflow:hidden;

fioat を解除できる clearfix に比べ、指定する属性が少なく、気軽に使える。

ただし、ボックスからあふれる部分を隠すため、ボックスからはみ出る表現やドロップシャドウ、印刷が想定される場合には問題が生じやすいため、ケースバイケースで使い分ける必要がある。

div.wrap-contents 内を、float 属性で2段組にする。

#main {
    background-color: red;
    float: right;
    width: 500px;
}
#left-side {
    background-color: green;
    float: left;
    width: 200px;
}

3カラム・レイアウトのコーディング

完成。

3段組を実現する手法には、ほかに様々なものがある。

【参考書籍】