heightプロパティ。
CSSに於ける要素の高さ・heightプロパティに関する解説です。
heightプロパティとは。
heightプロパティは、要素の高さです。
heightプロパティの書式。
heightプロパティの書式は、以下のようになります。
height: 値
値としては、以下のものが取れます。
inherit- 一番近い上位要素で指定された値を継承します。
auto-
- パディング(paddingプロパティなどで指定)
- 枠線(ボーダ)の幅(border-widthプロパティなどで指定)
- 余白(マージン)(marginプロパティなどで指定)
などの他の要因により適宜横幅が決められます(デフォルト)。
- パーセンテージ
- 親要素の高さを100%とするパーセンテージです。
但し、親要素にheightプロパティが当てられていないか、当てられていても
auto値である場合は、auto値扱いとなります。- 高さが不定となっているため、パーセンテージの算出が無意味と判断される訳です。
- 数値
- 幅を数値で指定します。
値に負値を指定した場合はエラーとなります。
heightプロパティの記述例。
例えば、HTMLの<blockquote>要素において、高さを10文字分としたい場合は、
blockquote {height: 10em;overflow: auto;}
と記述します。
heightプロパティに関する注意事項。
heightプロパティの仕様上の注意。
狭過ぎて要素が入り切らなくなった場合。
仕様上、heightプロパティを当てた結果、当該要素のボックスが狭くなり過ぎて要素が入り切らなくなっても、適宜ボックスを押し拡げるような事はしません。
- 勝手に押し拡げてしまう実装のユーザエージェントもありますが、不正な実装です。
このため、入り切らなくなった場合の挙動を別途overflowプロパティで指定しておく事をお勧めします。
heightプロパティの実装上の注意。
置換要素に於ける、widthプロパティとheightプロパティの関係。(平成18年 9月13日)
CSS 第二水準第一改訂版以降では、置換要素での width プロパティと height プロパティについて、片方が auto 値の場合には、もう片方に合わせて適宜拡大縮小される事となっております。
例えば、縦240ピクセルズ、高さ320ピクセルズの画像に対して、height: 640px; プロパティを与え、auto 値でない widthプロパティを与えなかった場合、横幅は、高さに合わせて拡大縮小される事となり、すなわち height プロパティの値 / 本来の高さ で得られる比率が乗じられる事となり、結果横幅も480ピクセルズに拡大される事になります。
尚、この扱いは、CSS 第二水準まででは仕様違反でした。
CSS 第二水準では、width プロパティと height プロパティは全くの別物として扱っていたため、仕様に沿うなら、上記の例の場合横幅は変更しない、すなわち高さだけが拡大されて表示される可能性がありました。
- 可能性があったと書いたのは、CSS 第二水準まででは置換要素については、
widthプロパティとheightプロパティ、言い換えれば、widthプロパティの指定を無視しても良い事となっていたため、heightプロパティを無視しても仕様違反ではなかったからです。
しかし、実際のウェブブラウザでは、そのような実装ではなく、現在の第二水準第一改訂版で定められた実装になっていたため、結局この扱いを規格として追認したと言う訳です。
インターネットエクスプローラでの注意事項。
インターネットエクスプローラでは、以下の場合を除いて、heightプロパティで定められた横幅には、パディング(paddingプロパティなどで指定)と枠線(ボーダ)の幅(border-widthプロパティなどで指定)が加算されたものとなります。
- ウィンドウズ版 6.x以降及びマッキントッシュ版 5.xの標準準拠モード