×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

21. レイアウト(1)

ここでは、これまで説明してきたCSSの各プロパティを使って、実際にいくつかのレイアウトを行ってみる。

マージンの調整

各マージン幅の初期値はゼロであるが、これは仕様上の初期値であり、現実のブラウザでは、各要素ごとに初期値を上書きしている。 例えば、多くのブラウザでは、p要素の前後に1行の空行が出現する。

例えば、つぎのようなXHTMLのコードの場合を考えてみる。

<p>1つ目の段落です</p>
<p>2つ目の段落です</p>
<p>3つ目の段落です</p>

まずは、スタイルシートを適用せずに、一般的なブラウザで表示すれば、以下のような結果が得られるだろう。

スタイルシートを適用しないp要素

つぎに、以下のようなp要素のマージン幅をゼロに設定したスタイルシートを適用した場合の 表示結果を示す。

p {
    margin-top: 0;
    margin-bottom: 0;
}

スタイルシートを適用したp要素

そこで、すべての要素についてブラウザに依存しないマージン幅を設定するならば、ユニバーサルセレクタを使用して、 マージン幅をゼロに設定しておくことがよい。同様に、パディング幅もゼロにすれば、なお、よい。 以下にスタイルシートの例を示す。

* {
    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要素をインラインブロック化したものだ。この場合の表示は、以下のような表示になるだろう。

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;
}

これは、以下のように表示されるだろう。

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;
}
ul li:hover {
    background-color: #999;
    padding: 2px 10px;
    border: inset #999;
}

これによりカーソルをボタンに重ねると、ボタンが押されているように見えることだろう。

li要素のボタン風動作

後は、これを応用して、li要素内にa要素を記述し、a要素に動きを加えれば、ボタンによるリンクが見栄えとして完成することになる。 また、ボタンでなく、平面的なパネルとし、横1行に表示すれば、「ナビゲーションバー」としても使える。

回り込み

まずは、つぎの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要素とimg要素へのフロート指定

このようにフロート指定は、画像だけでなくさまざまな要素に指定できる。また、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; }

回り込みの解除

ページの先頭に戻る


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