CSS - width

概要

属性名 width
<length> | <percentage> | auto | min-content | max-content | fit-content | stretch
初期値auto
適用可能要素すべての要素
継承継承しない
メディアvisual
サポート https://caniuse.com/mdn-css_properties_width
https://caniuse.com/intrinsic-width
https://caniuse.com/mdn-css_properties_width_stretch

説明

要素の横幅を指定します。

説明
<length>横幅を 100px や 10em のような長さの単位で指定します。
<percentage>横幅を 80% のようなパーセントで指定します。
auto横幅を自動計算します。
min-contentコンテンツ中の最も長い単語の長さとなります。
max-contentコンテンツ中の文章が改行されない場合の長さとなります。
fit-contentコンテンツ中の文章が改行されない場合の長さとなります。ただし親要素の横幅を超えることはありません。
stretchコンテンツ周りのマージンを含めて親コンテンツサイズの 100% となります。(サポート状況)

使用例

シンプルな例

CSS
.my-simple-sample {
    height: 100px;
    width: 100px;
    background-color: #cc9999;
    margin: 1em;
}
HTML
<div class="my-simple-sample"></div>
表示

stretch の使用例

2025年7月の Chrome 138 でサポートされた値です。周りのマージン分も含めて親コンテンツのサイズにおさめたい場合に便利です。下記の例では、アイテムをマージンも含めて親コンテンツにおさめるには calc(100% - 16px * 2) のような計算を行う必要がありましたが、stretch で指定できるようになりました。(サポート状況)

CSS
.my-stretch-sample {
  width: 400px;
  border: 1px solid #333;
  div {
    margin: 16px;
    background-color: #ccf;
    &.my-item1 {
      width: 100%;
    }
    &.my-item2 {
      width: stretch;
    }
  }
}
HTML
<div class="my-stretch-sample">
  <div class="my-item1">width: 100%</div>
  <div class="my-item2">width: stretch</div>
</div>
表示
width: 100%
width: stretch

関連項目

width, height, min-width, min-height, max-width, max-height

リンク