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

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


要素の高さの最大値と最小値を指定する

CSSの書き方

min-height:値 ;
max-height:値 ;

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

解説

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

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

解決法

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

指定方法

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

挙動に注意

ただし、要素の高さは「min-width/max-width」プロパティと異なり、要素内の内容に応じて変化しますので挙動に注意してください。これは「min-height/max-height」プロパティのバグではなく、「height」プロパティの仕様です。

IEは一部だけ対応

InternetExplorer6.0は「min-height」プロパティを一部の要素に使用できます。一部の要素とは、「table-layout」プロパティの値が「fixed」と設定されている表の「TD、TH、TR」要素です。この条件を満たす要素には「min-height」プロパティを使用できます。

もちろん上以外の、IE6.0以前のバージョンや「max-height」プロパティ等にはまだ対応していません。

CSS/HTMLサンプル

p { height:40%; min-height:150px; max-height:600px; }

段落要素の高さの可動範囲を指定 サンプル