width

CSSでは、コンテンツの横幅を指定することができます。

本ページでは、widthプロパティについて説明します。

widthプロパティとは

widthプロパティを使うと、コンテンツ領域の横幅を指定することができます。コンテンツ領域とは、枠線(境界線)やパディング領域の内側にある、テキストなどを表示する領域です。

widthの説明

widthの定義は、以下のとおりです。

【widthの定義】
length | percentage | auto | inherit
初期値 auto
適用対象 すべての要素(置換要素でないインラインボックスの要素、displayがtable-row-group、table-rowを除く)
継承 しない

置換要素とは、iframe、video、img要素などを示します。

値の説明

以下は、widthで使える値と説明です。

length
数値と単位で指定します。マイナスは、使えません。
percentage
親要素の横幅に対するパーセントで指定します。マイナスは、使えません。
auto
ブラウザで決定します。ブロックボックスの要素では、親要素の横幅に合わせます。img要素などは、コンテンツを表示するのに必要な横幅になります。

利用例

widthの利用例は、以下のとおりです。

【widthの利用例】
.test {
  width: 200px;
  border: solid;
}

上記は、以下のように表示されます。

widthを利用した時の表示例

横幅が200px(境界線除く)で表示されています。

以下のHTMLがあったとします。

【widthのパーセント利用を説明するためのHTML】
<div class="test">
<div>テスト1</div>
<div>テスト2</div>
</div>

CSSでは、widthでパーセントを使ってみます。

【widthのパーセント利用例】
.test {
  border: solid red;
  display:flex;
  padding:2px;
}

.test * {
  border: solid blue;
  width: 40%;
}

上記は、以下のように表示されます。

percentageで指定した時の表示例

display:flexは、フレックスボックスを利用しています。フレックスボックスは、デフォルトでは子要素を横に並べて表示します。width:40%なので、2つの要素は親要素の40%の横幅で横に並んで表示されます。

留意点

widthは、spanなどのインラインボックスの要素には適用できません(img要素などには適用できます)。また、表のtrなどにも適用できません。表で横幅を指定したい場合は、tableやtd要素などで指定します。

また、コンテンツが1行に収まらない時は、自動で折り返しますが、単語や数字の途中では折り返しません。以下は、widthで200pxを指定していますが、数字が横幅からはみ出しています。

widthを指定して文字がはみ出す例

このため、横幅を指定する時は、連続した数字などに配慮が必要です。途中に半角スペースなどがあると、そこで折り返します。また、日本語は連続していても自動で折り返します。

最も重要なのは、デフォルトでは境界線を含めた横幅を指定するのではなく、コンテンツ領域の横幅を指定するという点です。親要素の横幅が200pxで、widthを200pxに指定した場合、パティングや境界線があると、はみ出してしまいます。詳細は、「ボックスモデル」をご参照ください。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
width
【スマートフォン】
項目 Sa An Op Ch Fx Sm
width
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る