すべてのカテゴリ

Web制作をしていると、必ずと言っていいほど出てくるwidth と max-width。どちらも「横幅」を指定するプロパティですが、実は使いどころと役割がまったく違います。この記事では、「結局どう違うの？」「どっちを使えばいいの？」という疑問を、初心者にもわかるように解説します。widthとは？width は、その要素の「横幅を固定で指定する」プロパティです。指定した数値は、基本的に画面サイズに関係なく常に適用されます。たとえば「widthを600pxにする」と決めた場合、PCでもスマホでも、その要素は600pxの幅を持とうとします。その結果どうなるかというと、画面が広いPCでは問題なし画面が狭いスマホでは横にはみ出す横スクロールが発生することがあるという状態になりやすいです。つまり widthは「固定サイズ」 だと考えるとわかりやすいです。max-widthとは？一方で max-width は「横幅の最大値だけを決める」プロパティです。重要なのは、最大はここまででも画面が狭ければ、それに合わせて縮むという点です。たとえば「max-widthを600pxにする」と指定した場合、画面が600px以上 → 最大600pxまで画面が600px未満 → 画面サイズに合わせて縮小します。つまり max-widthは「上限を決めるだけ」 の指定です。widthとmax-widthの決定的な違い一番大きな違いは、レスポンシブ対応かどうかです。width→ サイズを固定する→ スマホ対応には不向きmax-width→ 画面サイズに応じて柔軟に変わる→ レスポンシブと相性がいい現代のWebサイト