はじめに
幅のスタイルの当て方はすこしずつ慣れてきたきがする。
だがしかし、、、
widthプロパティには、widthとmax-widthの２つあり使い分けがよく分からん。
という状況になったのでまとめます。
※超初学者です。間違いがありましたらご指摘いただけると、とても嬉しいです。
? : widthとmax-widthって厳密には何が違うの？
ブロック要素にはpx指定。インライン要素には％指定をするというのが基本。
例）インライン要素のimgはwidth: 100%;と指定。（親要素に依存させる）
このwidthをmax-widthと指定しないのはなんで？
結論
厳密な決まりはないが、
・widthは指定された幅を厳密に適用するため、「 要素の幅は固定される 」。
→ だからpx単位を使うことが多い。
・max-widthは 「 要素の幅が特定の値を超えないように制約するだけ 」 で、
内容や親要素の幅に応じて変動する。
widthとmax-widthはどちらも要素の幅を制御するためのCSSプロパティ。
それぞれの使い方と効果にはいくつかの重要な違いがある。
width
機能: 要素の幅を固定する。
使用例: width: 500px; と指定する。→ その要素の幅は常に500pxになる。
適用例: 固定幅のレイアウトを作成したい時に向いてる。
max-width
機能: 要素の幅の最大値を指定する。
使用例: max-width: 100%; のように指定すると、その要素の幅は親要素の幅を超えない。
要素が特定の幅を超えないようにしつつ、画面サイズに応じて柔軟に縮小するようにできる。これにより、レスポンシブデザインを実現しつつ、読みやすさやデザインの一貫性を保つことができる。
適用例: レスポンシブデザインで使用されることが多く、要素の幅が特定の最大値を超えないようにしたい場合に使用します。
2つの違い
・max-width: n %;の方が柔軟性が高い。
widthは指定された幅を厳密に適用するため、要素の幅は固定される。
max-widthは要素の幅が特定の値を超えないように制約するだけで、内容や親要素の幅に応じて変動する。
・max-widthは10pxのコンテナに対して50pxの
レスポンシブデザイン
widthは固定レイアウトに。（レスポンシブデザインには適していないことがある。）
max-widthはレイアウトが変わっても対応できることが多く、レスポンシブデザインでよく使用される。
ポイント
親子関係がある時には、
親要素にmax-width子要素にwidth:100%;
にする。
親要素の幅に合わせて子要素のサイズが調整される、柔軟なレイアウトを作成できる。
この方法はレスポンシブデザインや柔軟なレイアウトを実現するために非常に有効。
補足１：width: 100%;ってどんなとき指定する？
『 子要素の幅を親要素の幅に完全に合わせたいとき 』
<div class="point">
<img src="images◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎" alt="">
</div>
.point {
max-width: 200px;/*親要素の固定幅を指定*/
}
img {
width: 100%;/*親要素に100％になるように指定*/
}
→ imgに100％と指定しているので、親要素の200pxにピッタリの幅を持たせることができる。
おわりに
max-widthプロパティの癖にまだついていけない。。
使いこなせるようになりたいです。レスポンシブデザインをやるようになったらもう少しよくわかるようになるんだろうな、と思っています。
昨日から幅についてまとめてるけど、実際使っていってみてわかるようになりそうなので、練習していきます。