HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


要素の横幅の最大値と最小値を指定する

CSSの書き方

min-width:値 ;
max-width:値 ;

CSSの詳細情報
プロパティ名 min-width/max-width 読み方 ミニマム/マックス・ウィドゥス
初期値 min-width:0、max-width:none 意味 横幅の可動範囲を指定
0/none/サイズ/パーセント
対象 非置換インライン要素と表要素を除くすべての要素
CSSレベル CSSレベル2 対応ブラウザ Windows MAC
継承 しない FF1.0/NS7.1/OP8.0 SF

解説

要素の幅やボックスの幅をブラウザの画面に合わせて表示させるには、「width」プロパティにおいて、値をパーセントなどの相対的な数値で指定すれば可能です。こうすれば、ブラウザの表示幅に依存しないレイアウトにできます。

しかし、画面を極端に狭くして閲覧すると、レイアウトにも限界が生じ、レイアウトが崩れることもあります。また、逆に幅を極端に広くして見た場合には幅が広がりすぎて見にくくなってしまうこともあります。

解決法

これを解決するために、要素の幅の可動範囲を予め指定しておくことができます。これを実現するのが「min-width、max-width」プロパティです。これらのプロパティにおいて、要素の幅の最小値と最大値を指定します。

指定方法

「width」プロパティと同様に、サイズ(数値)やパーセントによる指定が可能です。ただし、厳格な最小値と最大値を定めるための値ですので、一般的にはポイントなどの絶対的な数値で定めておくのが普通です。ちなみに、最大値の初期値の「none」は上限なしという意味です。

IEには未対応

現在のところ、このプロパティはInternetExplorer5.0/5.5/6.0には対応していません。

CSS/HTMLサンプル

p { width:60%; min-width:150px; max-width:600px; }

段落要素の表示幅の可動範囲を指定 サンプル