要素の横幅を設定するwidthについて解説

1.width とは

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

2.widthの指定方法

width を指定するときは主に px、％、vw のどれかを使って指定します。

widthをpxで指定

width を px で指定したときは、ブラウザの画面幅を変更しても横幅を固定で保ちます。

それでは指定方法と実際の表示を見ていきましょう。

<div class="width-px"></div>

.width-px {
　width: 250px;
　height: 100px;
　background-color: red;
}

上記のように width を px で指定したので横幅は250pxになります。

px で指定した横幅は固定になるので、ブラウザの画面幅を変更しても、指定した横幅が固定で変わらないことを確認してみてください。

widthを%で指定

width を % で指定したときは、親要素の横幅を基準にして相対的に横幅が決まります。

それでは指定方法と実際の表示を見ていきましょう。

<div class="width-parent">
　<div class="child-class"></div>
</div>

.width-parent {
　width: 100%; /* 横幅いっぱい */
　height: 100px;
　background-color: red;
}

.child-class {
　width: 50%;
　height: 100px;
　background-color: blue;
}

上記の表示のように width を % で指定したときは親要素の横幅を基準にして相対的に横幅が決まります。

今回は width: 100%; の赤背景(横幅いっぱい)に対して width: 50%; の青背景の指定しています。

こちらもブラウザの画面幅を変更して50%の青背景の横幅が相対的に保たれるところを確認してみてください。

widthをvwで指定

width を vw で指定したときは、ブラウザの横幅を基準にして相対的に横幅が決まります。

それでは指定方法と実際の表示を見ていきましょう。

<div class="width-vw"></div>

.width-vw {
　width: 30vw;
　height: 100px;
　background-color: red;
}

上記の表示のように width を vw で指定したときはブラウザの横幅を基準にして相対的に横幅が決まります。

今回は width: 30vw; を指定しているのでブラウザの横幅が1000pxの時は赤背景の部分は300pxになります。

こちらもブラウザの画面幅を変更して30vwの横幅が相対的に保たれるところを確認してみてください。

3.まとめ

この記事では width について解説しました。

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

width を指定するときは主に px、％、vw のどれかを使って指定します。

それぞれの内容を理解して使い分けていきましょう。

最後までお読みいただきありがとうございます。