heightプロパティ。

CSSに於ける要素の高さ・heightプロパティに関する解説です。

heightプロパティとは。

heightプロパティは、要素の高さです。

要素の高さについての詳細はボックスについてをご覧下さい。

heightプロパティの扱い。

読み飛ばす

heightプロパティの書式。

heightプロパティの書式は、以下のようになります。

height: 値

値としては、以下のものが取れます。

読み飛ばす

inherit

一番近い上位要素で指定された値を継承します。

auto

などの他の要因により適宜横幅が決められます(デフォルト)。

パーセンテージ

親要素の高さを100％とするパーセンテージです。

但し、親要素にheightプロパティが当てられていないか、当てられていてもauto値である場合は、auto値扱いとなります。

高さが不定となっているため、パーセンテージの算出が無意味と判断される訳です。

数値

幅を数値で指定します。

値に負値を指定した場合はエラーとなります。

heightプロパティの記述例。

読み飛ばす

例えば、HTMLの <blockquote>要素において、高さを10文字分としたい場合は、

blockquote {
    height: 10em;
    overflow: auto;
    }

と記述します。

heightプロパティに関する注意事項。

heightプロパティの仕様上の注意。

置換 インライン要素でのheightプロパティ。

置換インライン要素の場合、当該オブジェクト固有の横幅があり、この横幅と異なるheightプロパティ値が与えられた場合、適宜拡大縮小されます。

CSS 第二水準まででは、必ず拡大縮小しなければならないと言う意味ではありませんが、実際には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の標準準拠モード