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サイトでは、
スマホ・タブレット・PCなど、画面サイズがバラバラなので
max-widthの方が圧倒的に使われるケースが多いです。
よくある使い分け例
コンテンツ全体の横幅
Webサイトの本文エリアやコンテンツ枠では、
「中央寄せ＋max-width」が定番です。
理由は、
PCでは横に広がりすぎない
スマホでは画面いっぱいに自然に表示される
という、ちょうどいい見た目になるからです。
ボタンやアイコンなど
逆に、
ボタン
アイコン
ロゴ画像
など、サイズを固定したいものには
width を使うことが多いです。
なぜ初心者はwidthを使いがちなのか
HTML/CSSを始めたばかりの頃は、
「とりあえず横幅を指定したい」
↓
「widthを書けばいい」
となりがちです。
ですが、
そのままスマホで見ると
「レイアウト崩れ」「横スクロール発生」
という壁にぶつかります。
そこで初めて
「あ、max-widthってそういう意味だったのか」
となる人がとても多いです。
迷ったらどっちを使うべき？
もし迷ったら、基本ルールはこれです。
レスポンシブを意識する → max-width
サイズを固定したい → width
特に、
ページ全体・セクション・カードレイアウト では
max-widthを選ぶクセをつけると失敗しにくいです。
まとめ
widthは「固定の横幅」
max-widthは「横幅の上限」
レスポンシブ対応ではmax-widthが超重要
現代のWeb制作ではmax-widthが主役になりがち
この違いを理解できると、
「なんとなく指定するCSS」から
「意図を持って書くCSS」へ一段レベルアップできます。
