「width」と「max-width」の違いをCSSでの使用事例とともに解説！

最近ではJavascriptを使うことなく、モーダルウィンドウをCSSのみで表示することができるようになりました。

 

この時、モーダルウィンドウの横幅を決めるとしましょう。その時、以下の二つの記述の方法がありますよね。（※スマホ表示の際、横スクロールはさせないものとします）

 

1.width: 600px; max-width: 100%;

2.width: 100%; max-width: 600px;

 

これってどちらが正解なんでしょうか？

 

海外のWebデベロッパー向けサイトに投稿されたこの問題ですが、ついた回答は「どちらでも同じ」。しかし一部のデベロッパーたちから異論を唱える声が上がり、問題が紛糾。その異論に耳を傾けてみると、

 

・2の記述のほうが「より正しい」

・「同じ」じゃない。この二つは全然違う

・2のほうがより横幅の狭い親要素と親和性が高い

・1の記述はダメ

・2の記述のほうが論理的

 

いずれも一理ありそうな意見ですが、確かにこの1と2は異なる感じがします。この正解を求めるには、テストケースで考えるのが有効でしょう。

 

というわけで、このモヤモヤを解消するためにケースごとに考えてみましょう。

 

親要素の横幅が「1000px」の場合

 

・「width」で600pxを指定したとき、「max-width」のルールは破られることがない。すなわち600pxで表示される

 

・「width」で1000pxを指定したとき、「max-width」のルールが破られる。すなわち強制的に600pxでの表示になる

 

親要素の横幅が「320px」の場合

 

・「width」で600pxを指定したとき、「max-width」のルールが破られる。すなわちその要素は320pxで表示される

 

・「width」で320pxを指定したとき、「max-width」のルールは破られない。すなわちその要素は320pxで表示される

 

 

つまり表示上は同じでも、こう言うことができそうです。

 

もしその要素が「max-width」で指定されていることよりもワイドに指定されているなら、「max-width」のルールが優先される。

 

 

 

 

（※本稿は「A Tale of `width` and `max-width`」を翻訳、再編集したものです）