ブロックレベル要素をセンタリングする方法 - 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にし、ブロックレベル要素に幅を指定するのが正しい方法です。

 
 	
 		ブロックレベル要素 	
 
 

ブロックレベル要素

赤ちゃんはベッドで眠ることができますか？

Windows版のIEへの対策

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

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

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

 
 	
 		ブロックレベル要素 	
 
 

ブロックレベル要素

患者をやる気にする方法

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

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

 
 	
 		ブロックレベル要素 	
 
 

ブロックレベル要素

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

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

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

彼が何者言って浮気夫を取得する方法

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

 
 	
 		ブロックレベル要素 	
 
 

ブロックレベル要素

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

補足: Windows版IE問題

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

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

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

These are our most popular posts:

りーちえんげーじ! -子孫繁栄!国立栄華学園中等部- - Wikipedia

この「りーち☆えんげーじ! -子孫繁栄!国立栄華学園中等部-」は、まだ完結していない 作品や終了していない番組に関する項目です。ある程度ストーリー・ ... テンプレート使用 方法 ■ノート ... 学園の理念は「若いうちからの異性交流の推奨」であり不純異性交流も 認められており、「命中」さえしなければハメを外しても良いという校風である。学園独自 の ... read more

Amazon.co.jp： りーちえんげーじ! -子孫繁栄! 国立栄華学園中等部- (GA ...

Amazon.co.jp： りーち☆えんげーじ! -子孫繁栄! 国立栄華学園中等部- (GA文庫): 海堂 崇, CH@R: 本. ... 通常配送無料（一部の商品・注文方法等を除く） 詳細 ... ランキング 上位の者に特典を用意して生徒の恋愛(不純異性交遊含む)を推奨する栄華学園。 read more

セレクタ - CSS2リファレンス

セレクタと呼ばれるこれらのパターンは単純な要素型名のみのものから，複雑な前後 関係（たとえば子供や子孫，兄弟など）を照合できるものまで多岐に亙ります。パターン 内に示され .... ある要素内に初出する子供要素を選択する方法は，後述する:first-child 疑似クラスで概説します。 .... しかしそれらに依存した文書設計は推奨されません。普遍 的な ... read more

優生学 - Wikipedia

ゴルトン自身は如何なる形での選別方法をも提示することはなかったが、もし人々が 子孫を残すことの重大性を認識することで ..... ネガティヴな優生学とは区別して、 シンガポールの首相リー・クアンユーは大卒女性の出産を推奨するなどの選別的な教育 制度を ... read more