widthとmax-widthについて。。。

質問

cssについて、困っています。アドバイスを何卒宜しくお願い致します。
widthとmax-widthですが、あまり理解できていません。。
可変式にブラウザウィンドウのサイズを変更しても思うように画像要素が小さくなっていくようにして作っているのですが、どこにmax-widthで％指定し、どの場合はwidthで%指定するのか、または両方指定するのかが把握できておらず、
最終的に形にはなり、完全にレスポンシブ化できるのですが、このままではいつか痛い目にあうだろうなと思い調べたりしているのですが解決に至らずご質問いたしました。ご教示いただければ幸いです。

何卒どうか宜しくお願い致します。

回答No.3

noname#249322 · ベストアンサー

No.2です。
すいません、私が補足を読みまちがえました。

CSSの初めのほうで、ご提示のコードを書いて設定をリセットしたいということですね。

質問者様の認識であっています。
CSSの初めのほうで、ご提示のコードを書いたほうが効率的です。

ただ、それを施すのであれば、CSSリセットと言うCSSのテンプレートがWeb上にたくさん公開されています。

そのテンプレートのなかに、質問者様が提示されたコードがよく書かれていますので、そちらを使うほうがいいかもしれませんね。
ぜひ、検索してみてください。

失礼いたしました。

回答No.2

noname#249322

補足拝見しました。
ご提示のコードですが、ご認識の通りです。

imgをmax-width 100%としていますので、画像がブラウザ画面をはみ出すくらい大きなサイズの場合は、ブラウザ画面にはみ出すないくらいの大きさまで縮小して表示されます。
縦横比（height）には、お気をつけください。

効率的かどうかに関しては、ケースバイケースかな？ と思います。
とはいえ、レスポンシブデザインを作るのでしたら、PCとスマホで画面サイズがちがうので、max-widthの指定は必須であると言えますね。

PC画面で丁度いい要素のサイズだと思っていても、スマホで見ると大惨事……そんな不幸を防げます。

回答No.1

noname#249322

確かにわかりにくいところですね。
ざっくりと分けると次のようなイメージとなります。

・width：要素の幅のサイズを決定します。
・max-width：要素の幅をこれ以上大きくしたくないなというときに使います。

2つのパターンで利点を見ていきましょう。
1つ目の利点：
例えば、画像を貼り付けるところを想像してください。
画像の幅で適切なサイズが、60%くらいだとします。
しかし、これを可変にして、ブラウザの画面サイズに順じるとした場合、画像サイズが適切な60%を超えてしまう可能性がありますね。

そこで、max-widthの出番です。
max-widthは、要素の幅の最大のサイズを指定できます。
ここで、max-widthを500pxに指定すると、ブラウザの画面がどれだけ横に大きくても、max-widthの指定した大きさ以上にはならないようにできます。

2つ目の利点：
上とは逆に画像が大きすぎる場合を想像してみてください。
画面からはみ出してしまうくらい大きな画像です。
そこで、やはりmax-widthを使います。
max-widthで、大きすぎる画像に対して、100%を指定することで、常にブラウザの画面に合ったサイズに調整してくれます。
ただし、縦横比が崩れる可能性が高いので、いっしょにheightを指定して、縦横比を整える必要ある場合もあります。

・widthは、要素のサイズを決定するもの。
・max-widthは、要素の最大サイズを決定するもの。
と、使い分けてください。

また、width、max-widthを両方指定したほうがいいのかということに関しては、上の例でも上げたとおり、widthで画像を100%に指定してレスポンシブを実現したのはいいものの、250pxは超えてほしくないんだよなというときは、width:100%、max-width:250px。
のような形で、両方用いるのがよいかと思います。

長文になりましたが、ご参考になれば幸いです。

補足

お返事本当にありがとうございます！とても分かりやすかったです！ちなみになのですが、最初に

img{
　max-width:100%
}

と指定しておくと少なくとも大きくなりすぎることはなくなり効率的になるのでしょうか？

最後にアドバイスを何卒宜しくお願い致します。