IEでmax-widthの動作をさせる方法

adiaryでリキッドデザインのテーマをたまに見かけますね。リキッドデザインとは閲覧者の画面の大きさに応じて横幅をフレキシブルに伸縮させるのが特徴です。

しかし最近では画面の解像度が上がり、1600×1200という広い画面の方も多くなっています。そんな中フレキシブル過ぎて横幅がびよ?んと伸びてしまい、逆に本文が読みにくい、という困った現象が起こります。

例
普通の画面

|あいうえお|
|かきくけこ|
|さしすせそ|

横幅が広い場合

|あいうえおかきくけこさしすせそ|

一行がずら?っと長い文章って逆に読みにくくて適度に改行されている方が読みやすいものです。目を左右に動かすのが面倒なのでしょうね。

そこでCSSで「max-width」を使って自由に伸縮する横幅の最大幅を設定させることが多いです。これでどんなに広い画面であってもテーマを作った作者が意図する横幅までに抑えることができます。

しかしこの「max-width」、困ったことにInternetExplorerでは使えません。そこで無理矢理IE対策をしてやる必要があります。

リキッドデザインの部分

width: 92%;

横幅の最大を910ピクセルに固定(Fx、Opera)

max-width: 910px;

横幅の最大を910ピクセルに固定(IE対策)

width:expression(document.body.clientWidth < 600? “600px” : document.body.clientWidth > 910? “910px” : “auto”);

以上で強引ですがほとんどのブラウザで、横幅の最大値を指定することができます。ご参考まで。