widthプロパティ

最終更新日：2023-12-10
公開日：2016-08-14

widthプロパティは要素の幅を指定するプロパティです。

初期値
auto
継承
不可
適用できる要素
テーブルの列を除く全要素

widthプロパティが指定できる値

widthプロパティには以下の値を設定することができます。

値	内容
`auto`	初期値。自動的に計算された幅を適用。
数値 + 単位	任意の単位（`px`、`em`）で幅を指定。
数値 + `%`	親要素に対する割合を指定。

以降はwidthプロパティを使ったコードと、ブラウザの使用例を紹介していきます。

使用例1: auto

widthプロパティに「auto」で横幅を指定する例です。
自動的に親要素と同じ幅へ調整されています。

CSS コード例

.sample1 {
  box-sizing: border-box;
  padding: 20px;
  width: 500px;
  border: 1px solid #ccc;
}
.sample1 h2 {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.sample1 .text {
  width: auto;
  background: #f5bf56;
}

HTML コード例

<div class="sample1">
  <h2>width: auto;</h2>
  <p class="text">widthプロパティのテスト。</p>
</div>

ブラウザで表示してみると以下のようになります。

使用例2: px指定

widthプロパティに「数値 + px」で横幅を指定する例です。
自動的に親要素と同じ幅へ調整されています。

CSS コード例

.sample2 {
  box-sizing: border-box;
  padding: 20px;
  width: 500px;
  border: 1px solid #ccc;
}
.sample2 h2 {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.sample2 .text {
  width: 100px;
  background: #f5bf56;
}

HTML コード例

<div class="sample2">
  <h2>width: 100px;</h2>
  <p class="text">widthプロパティのテスト。</p>
</div>

ブラウザで表示してみると以下のようになります。

使用例3: %指定

widthプロパティに「数値 + %」で横幅を指定する例です。
親要素の横幅が500pxの場合、子孫要素の横幅を50%を指定すると250pxに自動的に計算されて表示されます。

様々な横幅のデバイスに対応するためにレスポンシブ表示にするときなど、横幅が可変する前提でレイアウトを組む場合に便利な指定方法です。

CSS コード例

.sample3 {
  box-sizing: border-box;
  padding: 20px;
  width: 500px;
  border: 1px solid #ccc;
}
.sample3 h2 {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.sample3 .text {
  width: 50%;
  background: #f5bf56;
}

HTML コード例

<div class="sample3">
  <h2>width: 50%;</h2>
  <p class="text">widthプロパティのテスト。</p>
</div>

ブラウザで表示してみると以下のようになります。

使用例4: calc関数による計算結果で指定

widthプロパティはcalc関数の計算結果を横幅として指定することができます。

例えば2つの要素を横並びにレイアウトするとき、片方の横幅が「100px」と決まっていて残りをもう片方の要素の横幅にしたいケースでは「calc(100% - 100px)」のように指定することができます。

実際に指定するCSSは以下のようになります。
今回はclass名「text1」を「100px」の固定にし、class名「text2」に対してcalc関数によるwidthプロパティの指定を行っています。

CSS コード例

.sample4 {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  width: 500px;
  border: 1px solid #ccc;
}
.sample4 h2 {
  margin-bottom: 20px;
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.sample4 .text1 {
  width: 100px;
  background: #f5bf56;
}
.sample4 .text2 {
  width: calc(100% - 100px);
  background: #569df5;
}

HTML コード例

<div class="sample4">
  <h2>width: calc(100% - 100px);</h2>
  <p class="text1">1つ目のテキスト。</p>
  <p class="text2">2つ目のテキスト。</p>
</div>

ブラウザで表示してみると以下のようになります。

記事一覧