CSS width 幅を指定するサンプル

目次 widthとは
数値 + 単位(px) / 数値+% / auto

widthとは

widthは幅を表します。

書き方 width : 値
数値 + 単位・・・要素の幅になります。単位はpx等です。
数値+%・・・要素の幅になります。親ブロックに対する割合です。
auto・・・ブラウザが自動的に調整します。(初期値)
初期値 auto
継承 なし
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/width

数値+pxを指定

widthに200pxを指定しています。

<style>
  .box1 {
    width: 200px; /* pxで指定 */
    background: LightCyan;
    border: 1px solid #000;
  }
</style>
<div class="box1">width:200px</div>

 

数値+%を指定

%は親のブロックに対する割合になります。
親のwidthに300px、子のwidthに50%なので子のwidthは150pxになります。

<style>
  .box1 {
    width: 300px;
    border: 1px dotted #000;
    background: LightCyan;
  }
  .box2 {
    width: 50%; /* %で指定 */
    border: 1px solid #000;
  }
</style>
<div class="box1">
  <div class="box2">width:50%</div>
</div>

 

autoを指定

autoはブラウザが自動で指定します。
親のwidthに300px、子のwidthにautoを指定しました。幅は300pxでした。

<style>
  .box1 {
    width: 300px;
    border: 1px dotted #000;
    background: LightCyan;
  }
  .box2 {
    width: auto; /* autoで指定 */
    border: 1px solid #000;
  }
</style>
<div class="box1">
  <div class="box2">auto</div>
</div>

関連の記事

CSS max-width 最大の幅を指定するサンプル
CSS min-width 最小の幅を指定するサンプル

△上に戻る