width

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

widthCSS のプロパティで、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 box-sizingborder-box に設定すると、境界領域の幅を設定します。

試してみましょう

width に指定された値は、その値が min-width および max-width で定義された値内にある限り、コンテンツ領域に適用されます。

  • width の値が min-width の値より小さい場合、min-widthwidth をオーバーライドします。
  • width の値が max-width の値より大きい場合、max-widthwidth をオーバーライドします。

メモ: 幾何プロパティとして、 width プロパティは、<svg><rect><image><foreignObject> の各 SVG 要素にも適用されます。 auto の値は <svg> では 100% に、その他の要素では 0 に解決され、パーセント値は <rect> の場合は SVG ビューポートの高さに対する相対値に解決します。 CSS の width プロパティ値は、 SVG 要素に設定された width 属性の値を上書きします。

構文

css
/* <length> 値 */
width: 300px;
width: 25em;
width: anchor-size(--myAnchor inline, 120%);
width: minmax(100px, anchor-size(width));

/* <percentage> 値 */
width: 75%;

/* キーワード値 */
width: max-content;
width: min-content;
width: fit-content;
width: fit-content(20em);
width: auto;
width: stretch;

/* グローバル値 */
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;

<length>

距離の値で幅を定義します。

<percentage>

親となる包含ブロックの幅に対するパーセント値で定義します。

auto

指定された要素の幅をブラウザーが計算して決めます。

max-content

本来の望ましい幅です。

min-content

本来の最小の幅です。

fit-content

利用できる空間を使用しますが、 max-content を超えないようにします。すなわち、 min(max-content, max(min-content, stretch)) です。

fit-content(<length-percentage>)

利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, <length-percentage>)) です。

stretch

要素のマージンボックスの幅を、包含ブロックの幅に設定します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 100% と似たような動作をしますが、結果として得られるサイズは box-sizing で決定されるボックスではなく、マージンボックスに適用されます。

メモ: ブラウザーが stretch 値のために使用する別名と実装状況については、ブラウザーの互換性の節を参照してください。

アクセシビリティ

ページを拡大してテキストサイズを大きくしたときに、 width を設定した要素が切り捨てられたり、他のコンテンツが見えなくなったりしないようにしてください。

公式定義

初期値auto
適用対象置換要素でないインライン要素、テーブルの行、行グループを除くすべての要素
継承なし
パーセント値包含ブロックの幅に対する相対値
計算値パーセント値、 auto、絶対的な長さのいずれか
アニメーションの種類length または パーセント値, calc();

形式文法

width = 
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

既定の幅

css
p.goldie {
  background: gold;
}
html
<p class="goldie">The MDN community writes really great documentation.</p>

ピクセル数と em 単位

css
.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
html
<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>

パーセント値の例

css
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
html
<div class="percent">Width in percentage</div>

max-content の例

css
p.max-green {
  background: lightgreen;
  width: max-content;
}
html
<p class="max-green">The MDN community writes really great documentation.</p>

min-content の例

css
p.min-blue {
  background: lightblue;
  width: min-content;
}
html
<p class="min-blue">The MDN community writes really great documentation.</p>

仕様書

Specification
CSS Box Sizing Module Level 4
# width-height-keywords
CSS Box Sizing Module Level 4
# sizing-values

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
width
anchor-size()
Experimental
auto
fit-content
fit-content()
Experimental
Is animatable
max-content
min-content
stretch

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報