備忘録的プログラミングリファレンス

width プロパティ

 width プロパティは、エレメントの幅を指定するプロパティです。
 エレメントがブロックレベルエレメントである必要があります。

エレメントの幅を1500pxに
width: 1500px;

詳しくは Example を参照してください

 指定値にmarginborderpaddingは含まれません。

 width プロパティは幅が固定されますが、min-width プロパティmax-width プロパティによって幅に自由度を持たせることができます。

 borderpaddingを指定するとその分だけエレメント自体は大きく表示されます。 レイアウトを整形するときには注意が必要です。もしエレメントの領域内にborderpaddingを収めたい場合は、box-sizingプロパティを使用します。

ページ内 Index

構文(Syntax)

CSS

width: auto | length | initial | inherit;

DOM ( JavaScript )

値の取得
object.style.width;
値の設定
object.style.width="auto | length | initial | inherit";

値(Values)

 値には、計算式によって値を指定する calc() ファンクションも利用できます。

Value摘要
auto初期値(default値)。
lengthCSS長さの単位を参照のこと
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)auto
継承(Inherited)no
変化(Animatable)yes

Example

 widthの例です。子エレメントである#contentsエレメントにサイズの指定をしています。 親エレメントはサイズを指定いませんので、子エレメントの大きさに合わせて高さが変化します。