« 映画『ドロップ』 | Main | 社長の部屋、社長の仕事 »

Monday, April 06, 2009

HP の CSS 書き換え

【4月6日更新】 このブログのことではなくて、僕が nifty でやっているホームページのほうなのだが、CSS の全面的な書き換えを始めている。IE ユーザへの対策である。

IE8 が出たらひょっとして解消されるかと、甘い期待の下で放置していたのだが、どうやら全然改善の兆しがないので、結局いろいろ調べて対策を講じてみることにしたのである。

今やウェブ上にいろんなサイトがあって、そこからいろんな知識は得られるのだが、結局のところ自分でいろいろ書き換えて試してみるしかなかったのだが、どうやら目処がついたので、順番にアップし始めている。

何かと言えば、僕のホームページでは大体全てのコーナーの文章において、幅を指定して、しかもブラウザの画面内でセンタリングされるように CSS を書いている。ところが、Firefox や Google Chrome などでは問題なく読めるのに、Internet Explorer にはこれが読めないのである。

IE で読むと、ブラウザの幅いっぱいに文章が広がってしまう。昨今は横長モニタが主流なので、そんなモニタでブラウザ全画面表示で見ていたりすると、とんでもなく間抜けなレイアウトになってしまうのである。

まあ、僕自身が「width と padding を一緒に設定する」という禁じ手を、そうとは知らずやっていたということも原因の一つだったのかもしれないが、一番の問題は IE においては margin-right:auto; margin-left:auto; で中央にフロートさせる設定が効かないということだ。そして何故だか width の設定も無視されてしまう。

そうなると text-align:center; を使って、その子要素ごとセンタリングするしかない。ただし、その場合は子要素の中の文章までセンタリングされるので、今度は子要素の中で再度 text-align:left; と設定して文章を左詰めに直しておく必要がある。

──ウェブ上にはそんなアドバイスがあった。ところが、やってみると、確かに IE においてはこれで解決するのだが、Firefox では親要素まで左に寄ってしまうのである。

そこから大いに悩んで試行錯誤した。

結局、親要素で text-align:center; を記述しておいて、子要素では width の設定と margin-right:auto;margin-left:auto; そして text-align:left; をこの順番で併記してみた。

ついでに従来は親要素に記述していた padding を子要素の margin 設定に置き換えてみた。

──どうやらこれで概ねOKみたい。

で、書き換えに着手したのだが、今までの HTML では子要素自体が存在していなかったので、当然のことながら CSS の書き換えだけでは済まず、今まで書いてきた全ての文章(一体何百あるんだ?)に手を入れる破目になった。

もちろんいっぺんにはできない、と言うか、全部書き換えるのは無理かもしれない。ただ、僕らしく地道に少しずつ書き換え始めている。

IE で閲覧されている方は、読むページによって、文章が真ん中に寄ったりベターッと左右に広がったりして気持ち悪いとは思うが、ご容赦いただきたい。

|

« 映画『ドロップ』 | Main | 社長の部屋、社長の仕事 »

Comments

Post a comment



(Not displayed with comment.)


Comments are moderated, and will not appear on this weblog until the author has approved them.



TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/110115/44563073

Listed below are links to weblogs that reference HP の CSS 書き換え:

« 映画『ドロップ』 | Main | 社長の部屋、社長の仕事 »