レスポンシブWebデ...|独学でWebデザインの勉強をする人のためのまとめサイトです。


  • レスポンシブWebデザイン講座 レスポンシブ予備知識編(無料公開中)

レスポンシブWebデザインの必須のCSS指定。「width:100%」と「max-width:100%」の違いは何?

レスポンシブWebデザインを学習していて、私が最初に疑問に思ったのが、画像の扱い方です。

Webページが、画面サイズに合わせて自動で拡大縮小し、画像の拡大時は画面サイズからはみださないようにする。

これには、img要素に「width:100%」や「max-width: 100%」と指定するのですが、

その違いは何なのか?

よくわかっていないと、上手くいかないことがあります。

そこで、両者の違いをわかりやすく、まとめてみました。

「width:100%」と「max-width: 100%」の違い

両者の違いは、画面サイズを広げた時、元サイズより拡大するか(width:100%; )させないか(max-width: 100%;)です。

レスポンシブWebデザイン 画像 width:100%

max-width:100%のサンプルを見る

 

 

レスポンシブWebデザイン 画像 max-width:100%

width:100%のサンプルを見る



レスポンシブWebデザイン動画講座受講について

【初級編】【応用編】【練習問題】を受講するには、講座へのお申し込みが必要となります。


レスポンシブWebデザイン使い方講座詳細・お申し込みはこちら



Pagetop