こんにちは！
今回はCSSでmax-width: 100%を指定する理由についてまとめます。
コード
- コードは前回と同様
- ウインドウ幅を狭めた場合の挙動を比較
min-width: 300pxの場合
- 最小でも300pxという指定をしているため、ウィンドウ幅が300pxを下回ると、ボタンがはみ出している
width: 300pxの場合
- 300px固定のため、同様にウィンドウ幅が300pxを下回ると、ボタンがはみ出している
max-width: 300pxの場合
- 最大幅が300pxという指定のため、ウィンドウ幅が300pxを下回った場合でも、ウィンドウ幅に追従しておりはみ出していない
max-width: 100%を追加した場合
min-width: 300pxの場合
- min-width: 300pxが優先されており、ボタンがはみ出している
width: 300pxの場合
- 画面幅が最大幅となるので、ボタンがはみ出さなくなっている
max-width: 300pxの場合
- 元々はみ出していないので変化なし
max-width: 100%の使い方
- 画面サイズが小さくなった時に、要素が画面からはみ出さないように指定する
- min-widthと同時に使った場合は、min-widthが優先される模様（下記参考） coliss.com
- 結論としては、widthで固定値を指定したときに、レスポンシブを想定して設定しておくといった使い方をする
おわりに
今回はCSSでmax-width: 100%を指定する理由についてまとめました。CSSは慣れるまではサイズの指定が一番引っかかるポイントだと思うので、気を付けながら書いていきたいですね。
91/100
