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

width:横幅

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

プロパティについて

概要

初期値 width: auto;
適用対象 非置換インライン要素を除くすべての要素
継承 しない
パーセント値 要素が内包されるブロックの横幅に依存

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

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

width”プロパティは既定ではCSSのボックスモデルでのコンテンツの領域の横幅を指定します。“width”プロパティで指定した横幅を境界線の外縁までの横幅としたい場合はbox-sizing: border-box;を適用します。

CSSのボックスモデル

サンプルコード

div { width: 50%;}

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

仕様書

Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC)
width
定義あり

定義あり

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC)
<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: 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: auto;
writing-mode: vertical-rl;
}
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.
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク