リキッドレイアウト（サイズが可変なレイアウト）を作る際、デザインが崩れないよう「最大幅」や「最小幅」を指定したいことがあります。
例えば、「原則として80％の横幅で表示したいが、200ピクセルより小さくはしたくなく、800ピクセルよりは大きくしたくない」というような場合です。 （＝200～800ピクセルの範囲内だけで横幅を可変にする）
これらの指定は、すべてスタイルシートを使うことで簡単に実現できます。横幅はもちろん、横幅の最大値・最小値も指定可能です。
以下にサンプルページを用意しましたので、試しに表示させてみて下さい。 ウインドウ幅を変化させるとボックスの幅も連動して変化しますが、ボックスの幅は最小値より小さくなることはなく、最大値より大きくなることもありません。
※IE6.0以下では最大値・最小値の指定は無効です。（後述）
今回は、上記のサンプルにあるような、横幅の最大値と最小値を指定する方法をご紹介いたします。
ボックスの横幅の指定方法
ボックスの横幅は、スタイルシートの「width」プロパティを使って指定できます。 例えば下記のように、値に「80%」を指定すれば親要素の80％のサイズで表示できます。
width: 80%;
これに、最大値と最小値を加えるには、以下のように記述します。
max-width: 810px; min-width: 240px;
上記のように記述すると、最大幅が810ピクセルになり、最小幅が240ピクセルになります。 このボックスは、240ピクセルより小さくはならず、810ピクセルよりも大きくはなりません。
もし表示領域が240ピクセルを下回れば、横方向のスクロールバーが表示されます。 表示領域が810ピクセルを上回れば、残りのスペースは余白になります。
これらを全部まとめて以下のように記述すると、「原則として80％の横幅で表示するが、200ピクセルより小さくはしたくなく、800ピクセルよりは大きくしたくない」という制限付きのリキッドレイアウトが実現できます。
width: 80%; max-width: 800px; min-width: 200px;
注：IEは7以降から有効
この max-width と min-widthプロパティは、Firefox、Opera、Safariなどの代表的なブラウザでも利用可能です。 Internet Explorer 7 でも利用可能ですが、Internet Explorer 6 以下では利用できません。 IE6.0以下では、widthプロパティは有効ですが、max-width と min-width 各プロパティの指定は無視されてしまいます。
おわりに
今回は、範囲を制限したリキッドレイアウトなどに活用できる「最大幅」・「最小幅」の指定方法をご紹介いたしました。 なお、同様に「max-height」（最大の高さ）・「min-height」（最小の高さ）を指定する各プロパティもあります。
ぜひ活用してみて下さい。
※max-height・min-heightも、横幅の場合と同様に IE6.0以下では無効です。
