2008-07-31
ブロック要素のセンタリング・ie6のバグ 備忘録
今日前にやったcssシートをテンプレにしようと思って引っ張り出して見た。bodyになんと「text-align: center;」などを入れている・・ええと何だっけ?これ？と思って、ファイヤフォックスのブックマを引っ張り出してみた・・わかりました。忘れてた。ということで、当時の参照元URLを下に紹介します、
こういうブログは極めてありがたいんだけど、いつも思いますが「この人がMT等の鯖料金を支払うのが嫌になったら、このページも見れなくなるなあ。すると困るなあ・・」。
よし！、そこでコピペで備忘録にしよう。
・・・・以下そのコピペ内容。
一昔まえは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にし、ブロックレベル要素に幅を指定するのが正しい方法です。
margin-left:auto
margin-right:auto
width:10em
border:red
しかし、標準に準拠した方法とはいえ、95%を超えるシェアを持つWindows版IEを無視することはできない人が多いと思いますので、 標準仕様に準拠しつつ、Windows版IEでもセンタリングできる方法を紹介します。
もしあなたがtransitionalで記述するならdiv要素のalign属性でcenterを指定するのが一番簡単です。 これなら文法的にも正しい訳ですし、手軽なのでこちらを推奨します。 しかし、strictで記述するならalign属性は使えません。あくまでCSSで実現することになります。
Windows版IE以外のブラウザは正しい指定方法でセンタリングされることは既にわかっています。 ということで、あとはIEでセンタリングすれば良いわけです。これの解決にWindows版IEのバグを利用します。 Windows版IEはバグにより、text-align:center;で内在するブロックレベル要素そのものまでセンタリングされます。 これを同時指定すると次のようになります。
divの子要素にもdivを組んで・・
親div
text-align:center
border:black
子div
margin-left:auto
margin-right:auto
border:red
さて、これでブロックレベル要素のセンタリングには成功しますが、 親に指定したtext-align:center;が子に継承されて肝心のブロックレベル要素の内容までブロック内でセンタリングされてしまいます。 この弊害を無くすには、子要素にtext-align:left;を指定してあげます。
親div
text-align:center
border:black
子div
margin-left:auto
margin-right:auto
text-align:left
border:red
この方法であればMozilla、IE6、Opera6/7において、全てブロックレベル要素のセンタリングに成功し、 そのコンテンツは左寄せに成功しました。
４．ウインドウズ版IEへの対策の弊害対策から生じる国際方面への問題点
しかし、この指定には国際化において問題があります。世界には右から記述する言語もあるのです。 翻訳ソフトを使っている人なら理解してもらえるかと思いますが、 テキストは翻訳して知らない言語のサイトも読むことができるのです。 その際に右から記述する言語圏の人にとってはこの指定は見にくいものとなるでしょう (全てのテキストが右寄せになった文書を想像してみてください)。
そこで、この問題を解決するためにtext-align:justify;を使用を推奨します。 この値は「両揃え」ですので左から右へと記述する言語も右から左へと記述する言語でも関係なく配置できます。 また、これをサポートしないブラウザではその言語に適した方向へ寄せるべきだと仕様書内で明言されています。
親div
text-align:center
border:black
子div
margin-left:auto
margin-right:auto
text-align:justify
border:red
さて、若干苦し紛れではありますが、こうすることでWeb標準に準拠しつつバグのあるIEをも考慮に入れたレイアウトを組めます。
各メジャーブラウザがバージョン7になり、CSSに対する互換性はかなり高くなりました。 しかし、この記事に代表される問題のようにWindows版のIEはCSSに対する性能は他のブラウザに比べてかなり見劣りするようになってきました。
つまり、Windows版IE以外のブラウザでは見た目の互換性がかなり高くなってきているのです。 Windows版IEはシェア的には大多数のブラウザですが、 数あるグラフィカルブラウザの中では少数派の表示を行っていると言い換えることができます。
Webページをデザインする場合、多くの人は(そのシェアの高さも含め)Windows版のIEで表示確認を行っているようですが、 これはブラウザの種類的には少数派のブラウザで表示確認を行ってから多数のブラウザへの対応を考えなくてはいけないという非効率的な手法です。 反対にMozilla/Netscape7や、Opera7を使って表示確認を行い、それら多数のブラウザで互換を確認できたら、 Windows版IEの非互換部分に対してこの記事のように個別対応を考える方が効率的と言えると思います。
以上でコピペは完了ですが・・
こないだ田舎の公立図書館に行きました。中にインターネット閲覧のコーナーがあって、ズラリとパソコンが並んでいて、で、座ってブラウザーを見ると、全部のパソコンがIE6！！！
今は２００８年夏ですぞ・・
この記事は２００３年改定の記事・・
Permalink | コメント(0) | トラックバック(0) | 23:16 
