22. レイアウト(2)

ここでは、画面全体のレイアウトについて説明する。

回り込みの応用

線形」という概念は、すでに見てきたが、まずは、その線形の状態でのXHTMLコードを示そう。

<body>
    <div id="block_A">
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
    </div>
    <div id="block_B">
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
    </div>
</body>

このコードに以下のスタイルシートを適用する。

* {
    margin: 0;
    padding: 0;
}
body {
    color: #000;
    background-color: #fff;
}
#block_A {
    color: #000;
    background-color: #339;
}
#block_B {
    color: #000;
    background-color: #ccc;
}

線形の状態のままでは、つぎのような表示結果になる。

線形状態でのブロック表示

このブロックを左右に分けて表示させることを考えてみる。これには、フロートを利用する。

* {
    margin: 0;
    padding: 0;
}
body {
    color: #000;
    background-color: #fff;
}
#block_A {
    width: 30%;
    float: left;
    color: #000;
    background-color: #339;
}
#block_B {
    color: #000;
    background-color: #ccc;
}

肝心なことは、寄せたいブロックのフロート指定と、そのブロックの幅を設定することだ。 ここでは幅に"%値"を使用しているが、画面幅に左右されないレイアウトを考えるなら、"ピクセル値"の方がよいだろう。この表示結果は、つぎのようになる。

左右2段組み表示

上下ブロックと2段組み

いま図のような線形状態で表されるXHTMLをレイアウトし、上下ブロック(※ 上下ブロックは、ヘッダ、フッタとして使える。)を持った形式にしてみよう。

上下ブロックを持ったレイアウト

<body>
    <div id="block_A">
        <p>abcdefg hijklmn opqrstu vwxyz</p>
    </div>
    <div id="block_B">
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
    </div>
    <div id="block_C">
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
    </div>
    <div id="block_D">
        <p>abcdefg hijklmn opqrstu vwxyz</p>
    </div>
</body>

このXHTMLコードに以下のスタイルシートを適用する。

* {
    margin: 0;
    padding: 0;
}
body {
    color: #000;
    background-color: #fff;
}
#block_A {
    background-color: #339;
}
#block_B {
    width: 30%;
    float: left;
    background-color: #ccc;
}
#block_C {
    background-color: #0cc;
}
#block_D {
    clear: both;
    background-color: #c00;
}

ここで肝心なことは、フロートに関しては、前述のとおりだが、下のDブロック部分で、「フロートを解除する」ことだ。この表示結果はつぎのようなる。

上下ブロックを持ったレイアウトのサンプル表示

多段組レイアウト

このようにフロートを利用すれば、いくらでも複雑なレイアウトを組むことができる。(※ フロート以外に絶対配置による方法もあるが、本書では割愛する。)では、つぎのXHTMLコードをレイアウトしてみよう。

<body>
    <div id="block_A">
        <p>abcdefg hijklmn opqrstu vwxyz</p>
    </div>
    <div id="block_B">
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
    </div>
    <div id="block_C">
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
    </div>
    <div id="block_D">
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
        <p>abcdefg hijklmn opqrstu vwxyz</p>
    </div>
    <div id="block_E">
        <p>abcdefg hijklmn opqrstu vwxyz</p>
    </div>
</body>

このコードでは、ブロックAを上部バー、ブロックEを下部バー、残りのブロックをその間に3段組みでレイアウトしてみる。

* {
    margin: 0;
    padding: 0;
}
body {
    color: #000;
    background-color: #fff;
}
#block_A {
    background-color: #339;
}
#block_B {
    width: 20%;
    float: left;
    background-color: #ccc;
}
#block_C {
    width: 60%;
    float: left;
    background-color: #0cc;
}
#block_D {
    width: 20%;
    float: right;
    background-color: #ccc;
}
#block_E {
    clear: both;
    width: 100%;
    background-color: #c00;
}

このスタイルシートを適用すれば、つぎのような表示結果になるだろう。

多段組レイアウトのサンプル表示

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.