幅を指定する際に使用できる、
- max-width
- min-width
- width
ぱっと見どのように使い分けしたらいいか分かりにくいですよね。
そこで、今日はこの3つの使用方法について解説していきたいと思います◎
とりあえず、width、max-width、min-widthの違いが直感的にわかるようにデモを用意しています。
ブラウザ幅を広げたり縮めたりして、それぞれがどのような動きをするのか是非見てみてください。
width
一番オーソドックスな幅の指定方法です。
絶対値（px）を入れれば、ブラウザ幅・親要素幅にかかわらずずっとその幅がキープされます。500pxなら500px。1000pxなら1000px。
相対値（%）を入れると、親要素の幅に対する値が入ります。
50%なら、親要素の幅に対して50%。つまり半分の横幅が確保されることになります。
たとえば、
親要素が1000px、子要素を50%とするのであれば、子要素は常に500pxの幅が確保されていることになります。
親要素が50%、子要素が50%であれば、最終的に子要素は全体の25%分の幅を確保することになります。（50%の中の50%なので、半分の半分ということになります）
親要素は、それより親に幅を指定していない場合は、基本的にブラウザ幅に対しての相対値になります。
ここは幅指定における基本知識なので、しっかりマスターしておきましょう◎
min-widthとmax-widthを使う前に
min-widthとmax-widthを使用する場合、widthが相対値（可変）であることが大前提です。
この2つは、「最小幅」「最大幅」を指定しておくものになります。
widthが絶対値になっていると、widthの振れ幅がないので、min-widthとmax-widthの設定は無意味になります。
max-width
最大幅を指定する際に使います。
たとえば、widthを100%に指定すると、ブラウザ幅を広げたときにすごく大きくなってしまいます。
「基本的にブラウザ幅いっぱいにしておきたいけど、このサイズ以上にはなってほしくないな…」というときに使用します。
使用例としては、
・コンテンツ幅は画面いっぱいにしておきたい
・でも最大幅は1000pxにしておきたい
といった時に、
width: 100%;
max-width: 1000px;と書くことで実現可能です。
min-width
最小幅を指定する際に使います。
たとえば、widthの項で説明したような「親要素50%、子要素50%」としてしまうと、子要素がとても小さくなってしまうかもしれません。
なので、「ブラウザ幅を縮めても、要素はこの幅以下にはしたくない」といった場合に使用します。
使用例としては、
・コンテンツ幅は画面いっぱいにしておきたい
・でも800px以下にはしたくない
といった時に、
width: 100%;
min-width: 800px;と書くことで実現可能です。
min-widthの注意点
親要素が相対値且つ、子要素にmin-widthを設定する場合は注意が必要です。
たとえば、親要素の幅が100%で子要素が50%、min-widthを500pxと設定してしまった場合、
ブラウザ幅を1000px未満にした場合、子要素は親要素に対して50%じゃなくなります。
50%の値よりもmin-widthで指定した値のほうが大きくなるので、それ以下にはならないためです。
うっかり50%の子要素を横並びにしている場合などは、親要素からはみ出たりカラム落ちしてしまうので要注意。
横並びにしているはずの子要素が、min-widthを指定しているばかりに途中からカラム落ちしてしまうDEMOを作成しました。
ブラウザ幅を700px以下くらいにすると、横並びの要素が縦並びになってしまいますね。
これを避けるには、可変幅の親要素の子要素にmin-widthを指定しないようにしましょう。
打消し時の注意
メディアクエリでそのセレクタの幅を上書きする場合、
width, max-width, min-width は別物です。
widthを上書きしたのに効かない…というような場合は、min-widthやmax-widthが効いてしまっているという可能性があります。
それぞれ、noneの値で上書きしてあげましょう。
まとめ
幅回りの指定は、サイトのレイアウト調整において非常に重要です。
どんなデバイスでも、どんなウインドウサイズでもストレスなく表示できるような幅指定を意識しましょう！
