CSSの最も基本となるのが【width】プロパティです。
横幅を指定する一見単純なプロパティなのですが、サイズの指定するにはいくつかの方法があり、どれを使えばいいか悩むこともありますよね。
今回はCSSのwidthの使い方や値の設定方法などについて解説していきます。
『widthの正しい設定方法が知りたい』
『px、%の使い分けが分からない』
などが知りたい方はぜひご覧ください。
目次
『width』プロパティができること
widthプロパティができることは指定した要素の横幅を指定するというものです。
↓スマホでの閲覧時は Result をクリックすると結果が閲覧出来ます。
widthを指定することで、設定した値に要素の横幅を指定することができます。
値の4つの指定方法
widthの設定方法は指定方法はいくつかあります。
中でも以下の4つの設定方法が実践でも使われているのでご紹介します。
| 値 | 概要 |
|---|---|
| px | 絶対値で指定することができる 画面サイズを変えても固定の幅で表示される |
| % | 親要素の横幅の相対値で幅を指定する 100%であれば親要素の等しい幅になる |
| vw | view widthの略称で画面サイズの幅から算出します。 100vwは画面幅いっぱいになり、画面幅が変更することによって横幅も変えることが可能です。 |
| auto | widthプロパティを設定しない場合はこのautoが設定されます。 |
それぞれの使用例をご紹介します。
pxの使用例
↓スマホでの閲覧時は Result をクリックすると結果が閲覧出来ます。
どの画面サイズから見ても横幅は固定されるのが特徴です。
%の使用例
↓スマホでの閲覧時は Result をクリックすると結果が閲覧出来ます。
親要素の横幅を割合で指定します。
今回の場合は親要素が横幅100%でwidth: 50%を指定しているので、必ず半分の大きさになります。
vw
↓スマホでの閲覧時は Result をクリックすると結果が閲覧出来ます。
vwは画面幅の割合で横幅の設定できます。
上記であれば50vwなので、ちょうど画面幅の半分の横幅になります。
どの値を使用するべきか？
４つの値を紹介しましたが、どの値を使うべきか悩むところです。
ただどれを使っていけばいいというものはなく適材適所で使い分けていく必要があります。
使い分ける基準としては『絶対値』と『相対値』の理解を深めておくことが重要です。
それぞれ見ていきます。
絶対値
絶対値とは他の要素には左右されない値のことです。
上記で紹介した値の中だと『px』が該当します。
pxは画面幅や親要素の大きさに関係なく指定した大きさになります。
このように他の要素に影響されない値のことを絶対値と言います。
相対値
相対値は他要素の大きさによって値が決められます。
上記で紹介した値の中だと『%、 vw』が該当します。
これらの値は親要素の幅や画面幅によって大きさが変動します。
固定値ではなく要素にあわせて幅を変動させることができるのが相対値です。
大きさを固定したい場合は絶対値、画面幅に対応させたいなら相対値
widthの指定でどの値を使うべきかはまとめると
『どの画面でも大きさを固定したなら絶対値(px)、画面幅に対応させたいなら相対値(%、vw)』
を使うのが基本になります。
どちらを使うかはデザインによって変わりますので、適材適所で使い分けができるようになりましょう。
実践的なHTML、CSSを学びたいなら『スキルド』
| スクール名 | 料金 | 学習期間 |
|---|---|---|
| スキルド | 月額5,000円 | 1ヶ月~3ヶ月 |
widthについてご紹介しました。
widthの理解はWEBサイトをコーディングする上では欠かせないスキルです。
『スキルド』ではそんな頻出するデザインの実践的なコーディングスキルが身につけられるコースを用意しています。
オンライン上でLP（ランディングページ）を制作するようなカリキュラムになっており、基礎だけでなく実践的なスキルまで学べるのが強みです。
レスポンシブデザインへの対応もカリキュラムに含まれており、コーディングスキルを学びたいという方にはオススメのスクールとなっております。
現在は無料体験キャンペーンを行っていますので、気になる方はぜひ無料体験を利用してみてください。
