CSSとJavaScriptでmin-width max-width を実装する

2007年1月30日(火) 10:00

CSSでmin-width max-width をそれぞれ行うことで、コンテナの最小幅・最大幅の指定ができる。リキッドレイアウトを採用していても、これらの指定を行うことでデザインが崩れない幅の有効範囲を持たせることができる。

しかし、min-width　min-width　のプロパティに対応していないInternet Explorer 6.xなどへは別途JavaScriptで対応する必要がある。
実際の記述例は以下のようになる。

スタイルシートの記述

<style type="text/css">
#container{
   overflow:visible;
   margin-right:auto;
   margin-left:auto;

   /*min-max width*/
   min-width:668px;
   max-width:980px;

   /*min-max width for ie6*/
   width:expression(ieXLiquidWidth());
}
</style>

JavaScriptの記述

<script type="text/javascript">
<!-- min-max width for ie6 -->
function ieXLiquidWidth() {
   if(document.body.clientWidth < 674){
      return "668px";
   }else if(document.body.clientWidth > 986){
      return "980px";
   }else{
      return "auto";
   }
}
</script>

width:expression(　JavaScript　);はIE独自の拡張になっているので、それを利用してIE用に別途処理をJavaScriptで記述することで対応できる。

expressionの利用については、回避策としての利用をオススメしたい。もちろん今回紹介した方法以外にもHTML記述のみで同様の制御が可能なので、自身で判断していただきたい。