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段組み
いま図のような線形状態で表される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;
}
このスタイルシートを適用すれば、つぎのような表示結果になるだろう。