widthプロパティ。

CSSで、要素の幅を指定するwidthプロパティに関する解説です。

widthプロパティ・目次。

widthプロパティとは。

widthプロパティは、要素の幅を指定するプロパティです。

widthプロパティの扱い。

widthプロパティの書式。

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

width:

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

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

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

パーセンテージ
親要素の幅を100%とするパーセンテージです。
数値
幅を数値で指定します。

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

widthプロパティの記述例。

例えば、HTMLの<blockquote>要素において、幅を親要素の80%としたい場合は、

blockquote {
    width: 80%;
    }

と記述します。

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

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

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

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

狭過ぎて要素が入り切らなくなった場合。

仕様上、widthプロパティを当てた結果、当該要素のボックスが狭くなり過ぎて要素が入り切らなくなっても、適宜ボックスを押し拡げるような事はしません。

このため、入り切らなくなった場合の挙動を別途overflowプロパティで指定しておく事をお勧めします。

widthプロパティの実装上の注意。

ネットスケープ 4.xでの注意事項。

ネットスケープ 4.xでは、インライン要素にwidthプロパティを当ててはいけません。

インライン要素にwidthプロパティを当てると、正常に表示されなくなります。

また、auto値を実装しておりません。

置換要素に於ける、widthプロパティとheightプロパティの関係。(平成18年 9月13日)

CSS第二水準までは、widthプロパティとheightプロパティは仕様上全く無関係なものとなっておりました。

すなわち、CSS第二水準まででは、置換要素に於いて、

幅は元の要素の幅そのものとなり、高さだけがheightプロパティの影響を受ける事になります。

すなわち、仕様上では上記の場合、高さだけが引き伸ばされたり縮められたりして、縦横比が変動する事になる訳です。

しかしながら、実際には殆ど全てのCSS対応ユーザエージェントは、上記のような場合には幅もheightプロパティに合わせて拡大/縮小されます。つまり縦横比が変わらないように表示されます。

このように実装が仕様に従っていない実情から、現在策定中のCSS第二水準第一改訂版(CSS 2.1)では、上記のように片方がauto値、もう片方が非auto値の場合にはauto値を与えられたプロパティももう片方に併せて設定されるものとする、すなわち現状を追認する予定になっております。

以下に、現在策定中のCSS第二水準第一改訂版での該当箇所を挙げておきます(いずれも英語です)。

インターネットエクスプローラでの注意事項。

インターネットエクスプローラでは、以下の場合を除いて、widthプロパティで定められた横幅には、パディング(paddingプロパティなどで指定)と枠線(ボーダ)の幅(border-widthプロパティなどで指定)が加算されたものとなります。

関連項目。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com