← 2.20 スタイルコンテナ CSS総目次 2.22 レイアウト（２） →
このページでは，これまで説明してきた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>
<h1>h1要素の見出し</h1>
<div id="body">
<p>段落は左寄せで始まります。</p>
</div>
</body>すると，この表示結果は，つぎのようになります。
ただし，最近のブラウザでは，このような互換性を考慮しなくてもよいものが多くなっています。最初から，互換性を無視して auto のみの指定で，表示できないものは考慮しないのも一つの手段かもしれません。
つぎのようなリスト構造を持った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; }