CSS

The width property in CSS is used to specify the width of an element, and it can be adjusted using values such as pixel measurements, percentages, or keywords like "auto," "fit-content," and "max-content."

width

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

　min-width および max-width プロパティは、 width を上書きします

構文

CSS

/* <length> 値 */
width: 300px;
width: 25em;

/* <percentage> 値 */
width: 75%;

/* キーワード値 */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

/* グローバル値 */
width: inherit;
width: initial;
width: unset;

　widthプロパティは以下のいずれかの値で指定します。

値

<length>
絶対的な値で幅を定義します。
<percentage>
親となる包含ブロックの幅に対するパーセント値で定義します。
auto
指定された要素の幅をブラウザーが計算して決めます。
max-content
望ましい固有の幅です。
min-content
最小の固有の幅です。
fit-content(<length-percentage>)
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, <length-percentage>)) です。

アクセシビリティの考慮

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

公式定義

初期値
auto
適用対象
all elements but non-replaced inline elements, table rows, and row groups
継承
なし
パーセンテージ
包含ブロックの幅
計算値
パーセンテージ、auto、絶対的な長さのいずれか
アニメーションの種類
length または percentage, calc();