XHTML/CSS・トップ | CSSプロパティ・目次

●ブロック要素をセンタリングする

 CSS2の仕様では幅の決まったブロック要素をセンタリング(centering = 中央揃え)させるには、margin-left と margin-right プロパティ両方の値に"auto"を指定することにより、左右の余白が自動的に調整され、センタリングされることになっています。幅の決まったブロック要素とはあらかじめ幅の持ったtable要素やwidthプロパティを指定したブロック要素のことです。


【CSS】↓

h4 {
 background-color: #0000ff;
 width: 10em;
 margin-left: auto;
 margin-right: auto;
}

【HTML】↓

<h4>レベル4の見出しをセンタリング</h4>

 この方法は、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">のDOCTYPE宣言で作成した文書をウィンドウズ版 IE(v.6.0)のブラウザで確認するとセンタリングされていませんでした。しかし、Netscape(v.7.1利用)のブラウザで確認すると、ちゃんとセンタリングされています。一方、幅を指定したブロック要素を div要素で囲み、text-align プロパティを使い、centerの中央揃えを指定したとします。


【CSS】↓

div {
 text-align: center;
}
h4 {
 width: 10em;
}

【HTML】↓

<div>
 <h4>今度こそセンタリング</h4>
</div>

 今度はウィンドウズ版 IE(v.6.0)ではセンタリングされますが、Netscapeではセンタリングを確認できませんでした。どうしてこのような現象が起こるのでしょうか?Netscape(古いバージョン除く)がCSS2の仕様に正確に対応しているということもありますが、比較的新しい多くのブラウザが、DOCTYPE宣言の内容に応じて表示モードが切り替わるために起こります。(XHTML文書の場合は、XML宣言も関係します。)DOCTYPE宣言が書かれていない場合や、「HTML4.01 Transitional DTD」において、"http://www.w3.org/〜"のURLが記載されていない場合は互換モードで表示され、記載されている場合は標準モードで表示されるといった具合です。つまり、ウィンドウズ版 IE(v.6.0)は"auto"の値が付いた margin プロパティは標準モードでないとセンタリングされないということになります。このように表示モードに影響される点に注意します。しかし、ウィンドウズ版 IEユーザーが圧倒的に多いのもまた事実です。理想的で完ぺきなブロック要素のセンタリングがない以上、現状に沿った方法でセンタリングすることになります。

※「標準モード」「互換モード」は「標準準拠モード」「過去互換モード」と称されることもあります。最近のブラウザは二つの表示モードがあると覚えておいてください。そして、それらはDOCTYPE宣言を含んだDTD(文書型定義)によって表示モードが異なります。(XHTML文書の場合は、XML宣言も関係します。)


【CSS】↓

div {
 text-align: center;
}
h4 {
 background-color: #0000ff;
 width: 10em;
 margin-left: auto;
 margin-right: auto;
}

【HTML】↓

<div>
 <h4>今度はセンタリングされました。</h4>
</div>

 先ほどの二つを組み合わせただけですが、この方法ならば、ウィンドウズ版 IE(v.6.0)でもNetscape(v.7.1)でも互換モードでも標準モードでもセンタリングされます。また、DOCTYPE宣言が書かれていないHTML(<html>のみ)でもセンタリングされることが確認されました。

バグ:
 上記の方法は、Windows版IE、Mozilla、Netscape、Firefox、Operaの各ブラウザでセンタリング有効ですが、Netscape(v4.0)、Macintosh版IE(v4.5)ではブロック要素のセンタリング不可です。ただし、Netscape(v4.0)、Macintosh版IE(v4.5)の両方ともtable要素のセンタリングは可。

※ { margin-left: auto; margin-right: auto } の代わりに、{ margin: auto } としても同じようにセンタリングされます。ちなみに、"margin: auto"は上下左右のマージンを自動調整してくれます。


【CSS】↓

div.sample {
 text-align: center;
}
h4.mihon {
 background-color: #0000ff;
 width: 10em;
 margin: auto;
}

【HTML】↓

<div class="sample">
 <h4 class="mihon">今度はセンタリングされました。</h4>
</div>


 左右のマージン(余白)に同じ幅の値を指定することにより、ブロック要素本体だけならばセンタリングに近いレイアウトにすることは可能です。(「余白部分を指定する」を参照)ただし、ブロック要素に幅を指定すると、ウィンドウズ版 IE(v6.0)、Netscape(v.7.1)両方のセンタリングを確認することはできませんでした。また、センタリングされるのはブロック要素の本体のみです。ブロック要素の内容領域をセンタリングするための方法ではないので注意が必要です。ブロック要素をセンタリングして、かつ、その中に含まれるテキストを「行揃え」させるには"text-align"プロパティを再度使う必要があります。もう少し厳密に言いますと、text-align"プロパティは子要素に敬称するプロパティですから親要素と異なる行揃えをする場合は再度、text-align"プロパティで子要素に指定する必要があります。

■関連ページ

XHTML/CSS・目次 | 領域(ボックス)・目次

Copyright (C) 2004-2007 http://www.xml.vc/