width

要素の横幅を指定できます。

サンプルコード

style.css

/* px指定 */
p.test { width: 500px;}

/* auto: 初期値。親要素に合わせて自動算出 */
p.test2 { width: auto;}

/* %指定: 親要素の幅の50% */
p.test3 { width: 50%;}

/* vw（ビューポート幅）で指定 */
.full-width { width: 100vw;}

/* calc()で計算して指定 */
.sidebar { width: calc(100% - 300px);}

/* fit-content: コンテンツに合わせた幅 */
.tag { width: fit-content;}

/* レスポンシブ: 幅100%でモバイル対応 */
img { width: 100%; height: auto;}

指定可能な値一覧

値	概要
auto	包含ブロックの大きさを自身のパディングとボーダーを含めた状態で引き継ぎます。img要素に指定した場合は画像サイズそのままの大きさで反映するか、もしくはアスペクト比が維持できる横幅を高さに合わせて自動算出します。『width』プロパティの初期値はこの『auto』となります。
数値	数値で指定します。主に使用される単位は『px』や『%』です。負の値の指定はできません。『%』で指定した場合の基準となる大きさは包含ブロックの横幅となります。

ブラウザでの表示結果

<div style="width: 500px; background-color: #ff0;">ここはdiv要素です。『width: 500px』と指定しています。</div>

<div style="width: 500px; border: solid 1px #f00;">
	<div style="width: auto; background-color: #ff0;">ここはdiv要素の中のdiv要素です。親のdiv要素(赤枠の要素)に『width: 500px』と指定し、この要素(背景色黄色の要素)には『width: auto』と指定しています。この要素の横幅は親要素の大きさを引き継ぐため、『500px』となります。</div>
</div>

概要

要素の横幅を指定できます。

置換要素以外のインラインレベル要素に『width』プロパティを指定しても反映されません。置換要素とはimg要素、input要素、object要素、select要素、textarea要素、button要素等以外の『display』プロパティの値が『inline』となっている要素です。

<p>
	<span style="width: 500px; background-color: #ff0;">ここはspan要素です。『width: 500px』と指定していますが非置換要素のインラインレベル要素のため『width』プロパティは反映されません。</span>
</p>

<p><img style="width: 300px;" src="/dics/dictionary-css/img/sample.jpg"></p>

値の単位を『%』で指定した場合は包含ブロックの大きさを基準とした相対値となります。その際は自身のボーダーとパディングの値を含まない状態で反映します。

<div style="width: 500px; border: solid 1px #f00;">
	<div style="width: 100%; background-color: #ff0;">ここはdiv要素の中のdiv要素です。親のdiv要素(赤枠の要素)に『width: 500px』と指定し、この要素(背景色黄色の要素)には『width: 100%』と指定しています。この要素の横幅は親要素の大きさを基準とした相対値となるため、『500px』となります。</div>
</div>

<div style="width: 400px; border: solid 1px #f00;">
	<img style="width: 100%;" src="/dics/dictionary-css/img/sample.jpg">
</div>

<div style="width: 400px; border: solid 1px #f00;">
	<div style="width: 100%; padding: 0 50px; background-color: #ff0; opacity: 0.7;">ここはdiv要素の中のdiv要素です。親のdiv要素(赤枠の要素)に『width: 400px』と指定し、この要素(背景色黄色の要素)には『width: 100%』、『padding: 0 50px』と指定しています。この要素の横幅は親要素の大きさを基準とした相対値となりますが、自身のパディングの大きさが加算されるため、『500px』となり親要素を突き破ります。</div>
</div>

インライン要素、及びimg要素以外の『width』プロパティの値を『auto』とした場合は包含ブロックの大きさを引き継ぎます。『100%』と指定した場合とほぼ同じようなレンダリングとなりますが、『auto』と指定した場合は自身のボーダーとパディングを含めた状態で包含ブロックの『100%』の大きさとなります。

<div style="width: 500px; border: solid 1px #f00;">
	<div style="width: auto; padding: 0 50px; background-color: #ff0;">ここはdiv要素の中のdiv要素です。親のdiv要素(赤枠の要素)に『width: 500px』と指定し、この要素(背景色黄色の要素)には『width: auto』、『padding: 0 50px』と指定しています。この要素の横幅は親要素の大きさと同じになります。自身のパディングの大きさは加算されないため、親要素と同じ大きさの『500px』となります。</div>
</div>

img要素の『width』プロパティを『auto』とした場合はその画像の大きさで反映されます。尚、『height』プロパティの値に『auto』以外の値が指定されていた場合はアスペクト比が維持できる横幅を高さに合わせて自動算出します

<p><img style="width: auto;" src="/dics/dictionary-css/img/sample.jpg"></p>

<p><img style="width: auto; height: 150px;" src="/dics/dictionary-css/img/sample.jpg"></p>

よくあるミス

インライン要素にwidthを指定しても反映されない

『width』プロパティはブロックレベル要素と置換要素（img・input・select等）に効果があります。span要素やa要素などの非置換インラインレベル要素には反映されません。widthを効かせたい場合は『display: block』や『display: inline-block』を指定します。

/* spanは非置換インライン要素のためwidthが効かない */
span { width: 200px; }

次のコードも別の記述例です。

/* inline-blockに変更するとwidthが有効になる */
span { display: inline-block; width: 200px; }

%指定の基準を親要素の高さと混同してしまう

『width: 50%』のように『%』で指定した場合、基準は親要素（包含ブロック）の横幅です。縦方向の大きさ（height）ではありません。『height: 50%』も同様に包含ブロックの高さが基準ですが、包含ブロックの高さが確定していない場合は反映されません。

/* width: 50%は親要素の横幅の50% */
.half { width: 50%; }

/* height: 50%は親要素の高さが確定していないと反映されない */
/* 親要素にheightを明示するか、min-heightを使う */
.parent { height: 400px; }
.child { height: 50%; } /* 親が400pxなので200pxになる */

box-sizingの指定によってwidthの意味が変わる

CSSの初期値では『width』はコンテンツ領域の幅を指定します（box-sizing: content-box）。パディングやボーダーを含めた幅で指定したい場合は『box-sizing: border-box』を使用します。

/* content-box（初期値）: widthはコンテンツ幅のみ。実際の表示幅はwidthにpadding・borderが加算される */
.box-a {
    box-sizing: content-box; /* 初期値 */
    width: 200px;
    padding: 20px;
    border: 1px solid;
    /* 実際の表示幅: 200px + 40px(padding) + 2px(border) = 242px */
}

/* border-box: widthにpadding・borderを含めた幅で計算される */
.box-b {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid;
    /* 実際の表示幅: 200px（paddingとborderを含む） */
}