スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Posted at --年--月--日 | 記事URL | スポンサー広告 | Top↑

IEでmin-widthやmax-widthを実現するCSSテクニック

The Perfect Fluid Width Layout

The Perfect Fluid Width Layout - CSS-Tricks
(情報元:[CSS]IEで、min-widthやmax-widthを実現する方法 | コリス

幅の最小値と最大値を設定するmin-widthやmax-widthをIEでも実現するCSSテクニックが紹介されています。

幅可変のリキッドレイアウトでは、閲覧者のブラウザウインドウのサイズに合わせて該当のブロック要素の幅が伸縮しますが、ユーザーのウインドウが小さすぎると幅がつぶれたようになってしまい、逆に大きすぎると横に広がりすぎてかえって読みにくくなることがあります。

min-widthとmax-widthはそれを防止するためのものですが、IEではこれが実装されておらず動作しません。しかし、IE用の「expression」 というものを使用して、これを実現しています。

The Perfect Fluid Width Layout

#page-wrap{
background: white;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");
}

上記の場合、

最小幅780pxを維持しつつ、最大幅1280px以上になると残りの箇所は背景画像が表示されるようになっています。
とのことです。実際にブラウザのウインドウサイズを小さくしたり大きくしたり最大化したりして試したところ、幅が伸縮し最大値を超えた段階で、それ以上幅は広がらなくなりました。

なお「expression」は以下のような機能だそうです。

IE5から使用できるIE独自の「Dynamic Property」で、スタイルシート内でJavaScriptを実行できるというものです。

リキッドレイアウトを導入しようと検討している場合に便利なテクニックですね。

▼スポンサードリンク

Posted at 2007年10月13日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑
1つ後の記事:シューティングゲームでSEOを学ぶ『SEO対策本部~検索エンジン最適化列伝~』
1つ前の記事:【懐かしい】あのNetscape Navigatorの最新版9.0RC1が登場【今さら?】














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/111-c436b3c9
この記事にトラックバックする(FC2ブログユーザー)
Home
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。