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

リンク

初版:1997年7月27日、最終更新:2023年5月7日

https://www.tohoho-web.com/css/prop/width.htm

CSS - width

概要

説明

使用例

シンプルな例

stretch の使用例

関連項目

リンク