Web標準普及プロジェクト

ブロックレベル要素をセンタリングする方法

一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。

正しいセンタリング方法

テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。

Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロックレベル要素がセンタリングされるのはWindows版のIEのみで、これは同ブラウザのバグです (ただし、IE6の標準準拠モードではこのバグは修正されています)

ブロックレベル要素をセンタリングするには、センタリングしたい要素の左右のマージンをautoにし、ブロックレベル要素に幅を指定するのが正しい方法です。

<div style="border:black;">
	<div style="margin-left:auto;margin-right:auto;width:10em;border:red;">
		ブロックレベル要素
	</div>
</div>
ブロックレベル要素

Windows版のIEへの対策

しかし、標準に準拠した方法とはいえ、95%を超えるシェアを持つWindows版IEを無視することはできない人が多いと思いますので、 標準仕様に準拠しつつ、Windows版IEでもセンタリングできる方法を紹介します。

もしあなたがtransitionalで記述するならdiv要素のalign属性でcenterを指定するのが一番簡単です。 これなら文法的にも正しい訳ですし、手軽なのでこちらを推奨します。 しかし、strictで記述するならalign属性は使えません。あくまでCSSで実現することになります。

Windows版IE以外のブラウザは正しい指定方法でセンタリングされることは既にわかっています。 ということで、あとはIEでセンタリングすれば良いわけです。これの解決にWindows版IEのバグを利用します。 Windows版IEはバグにより、text-align:center;で内在するブロックレベル要素そのものまでセンタリングされます。 これを同時指定すると次のようになります。

<div style="text-align:center;border:black;">
	<div style="margin-left:auto;margin-right:auto;border:red;">
		ブロックレベル要素
	</div>
</div>
ブロックレベル要素

Windows版のIEへの対策の弊害対策

さて、これでブロックレベル要素のセンタリングには成功しますが、 親に指定したtext-align:center;が子に継承されて肝心のブロックレベル要素の内容までブロック内でセンタリングされてしまいます。 この弊害を無くすには、子要素にtext-align:left;を指定してあげます。

<div style="text-align:center;border:black;">
	<div style="margin-left:auto;margin-right:auto;text-align:left;border:red;">
		ブロックレベル要素
	</div>
</div>
ブロックレベル要素

この方法であればMozilla、IE6、Opera6/7において、全てブロックレベル要素のセンタリングに成功し、 そのコンテンツは左寄せに成功しました。

Windows版のIEへの対策の弊害対策によって生じる国際化問題

しかし、この指定には国際化において問題があります。世界には右から記述する言語もあるのです。 翻訳ソフトを使っている人なら理解してもらえるかと思いますが、 テキストは翻訳して知らない言語のサイトも読むことができるのです。 その際に右から記述する言語圏の人にとってはこの指定は見にくいものとなるでしょう (全てのテキストが右寄せになった文書を想像してみてください)。

そこで、この問題を解決するためにtext-align:justify;を使用を推奨します。 この値は「両揃え」ですので左から右へと記述する言語も右から左へと記述する言語でも関係なく配置できます。 また、これをサポートしないブラウザではその言語に適した方向へ寄せるべきだと仕様書内で明言されています。

<div style="text-align:center;border:black;">
	<div style="margin-left:auto;margin-right:auto;text-align:justify;border:red;">
		ブロックレベル要素
	</div>
</div>
ブロックレベル要素

さて、若干苦し紛れではありますが、こうすることでWeb標準に準拠しつつバグのあるIEをも考慮に入れたレイアウトを組めます。

補足: Windows版IE問題

各メジャーブラウザがバージョン7になり、CSSに対する互換性はかなり高くなりました。 しかし、この記事に代表される問題のようにWindows版のIEはCSSに対する性能は他のブラウザに比べてかなり見劣りするようになってきました。

つまり、Windows版IE以外のブラウザでは見た目の互換性がかなり高くなってきているのです。 Windows版IEはシェア的には大多数のブラウザですが、 数あるグラフィカルブラウザの中では少数派の表示を行っていると言い換えることができます。

Webページをデザインする場合、多くの人は(そのシェアの高さも含め)Windows版のIEで表示確認を行っているようですが、 これはブラウザの種類的には少数派のブラウザで表示確認を行ってから多数のブラウザへの対応を考えなくてはいけないという非効率的な手法です。 反対にMozilla/Netscape7や、Opera7を使って表示確認を行い、それら多数のブラウザで互換を確認できたら、 Windows版IEの非互換部分に対してこの記事のように個別対応を考える方が効率的と言えると思います。