[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか

小さいスクリーンでは幅いっぱいに表示し、大きいスクリーンでは固定幅にする時、通常はwidthとmax-widthを使用します。
指定方法は「width: 100%; max-width: 600px;」でしょうか。

このwidthとmax-widthのどちらに100%と固定幅を指定すべきか、違いはあるのか? 同じなのか? そんな疑問を解決します。

要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか

A Tale of width and max-width

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

先週の記事(Considerations for Styling a Modal)のコメントにあった興味深い会話がきっかけになりました。

モーダルウインドウやコンテンツの幅を指定する時、小さいスクリーンでは最大幅で表示し、大きいスクリーンでは幅600pxで表示し、親要素からはみ出さないように幅を指定します。もちろん小さいスクリーンで水平のスクロールバーも無しです。
あなたは、どのようにそれを指定しますか?

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

1は幅は600pxで最大幅は100%、2は幅は100%で最大幅は600px。
多くの人は2で、幅は常に100%で、最大時は600pxまでね、という指定だと思います。1の指定だと、幅は600pxだけど最大時は100%で、は一見どのようになるのか想像しづらいかもしれません。

しかし答えは、どちらも同じです。どちらに指定するかは重要ではありません。

これについて人々のリアクションをみてましょう。

  • 2番目の方が正しい。
  • 非常に大きな相違がある。
  • 2番目の方が親の幅にフレンドリー。
  • 1番目はゴミ。
  • 2番目がよりロジカルな方法でビヘイビアを記述している。

私はこの結果がショッキングであるということに同意します。

実際にその指定をしたデモを見てましょう。
上のボックスが「width: 600px; max-width: 100%;」
下のボックスが「width: 100%; max-width: 600px;」です。

デモのアニメーション

No difference between these

要素は「max-width」で指定した値より親要素が広い時に、「max-width」の値が適用されます。
どういうことなのかというと、

  • 親が1,000pxの幅の場合
    • 「width」は要素が600pxの幅であるべきだと伝えます。「max-width」のルールを破らずに、600pxになります。
    • 「width」は要素が1,000pxの幅であるべきだと伝えます。「max-width」のルールを破って、要素が600pxになるよう強要します。
  • 親が320pxの幅の場合
    • 「width」は要素が600pxの幅であるべきだと伝えます。「max-width」のルールを破って320pxになります。そう320pxになるんです!
    • 「width」は要素が320pxの幅であるべきだと伝えます。「max-width」のルールを破らずに、320pxになります。

親要素がより広い狭いかにかかわらず、widthとmax-widthのどちらに100%と固定幅を指定しても同じになることが分かります。

最後に、Twitterより、Flexboxのアイテムに使用すると相違があります。
参考: There's a difference when they're flex items

top of page

©2017 coliss