レイアウトが崩れたとき

レイアウトが崩れたときは、幅の和がどこかであふれて段ずれを起こしているので、余計に幅をとっている要素を探すことです。
まずは概略のレイアウトシートを作り、幅を記入し、子要素の幅の和が親要素より若干小さいことを確認しましょう。
場合によっては要素中の画像や文字列が余計に幅を大きくしていて、それが原因として段ずれを起こしている場合もあります。目視でわかる場合もありますが、わからない場合は一つずつ要素を消していきましょう。

広告

4段組レイアウトの方法

4段組レイアウトの例です。

HTMLソース

サンプルソース

<body>
    <div id="header"></div>
    <div id="area1">
        <div id="area1-1">
            <div id="area1-1-1"></div>
            <div id="area1-1-2"></div>
        </div>
        <div id="area1-2">
            <div id="area1-2-1"></div>
            <div id="area1-2-2"></div>
        </div>
    </div>
    <div id="footer"></div>
</body>

ヘッダーとフッターの間にarea1というコンテナクラスを作り、2分割しました。4段組レイアウトにするためさらに2分割しています。

CSSソース

サンプルソース

div#header { width : 800px; }
div#area1 { width : 800px; }
div#area1-1 {
    float : left;
    width : 394px;
}
div#area1-1-1 {
    float : left;
    width : 191px;
}
div#area1-1-2 {
    float : right;
    width : 191px;
}
div#area1-2 {
    float : right;
    width : 394px;
}
div#area1-2-1 {
    float : left;
    width : 191px;
}
div#area1-2-2 {
    float : right;
    width : 191px;
}
div#area1:after{
    display : block;
    clear : both;
    height : 0;
    visibility : hidden;
    content : ".";
}
div#footer { width : 800px; }

3段組レイアウトの方法

3段組レイアウトの例です。

HTMLソース

サンプルソース

<body>
    <div id="header"></div>
    <div id="area1">
        <div id="area1-1">
            <div id="area1-1-1"></div>
            <div id="area1-1-2"></div>
        </div>
        <div id="area1-2"></div>
    </div>
    <div id="footer"></div>
</body>

ヘッダーとフッターの間にarea1というコンテナクラスを作り、2分割しました。Area1-1はさらに2分割しています。

CSSソース

サンプルソース

div#header { width : 800px; }
div#area1 { width : 800px; }
div#area1-1 {
    float : left;
    width : 600px;
}
div#area1-1-1 {
    float : left;
    width : 188px;
}
div#area1-1-2 {
    float : right;
    width : 400px;
}
div#area1-2 {
    float : right;
    width : 188px;
}
div#area1:after{
    display : block;
    clear : both;
    height : 0;
    visibility : hidden;
    content : ".";
}
div#footer { width:800px; }

レイアウトの種類

ウェブサイトのレイアウトの種類はいろいろありますが、有名なものを紹介します。

2カラムレイアウト

ヘッダーとフッターの間に、サイドバーとメインエリアのあるレイアウトです。サイドバーが右にあるものと左にあるものとがあります。

3カラムレイアウト

2カラムレイアウトにサイドバーをもう一つ追加したものです。ヘッダーとフッターの間が3列のものです。

リキッドレイアウト

ブラウザサイズに合わせてヘッダー、メインエリア、フッターなどレイアウトの構成要素の幅が変化するレイアウトです。要素の幅をピクセルでなく%で指定することで実現します。

エラスティックレイアウト

ブラウザの文字サイズに合わせて変化するレイアウトです。要素の幅をピクセルでなくemで指定することで実現しています。