width/max-width/min-widthの利用するパターンについて

記事の目的

各プロパティの意味は分かっていても、いざこれらを使うとなると混乱してしまうため
使い分け方を覚えたいと思いこの記事を残します。

各プロパティのおさらい

width

要素の幅を指定します。

max-width

要素の幅の最大値を指定します。
widthに相対値(パーセントなど)を指定した上でこのプロパティを使用します。

min-width

要素の幅の最小値を指定します。
widthに相対値(パーセントなど)を指定した上でこのプロパティを使用します。

widthの使い方

①要素の幅を絶対値を用いて指定する。

利用する場面→
画面の幅や影響されずにサイズを指定したい場合

.hoge{
    width: 960px;
}

See the Pen Untitled by Komono masaya (@masayakomono) on CodePen.

②要素の幅を親要素の幅を基準として指定する。

利用する場面→
レスポンシブ対応、レイアウトが〇：〇の割合だと決まっているときなど

.hoge{
    width: 1000px;
}
.hoge .left{
    width: 70%;/*700px*/
}
.hoge .right{
    width: 30%;/*300px*/
}

See the Pen width-2 by Komono masaya (@masayakomono) on CodePen.

max-widthの使い方

①要素の幅を相対的にしつつも上限を決めておく

利用する場面→
小さなスクリーンでは画面に広く表示したいが大きなスクリーンでは固定幅にしたいとき
例えば画像などは引き伸ばしすぎると荒くなるので最大幅を設定しておく

.hoge{
    width: 80%;
    max-width: 200px;
}

See the Pen max-width-1 by Komono masaya (@masayakomono) on CodePen.

②スクリーンから要素がはみ出ないようにする。

利用する場面→
スマホなどの小さなスクリーン内にも収めたいとき
max-width: 100%と指定することで少なくともスクリーン幅より幅が大きくなることはないため
スクリーンからはみ出ることはなくなる。

.hoge{
    max-width: 100%;
    height: auto;
}

max-witdhだけを指定すると「幅のみ制御されて高さがそのまま」＝縦長になったりするので
height: auto;も指定して縦横比が変わらないようにすることを推奨します。

③メディアクエリでスマホやタブレット判定の条件を指定する際に使用する

利用する場面→
レスポンシブ対応かつPCファーストの場合、パソコンでの表示を基本CSSとして実装し、スマホ幅の場合の指定をメディアクエリ内に記述する。

@media screen and (max-width:599px) { 
 /*ここにCSSを書く*/
}

min-widthの使い方

①要素の幅を相対的にしつつも下限を決めておく

利用する場面→
大きなスクリーンでもなるべく幅を小さくして表示したいが、小さなスクリーンだと狭くなりすぎてしまう場合
使用するシチュエーションもmax-widthの反対の場合という認識でよい　　　

.hoge{
    width: 20%;
    min-width: 800px;
}

See the Pen min-width-1 by Komono masaya (@masayakomono) on CodePen.

②メディアクエリでPC判定の条件を指定する際に使用する

利用する場面→
レスポンシブ対応かつモバイルファーストの場合、スマホでの表示を基本CSSとして実装し、PC幅の場合の指定をメディアクエリ内に記述する。

@media screen and (min-width:960px) { 
 /*ここにCSSを書く*/
}

おまけ

Flexboxについて

Flexboxを使用するとdisplay: flexを指定した子の要素の幅や高さもブラウザが調整してくれる
反面、一部の子要素のみを固定幅にするのはwidthを指定するだけでは実現不可能である。

min-heightの使い道について

bodyタグに対してmin-height: 100vhと指定すればWebサイト全体の高さ＝ポートビューの高さになるため
縦スクロールの発生しないサイトが作成できる。

ただしmin-height: 100vhにも問題がありそう。

余談

調べているとどんどん問題点が出てきて、解決策はコレ！というのが出てくるので
この記事をまとめたから万事解決とはなっていない。
幅や高さの指定について調べる際の一歩目になっていれば。