このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

width”プロパティ:横幅

記事Oct. 15th,2020
要素の横幅を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 width: auto;
適用対象 非置換インライン要素を除くすべての要素
継承 No
パーセント値 内包される包括ブロックの横幅に依存
計算値 指定した値(ただし、<length-percentage>”値は算出された値)
アニメーション 計算値(fit-content()”関数に再帰)

width”プロパティは要素の横幅、水平方向の大きさを指定するプロパティです。

width”プロパティは要素の好ましい横幅を指定します。min-width”プロパティmax-width”プロパティなどによる制約がなければ“width”プロパティで指定された横幅で表示されます。

width”プロパティは既定ではコンテント・ボックスの横幅を指定します。“width”プロパティで指定した横幅をボーダー・ボックスの横幅としたい場合はbox-sizing: border-box;を適用します。

CSSのボックスモデル

サンプルコード

div { width: 50%;}

説明
キーワード値
auto 要素の既定のレイアウト方法に合わせてユーザー・エージェントが横幅を計算します
min-contentCSS Box Sizing Module Level 3 で追加 【横書きの場合】コンテンツをはみ出さずに内包できる最小の横幅 (許容される箇所ですべて折り返した時にコンテンツを内包できる最小の横幅)
【縦書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが横幅を計算します
max-contentCSS Box Sizing Module Level 3 で追加 【横書きの場合】要素の理想的な横幅 (コンテンツを折り返さずに内包できる最小の横幅)
【縦書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが横幅を計算します
stretchCSS Box Sizing Module Level 4 で追加 マージン・ボックスの横幅が使用可能な領域の横幅をすべて占有するように横幅を計算 (左右のマージンは折りたたまれず、“auto”の場合は“0”として扱われます。)
fit-contentCSS Box Sizing Module Level 4 で追加 min-content”と“stretch”のうちの大きい方と“max-content”を比べた時の小さい方の値と同じ
containCSS Box Sizing Module Level 4 で追加 アスペクト比が指定されていればその制約の中でマージン・ボックスの横幅が使用可能な領域の横幅をできる限り占有するように横幅を計算 (アスペクト比が指定されていなければ“stretch”と同じです。)
<length-percentage>”値
<length> pxvwなどで横幅を指定
<percentage> 内包される包括ブロックの横幅を“100%”として横幅を指定
他の値
fit-content()CSS Box Sizing Module Level 3 で追加 fit-content()”関数で横幅を指定
共通キーワード

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 作業草稿(WD) 作業草稿(WD)
width
定義あり

定義あり

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 作業草稿(WD) 作業草稿(WD)
<length>
定義あり

定義あり

定義あり

定義あり
<percentage>
定義あり

定義あり

定義あり

定義あり
auto
定義あり

定義あり

定義あり

定義あり
min-content
定義なし

定義なし

定義あり

定義あり
max-content
定義なし

定義なし

定義あり

定義あり
fit-content()
定義なし

定義なし

定義あり

定義あり
stretch
定義なし

定義なし

定義なし

定義あり
fit-content
定義なし

定義なし

定義なし

定義あり
contain
定義なし

定義なし

定義なし

定義あり

使用例

デフォルトの横幅

横書きの場合

div {
width: auto;
writing-mode: horizontal-tb;
}
In spring, dawn is the most beautiful moment.

縦書きの場合

div {
width: auto;
writing-mode: vertical-rl;
}
In spring, dawn is the most beautiful moment.

横幅を内容に合わせる

横書きの場合

div {
width: min-content;
writing-mode: horizontal-tb;
}
In spring, dawn is the most beautiful moment.
div {
width: max-content;
writing-mode: horizontal-tb;
}
In spring, dawn is the most beautiful moment.

縦書きの場合

div {
width: min-content;
writing-mode: vertical-rl;
}
In spring, dawn is the most beautiful moment.
div {
width: max-content;
writing-mode: vertical-rl;
}
In spring, dawn is the most beautiful moment.

横幅を内包される領域に合わせる

div {
margin: 10px;
width: stretch;
}
In spring, dawn is the most beautiful moment.
div {
margin: 10px;
width: fit-content;
}
In spring, dawn is the most beautiful moment.
div {
aspect-ratio: 1/1;
margin: 10px;
width: contain;
}
In spring, dawn is the most beautiful moment.

<length>”値で指定する

div { width: 200px;}
In spring, dawn is the most beautiful moment.

<percentage>”値で指定する

div { width: 50%;}
In spring, dawn is the most beautiful moment.

fit-content”関数で指定する

div { width: fit-content(200px);}
In spring, dawn is the most beautiful moment.
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク