21. レイアウト（１）
ここでは、これまで説明してきたCSSの各プロパティを使って、実際にいくつかのレイアウトを行ってみる。
マージンの調整
各マージン幅の初期値はゼロであるが、これは仕様上の初期値であり、現実のブラウザでは、各要素ごとに初期値を上書きしている。 例えば、多くのブラウザでは、p要素の前後に１行の空行が出現する。
例えば、つぎのようなXHTMLのコードの場合を考えてみる。
<p>1つ目の段落です</p>
<p>2つ目の段落です</p>
<p>3つ目の段落です</p>
まずは、スタイルシートを適用せずに、一般的なブラウザで表示すれば、以下のような結果が得られるだろう。
つぎに、以下のようなp要素のマージン幅をゼロに設定したスタイルシートを適用した場合の 表示結果を示す。
p {
margin-top: 0;
margin-bottom: 0;
}
そこで、すべての要素についてブラウザに依存しないマージン幅を設定するならば、ユニバーサルセレクタを使用して、 マージン幅をゼロに設定しておくことがよい。同様に、パディング幅もゼロにすれば、なお、よい。 以下にスタイルシートの例を示す。
* {
margin: 0;
padding: 0;
}
センタリング
ブロック内におけるテキストの「センタリング」には、「text-alignプロパティ」を使う。 例えば、h1要素に以下のスタイルを指定して表示した場合、つぎのような表示結果になるだろう。
* {
margin: 0;
padding: 0;
}
h1 {
color: #000;
background-color: #ccc;
text-align: center;
}
では、h1要素の横幅を'250px'として、body要素の横幅に応じて、常にh1要素自体がセンタリングできるようにレイアウトしてみよう。 これには、"margin-leftプロパティ"と"margin-rightプロパティ"に'auto'を指定する。 これによってブロックレベル要素のセンタリングが可能となる。
以下に、そのスタイルシートと表示結果を示す。
* {
margin: 0;
padding: 0;
}
h1 {
width: 250px;
color: #000;
background-color: #ccc;
text-align: center;
margin-left: auto;
margin-right: auto;
}
ただし、ブラウザによっては、'auto'を指定してもセンタリングされないものがある。 これを避けるためには、親要素であるbody要素の"text-alignプロパティ"に'center'を指定する。
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
h1 {
width: 250px;
color: #000;
background-color: #ccc;
text-align: center;
margin-left: auto;
margin-right: auto;
}
実は、このコードでもまだ不十分である。body要素の"text-alignプロパティ"でセンタリングを行うと、 ブラウザによっては、その子孫要素のテキストもセンタリングされてしまうことがある。 以下のXHTMLコードに先のスタイルシートを適用した場合の表示結果を示す。
<body>
<h1>h1要素の見出し</h1>
<p>段落は左寄せで始まります。</p>
</body>
これを避けるためには、つぎのようなスタイルコンテナを用いたスタイルシートを用意する。
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
div#body {
text-align : left;
}
h1 {
width: 250px;
color: #000;
background-color: #ccc;
text-align: center;
margin-left: auto;
margin-right: auto;
}
このスタイルシートを適用するためにXHTMLコードを、つぎのように修正する。
<body>
<div id="body">
<h1>h1要素の見出し</h1>
<p>段落は左寄せで始まります。</p>
</div>
</body>
すると、この表示結果は、つぎのようになる。
リストのレイアウト
つぎのようなリスト構造を持ったXHTMLについて考えてみる。
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
<ul>
このXHTMLコードをスタイル指定せずに表示すれば、一般的なブラウザでは、つぎのように表示されるだろう。
つぎに以下のスタイルを適用してみよう。
* {
margin: 0;
padding: 0
}
ul li {
display: inline;
list-style-type: none;
}
これは、li要素をインラインブロック化したものだ。この場合の表示は、以下のような表示になるだろう。
つぎに、もう少し見栄えを考えて、ボタン風にしてみよう。
* {
margin: 0;
padding: 0
}
ul li {
width: 5em;
color: #000;
background-color: #ccc;
display: inline;
list-style-type: none;
padding: 2px 10px;
border: outset #ccc;
}
これは、以下のように表示されるだろう。
さらに、ボタンのような動きを加えてみよう。
* {
margin: 0;
padding: 0
}
ul li {
width: 5em;
color: #000;
background-color: #ccc;
display: inline;
list-style-type: none;
padding: 2px 10px;
border: outset #ccc;
}
ul li:hover {
background-color: #999;
padding: 2px 10px;
border: inset #999;
}
これによりカーソルをボタンに重ねると、ボタンが押されているように見えることだろう。
後は、これを応用して、li要素内にa要素を記述し、a要素に動きを加えれば、ボタンによるリンクが見栄えとして完成することになる。 また、ボタンでなく、平面的なパネルとし、横１行に表示すれば、「ナビゲーションバー」としても使える。
回り込み
まずは、つぎのXHTMLコードと、その表示結果を見てほしい。
<h1>回り込み</h1>
<p><img alt="四角形" src="images/image1.jpg" width="61" height="61"/></p>
<p>floatプロパティは、フロートの配置方法を指定する。
フロートの前後に配置される位置指定されていない通常のボックスは、
フロートを無視して配置される。
ただし、フロートに後続するラインボックスは、その幅がフロート分だけ短くなる。
floatプロパティの書式は以下のとおりである。</p>
この表示は、「回り込み」のない通常の表示である。ここで、画像部分に回り込みを指定する。 つまり、画像部分を「フロート（浮動体）」として、左に寄せ、その右側部分にテキストを回り込ませるわけだ。 そのスタイルシートは、以下のようになる。
img { float: left; }
このスタイルを指定した場合の表示は、つぎのようになるだろう。
このとき、XHTMLコードを以下のように記述したときは、どうだろうか？
<h1>回り込み</h1>
<p>floatプロパティは、フロートの配置方法を指定する。
フロートの前後に配置される位置指定されていない通常のボックスは、
フロートを無視して配置される。
ただし、フロートに後続するラインボックスは、その幅がフロート分だけ短くなる。
floatプロパティの書式は以下のとおりである。</p>
<p><img alt="四角形" src="images/image1.jpg" width="61" height="61"/></p>
このコードでは、テキストのみのp要素の後に画像を含むp要素のブロックが記述されている。 XHTMLコードの記述順序は表示順序と密接に関係している。 つまり、基本となる表示順序は、記述した順序で表示されることになる。このような順番になっている構造を「線形」と呼ぶ。
前述のコードを線形で表示した場合、最初にh1要素ブロックが画面幅で表示され、つぎにp要素ブロック、 それから画像が左側にフロートされるのである。回り込みを使用する場合、こうした"線形"という概念は、 非常に重要になる。
では、XHTMLコードを元に戻して、つぎのスタイルシートを考えてみよう。
h1,img { float: left; }
この表示結果は、つぎのようになる。
このようにフロート指定は、画像だけでなくさまざまな要素に指定できる。また、h1要素と画像が共にフロートであるから、 余白が許す限り、指定されたフロートは寄せて表示される。では、つぎの例を見てみよう。
<h1>回り込み</h1>
<p>floatプロパティは、フロートの配置方法を指定する。
フロートの前後に配置される位置指定されていない通常のボックスは、
フロートを無視して配置される。
ただし、フロートに後続するラインボックスは、その幅がフロート分だけ短くなる。
floatプロパティの書式は以下のとおりである。</p>
<p><img alt="四角形" src="images/image1.jpg" width="61" height="61"/></p>
<table border="1">
<tr><th colspan="2">floatプロパティ</th></tr>
<tr><th>値</th><td>left | right | none | inherit</td></tr>
<tr><th>初期値</th><td>none</td></tr>
<tr><th>適用対象</th><td>すべての要素</td></tr>
<tr><th>継承</th><td>しない</td></tr>
<tr><th>パーセント値</th><td>受けつけない</td></tr>
</table>
<dl>
<dt>left</dt>
<dd>左側にフロートするブロックボックスを生成する。
後続の内容は、"clearプロパティ"の指定に従って、
ボックスの右側に上から回り込む。</dd>
<dt>right</dt>
<dd>右側にフロートするブロックボックスを生成する。
後続の内容は、"clearプロパティ"の指定に従って、
ボックスの左側に上から回り込む。</dd>
<dt>none</dt>
<dd>フロートするブロックボックスを生成しない。</dd>
</dl>
このXHTMLコードに、以下のようなスタイルシートを適用してみよう。
h1 { float: left; }
img { float: right; }
table { float: left; }
この場合、h1要素が左フロートで表示され、余白部分にp要素のテキストが表示される。 つぎに画像が右フロートされ、その余白にテーブルが左フロートで表示される。 さらに、余白があれば、そこにdl要素のブロックが回り込んで表示されることになる。
このとき、もしdl要素の部分を回り込ませたくなければ、dl要素に「回り込み解除」を指定すればよい。
h1 { float: left; }
img { float: right; }
table { float: left; }
dl { clear: both; }
