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

widthプロパティ

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

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

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

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

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

関連するプロパティ

 以下の関連するプロパティがあります。

heightエレメントの高さ
max-height最大高さ
min-height最小高さ
max-width最大幅
min-width最小幅
resizeユーザーがサイズを変更可能に
box-sizing領域内にborderpaddingを収める

構文(Syntax)

CSS

width: auto | length | initial | inherit;

DOM(JavaScript)

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

値(Values)

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

備考(Remarks)

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

Example

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