【CSS入門】要素の幅を指定するwidthについてマスターしよう

この記事ではCSSのwidthプロパティについて解説します。

widthとは？

ブロックレベル要素やインラインブロックの幅を指定します(インライン要素には指定できません)。

幅を指定しないと、要素の幅は横一杯に広がるので、例えばbodyに幅が指定されていない場合ブラウザの幅がbodyの幅となります。

widthの使い方

widthに指定できる値は以下の通りです。

width: auto;

widthの初期値がこれです。

幅を指定しないと、要素の幅は横一杯に広がります。

HTML

<div class="box">BOX-A</div>

CSS

.BOX-A{
  width: auto;
  height: 200px;
}

親要素の幅を超えることはなく、親要素の幅が指定されていたら、親要素の横一杯に広がります。

以下の場合.BOX-Aの横幅は親要素と同じ500pxになります。

HTML

<div class="parent">
  <div class="box">BOX-A</div>
</div>

CSS

.parent{
  width: 500px;
}

.BOX-A{
  width: auto;
}

width: ○○px;

要素の幅をpxで指定します。

pxは絶対値なので、子要素の幅を親要素の幅より大きくしてはいけません。大きくしてしまうと、レイアウトが崩れてしまいます。

HTML

<div class="box">BOX-A</div>

CSS

.BOX-A{
  width: 500px;
  height: 200px;
}

画像の横幅にpx指定

インラインブロックと同じ扱いの画像も、width: ○○px;で横幅を指定できます。

画像の高さは、指定さえしなければ縦横比を保つように自動で調整されます。

HTML

<img src="sample.jpg" width="1000px">

CSS

img{
  width: 500px;
}

width: ○○%;

要素の幅を%で指定します。

絶対値のpxと違い、親要素の幅次第で幅が変わります。下記の場合、width: 50%;を指定したら、親要素の幅が1000pxなので幅は500pxになります。

HTML

<div class="parent">
  <div class="BOX-A">BOX-A</div>
</div>

CSS

.parent{
  width: 1000px;
}

.BOX-A{
  width: 50%;
}

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の3点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。