CSSで必須となるwidthとheightについて、その基本と指定方法の注意点について、解説していきたいと思います。
width・heightとは
widthとは、そのままの意味で横幅のことになります。要素の横幅を指定するCSSプロパティになります。
以下のように記述します。
.selector {
width: 300px;
}heightは、高さのことになり、要素の高さを指定するCSSプロパティになります。
以下のように記述します。
.selector {
height: 300px;
}width、heightで使う値の単位について
width、heightはpx(ピクセル)で指定するだけではなく、その他様々な要素を指定することができます。
基本的なものでは以下のようなものがあります。
- width: 100px;
- width: 100%;
- width: 100vw;
- height: 100vh;
ちなみにデフォルト値はwidth:auto;になります。
autoの場合はコンテンツ幅によって自動で幅が調整されます。
autoの使い方ですが、初期値であるため基本的にはリセット目的で使うことが主です。width・heightのリセット方法については後述します。
width、heightの単位の使い分けについて
width、heightの意味や使い分けについては、ほとんどの方がすんなり理解できるかとおもいますが、指定する単位の使い方については分からないという人もいるのではないでしょうか。
前述した値の単位について、どのような表現になるかサンプルコードから見てみましょう。
See the Pen GRJeLgE by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.
pxは基本的なものなので、解説は割愛させていただきます。
％は、要素に対して何パーセントの幅を設けるか、といったものになります。
サンプルだと、width:100%なので、親要素（.container）に対していっぱいに広がっているのがわかります
vwは、ビューポート（画面のサイズ）に対しての横幅サイズを指定するものになります。viewport widthの略になります。
％が親要素のサイズを基準として算出するのに対して、vwは親要素ではなく、ディスプレイサイズ（画面サイズ）を基準として算出するところが大きな違いです。
サンプルだと、親要素の幅ではなく、表示エリアいっぱいに広がっているのが分かるかと思います。
サンプルにはありませんが、vhもvwと意味的に同じでheight版になります。
viewport heightの略で、ビューポート（画面サイズ）に対して高さを指定するものになります。
width、heightはインライン要素には適用されない
初心者が少し躓くだろうポイントとして、インライン要素というものがあります。
たとえば<span></span>はデフォルトでインライン要素ですが、そのままでは高さを指定するこができません。
See the Pen jOPJRGd by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.
上記サンプルでインライン要素（例：spanタグ）にはwidthとheightを指定しても、指定した大きさにならないことが分かります。
その反対に、ブロック要素（例：divタグ）の場合は、指定したwidth、heightに広がっています。
画像タグにwidthとheightを指定する場合
画像タグにwidth、heightを指定する場合についてみていきましょう。
具体的には以下のような感じです。
<img src="https://〜" width="200" height="100" alt="">
この場合単位はつけませんが、適用される単位はpxになります。
width、heightの注意点
widthとheightの指定にはインライン要素以外にもいくつか注意点があります。
細かい点ですが、ベストなwebを作成するといった観点から見るのであれば、可能な限り意識するのが望ましいです。
画像タグのwidth、heightの指定方法について
画像タグについてwidth、heightを指定する方法について前述しましたが、実際には、画像タグにはwidthとheightは指定しないほうが良いといったルールが巷では多くあります。
実際に実務のコーディングレギュレーション（コーディング規則）に書いている企業も多いのではないでしょうか。
画像タグに直接width、heightを書くと、CSSの拡張性・保守性が低下するといった理由からになります。
何故かと言いますと、画像タグには必ずしもwidthやheightを記述する必要はなく、記述しなかった場合、そのままの画像サイズで表示されるといった特性があります。
そのためレスポンシブデザインなどで、CSSにて画像サイズを指定することが前提になっている場合や、画像ファイル自体を変更する可能性がある場合などは、保守性の観点から、widthやheightの書き換えの手間を無くすために、最初からwidthやheightを画像タグには書かないようにしようといったものにあります。
ただし弊社では例外があると考えております。
画像サイズが環境で変わらない場合、画像変更で大きくサイズが変わったり、縦横比の変更もないだろうと考えられる場合は、画像タグに直接width、heightを書いた方がいいと言えます。
理由としては、読み込みの観点からその方法がベストだと言えるからです。
画像タグに直接サイズを指定している場合と、外部ファイルなどCSSでサイズを指定している場合では、当然画像タグに直接サイズ指定をしている方が速度パフォーマンス的には優れていると断言できるからです。
max-width・min-width、max-height・min-heightについて
width・heightにはmax-widthやmin-heightといったものがあります。
レスポンシブデザインなどでは使用する頻度も多いので覚えておくようにするといいかもしれません。
maxとminについは以下のような意味になります。
max-：最大サイズ
min-：最小サイズ
max-◯◯は最大サイズを指定するものになります。
min-◯◯は最小サイズを指定するものになります。
たとえば、max-width: 400px;と指定すると、その要素の横幅は最大で400pxまでとなります。
逆にmin-height: 100px;と指定すると内的コンテンツの高さが100pxに満たなかった場合でも、高さが100pxは設定されるようになります。
双方実際の使い方としては、横幅（もしくは高さ）に制限を設けたい場合、もしくは最低でもこのくらいの横幅、高さを保持してほしい、といった時に使用することになります。
width、heightのリセット方法について
CSSでwidth、heightをリセット・上書きしたいと思われたこともあるのではないでしょうか。
たとえば、max-widthとして指定していた要素について、一部max-を消したいといった場合の方法です。レスポンシブデザインによってはブレイクポイントによって幅を柔軟に設定したいケースがあります。
その場合のリセットですが、以下2つの指定方法があります。
- width: auto;
- max-width: initial;
width: autoはそのまま要素のサイズ状態をautoに変更します。
しかし、autoでは効かない場合もあります。
たとえば「max-width: 〇〇」をリセットしたいと思った時に、autoではうまく動かない場合があります。
そういった場合では、initialを使うようにしましょう。
例：以下のようなかたちです。
.selector {
max-width: initial;
}よければご参考にしてください。
