width

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

完全な互換性情報を見る
もっと詳しく

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

試してみましょう

width: 150px;

width: 20em;

width: 75%;

width: auto;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    これは幅が変更できるボックスです。
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  height: 80%;
  justify-content: center;
  color: white;
}

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

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

メモ: 幾何プロパティとして、 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(width);
width: anchor-size(--my-anchor inline, 120%);

/* <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 で決定されるボックスではなく、マージンボックスに適用されます。

アクセシビリティ

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

width

試してみましょう

構文

値

アクセシビリティ

公式定義