もじらで懺悔… #3…text-align 編

さて、みなさんこんにちは。「もじらで懺悔」のコーナーです（…開き直り　笑）。
（「もじらで懺悔」は現在、めぐ味屋のこのブログ内で「スタイルシート」カテゴリに分類されています）。

では、早速、今日の懺悔ですが。
めぐ味屋は今まで、

ブロックレベル要素をtext-aling:centerでセンタリングしていました。こんな風に。

　＜div style="text-align:center;
　　background-color:#ff6600;width:100%;"＞
　　　ここの文字はセンタリング
　　　＜div style="text-align:left;
　　　　background-color:#999999;width:80%;"＞
　　　　　ここの要素は、センタリングで文字は左寄せ
　　　＜/div＞
　ここもセンタリング
　＜/div＞

で、これをIE5.5で見ると、子要素もセンタリングして見えるのです。ほら。
●IE5.5でみた。

ですから、それで良いと思っていました。。。
しかし、、、

●もじらで見てみた

ブロックレベル要素はセンタリングしていない

…う…。

確かにブロックレベル要素を「text-align」で配置するのは、なんか変だな…？とは思っていたのですが（だってテキストって言ってるし…）、でも、やっぱり、（IEで）ちゃんと見えてるからいいや。と思ってたんですよね。。。（しかし、これってすごい落とし穴だよなあ…）。

で、先日、お目だるいお話のオオカミさんに教えて頂いた「Web標準化Tips」というところにインライン要素とブロックレベル要素についてのわかりやすい説明があって、そこんところに、ちゃんと

と書いてありました。そして、text-alignでブロックレベル要素が配置できてしまうのはIEだから…（涙笑…）だということも。。。

ですから、ブロックレベル要素をセンタリングしたい時には、

　＜div style="margin:auto;widht:80%"＞

…などというように、「auto」を使えば良いそうなのですが、しかし、IE5.5はこれを理解しないのであります

では、IE5.5でも、もじらでもちゃんと見えるように、ブロック要素をセンタリングしたい場合はどうしたら良いんでしょうか？「Web標準化Tips」にもそのノウハウが書いてありましたが、めぐ味屋では、それとは違う方法にしてみました。。。

　＜div style="background-color:#ff6600;width:80%;"＞
　　＜br＞
　　＜div style="background-color:#006666;margin:0px 25%;"＞
　　　ここの要素は、センタリングで文字は左寄せ
　　＜/div＞
　＜br＞
　＜/div＞

IE5.5でも、もじらでもダイジョブになった…。
●IE5.5で見た

●もじらで見た

しかし。。。

なにやらこれには落とし穴があったのです。

　＜div style="margin:0px 25%;background-color:#999999;"＞
　　親要素で margin を左右に25%
　　　＜div style="background-color:#006666;
　　　　　margin: 0px 10%;padding:0.5em;"＞
　　　　　　子要素で margin を左右に10%
　　　＜/div＞
　　　＜br＞
　＜/div＞

こんなふうなのをIE5.5で見てみます。
●IE5.5で見た


これはいくらなんでも、変です…。いくら私がいいかげんな性格でも、子要素のマージンは親要素の10％ではありません。。。IEは何をしたいのでしょう…？もしかすると、親要素のmargin25%と子要素のmargin10%を足しているんでしょうか…？

…もう良いです（＜--？）。。。原因はわからなくても良い。。。
これは、もじらでは意図したようにちゃんと見えるので、
●もじらで見た


…ですから、IE5.5でもまともに見える方法を考えます。。。
こんな風にしてみました。

　＜div style="margin:0px 25%;background-color:#999999;"＞
　　親要素で margin を左右に25%
　　　＜div style="background-color:#006666;
　　　　　margin: 0px 1em;padding:0.5em;"＞
　　　　　　子要素で margin を左右に1em
　　　＜/div＞
　　　＜br＞
＜/div＞

…解決法ではありませんが、こうするとうちのIEでもちゃんと見えるようです。。。

　# スタイルシートが普及しない理由がなんとなくわかってきました… #

　# …なんだか報われない努力をしているような気がしてきましたが #
　# 途中でやめるのも性に合わないので、さらに懺悔は続くのであります… #