width CSS プロパティとは
トピック：要素のコンテンツ領域の幅を指定する 事ができる このコンテンツには、パディング、枠線、または余白は含まれません。 CSSボックスのモデルを参照
プロパティ width
実例 コード 1
3つの要素の幅を設定する サンプル コードを試す div.a {
width: auto;
border: 1px solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width: 50%;
border: 1px solid black;
}
プロパティ 定義と使用法
| デフォルト値・初期値 : | auto |
|---|
| 適用対象 : | 置換されていないインライン要素、テーブル行、および行グループを除くすべての要素 |
|---|
| 継承 : | 不可 |
|---|
| 相対値の基準 : | 包含ブロックの幅 |
|---|
| メディア : | visual |
|---|
CSS Version | CSS1 ～ |
|---|
| 計算値 : | パーセンテージ、auto、絶対的な長さのいずれか |
|---|
| JavaScript 構文 | object.style.width="funWebref" |
|---|
| Animation type : | length または percentage, calc(); |
|---|
| 正規順序 : | the length or percentage before the keyword, if both are present |
|---|
| CSSの構文 | width: auto |value |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
length(長さ) | 長さ値と幅を指定しpx、pt、cm、em、などの負の長さの値は許されない |
percentage(パーセント) | 幅をパーセンテージで指定する パーセンテージは、要素を含むブロックの幅に対して計算される 負のパーセント値は許可されない |
auto | ブラウザは、他のプロパティの値に基づいて、指定された要素の幅を計算する これはデフォルト値です。 |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするブラウザ対応・互換性
| Property | Chrome | Edge | Firefox | Safari | Opera |
|---|
| width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS width | CSS プロパティ 値| 意味 使い方 実例 – WebRef