width:ボックス領域の幅を指定する
適用対象 | 全ての要素(インライン要素を除く) |
継承 | しない |
widthプロパティは、ブロックレベル要素や置換要素の幅を指定する際に使用します。widthの解釈がブラウザによって異なるので気を付けましょう。
widthに与えられる値
- width: auto;
- 状況に応じて自動設定します。これが初期値です。
- width: 数値で指定する;
- [px]や[em]などの単位で指定します。
- width: %指定;
- 親要素からの相対的な割合を、%値で指定します。
widthの使用サンプル
CSS
.text_sample01 {
width: 300px;
background-color:#EEEEEE;
margin: 0px auto 10px auto;
}
.text_sample02 {
width: 300px;
border: 10px solid #666666;
padding: 10px;
margin: 0px auto 10px auto;
}
.text_sample03 {
width: 300px;
background-color:#CCCCCC;
padding: 20px;
margin: 0px auto;
}
XHTML
<div class="text_sample01">
text_sample01 [width: 300px;]<br />
borderやpaddingとの組み合わせに気をつけましょう<br />
</div>
<div class="text_sample02">
text_sample02 [width: 300px;]<br />
borderやpaddingとの組み合わせに気をつけましょう<br />
</div>
<div class="text_sample03">
text_sample03 [width: 300px;]<br />
borderやpaddingとの組み合わせに気をつけましょう<br />
</div>
表示確認
text_sample01 [width: 300px;]
borderやpaddingとの組み合わせに気をつけましょう
borderやpaddingとの組み合わせに気をつけましょう
text_sample02 [width: 300px;]
borderやpaddingとの組み合わせに気をつけましょう
borderやpaddingとの組み合わせに気をつけましょう
text_sample03 [width: 300px;]
borderやpaddingとの組み合わせに気をつけましょう
borderやpaddingとの組み合わせに気をつけましょう
widthに関連するCSSプロパティ
要素の幅や高さ | |
---|---|
box-sizing | 要素の幅と高さをどのように計算するかを指定する |
height | 要素の高さを指定する |
width | 要素の幅を指定する |
max-height | 要素の高さの最大値を指定する |
max-width | 要素の幅の最大値を指定する |
min-height | 要素の高さの最小値を指定する |
min-width | 要素の幅の最小値を指定する |
resize | ユーザーが要素のサイズを変更できるかどうかを指定する |