CSSにおけるmax-device-widthとmax-widthの使い分け：モバイルWebデザインで迷わないために

2024-06-16

CSSにおけるmax-device-widthとmax-widthの違い：モバイルWebにおける使い分け

近年、スマートフォンやタブレット端末の普及により、Webサイトの閲覧環境は多様化しています。そのため、あらゆるデバイスで最適な表示を可能にする「レスポンシブWebデザイン」が重要視されています。

レスポンシブWebデザインを実現する上で、重要な役割を果たすのがCSSメディアクエリです。メディアクエリを用いることで、デバイスの画面サイズや解像度に応じて異なるスタイルを適用することができます。

今回取り上げるmax-device-widthとmax-widthも、メディアクエリで使用されるプロパティですが、それぞれ微妙な違いがあります。モバイルWebサイトにおける適切な使い分けを理解するために、それぞれの定義と具体的な例を交えて解説していきます。

max-device-widthとは？

max-device-widthは、デバイスの物理的な画面サイズを基準とした最大幅を指定します。つまり、デバイスのベゼルやステータスバーなどを含めた、画面全体における最大幅を指します。

例えば、iPhone 13 Pro Maxの場合、max-device-widthは896pxとなります。これは、デバイスの物理的な幅が896pxであることを意味します。

一方、max-widthは、ブラウザウィンドウの幅を基準とした最大幅を指定します。つまり、デバイスの画面サイズではなく、実際に表示されているWebページの幅を指します。

例えば、上記と同じiPhone 13 Pro Maxで、Webページを全画面表示している場合、max-widthは896pxとなります。しかし、ブラウザウィンドウを縮小した場合、max-widthの値も小さくなります。

具体的な使い分け

それぞれの違いを踏まえ、具体的な使い分けの例をいくつか紹介します。

例1：ヘッダーメニューの表示・非表示

スマートフォンでは、画面サイズが小さいことから、ヘッダーメニューをハンバーガーメニューのように非表示にして、必要なときにのみ表示したい場合があります。
この場合、max-device-widthを使用して、デバイスの画面サイズに応じてヘッダーメニューの表示・非表示を切り替えることができます。

@media (max-device-width: 768px) {
  #header-menu {
    display: none;
  }
  #header-menu-button {
    display: block;
  }
}

例2：カラムレイアウトの切り替え

タブレット端末では、スマートフォンよりも画面サイズが大きくなるため、2カラムレイアウトを採用したい場合があります。

@media (max-device-width: 992px) {
  #content {
    width: 100%;
  }
}

@media (min-device-width: 993px) and (max-device-width: 1200px) {
  #content {
    width: 50%;
    float: left;
  }
  #sidebar {
    width: 50%;
    float: right;
  }
}

まとめ

max-device-widthは、デバイスの物理的な画面サイズを基準とした最大幅を指定します。
max-widthは、ブラウザウィンドウの幅を基準とした最大幅を指定します。
デバイスの画面サイズに応じてスタイルを柔軟に変更したい場合は、max-device-widthとmax-widthを適切に使い分けることが重要です。

補足

近年では、max-device-widthとmax-widthの区別をあまり意識せず、min-widthと組み合わせてブレイクポイントを設定する方法も一般的になっています。
具体的な使い分けは、Webサイトのデザインやレイアウトによって異なるため、状況に応じて最適な方法を選択する必要があります。

前回の説明で、max-device-widthとmax-widthの違いと具体的な使い分けについて解説しました。

今回は、それぞれのプロパティを使用したサンプルコードを紹介します。

/* デフォルトのスタイル */
#header-menu {
  display: flex;
  justify-content: space-between;
}

/* スマートフォン向けスタイル */
@media (max-device-width: 768px) {
  #header-menu {
    display: none;
  }
  #header-menu-button {
    display: block;
  }
}

説明

デフォルトのスタイルでは、ヘッダーメニューを横並びに表示します。
スマートフォン向けのスタイルでは、max-device-widthを使用して、画面サイズが768px以下の場合にヘッダーメニューを非表示にし、代わりにハンバーガーメニューを表示するボタンを表示します。

/* デフォルトのスタイル */
#content {
  width: 100%;
}

/* タブレット向けスタイル */
@media (min-device-width: 768px) and (max-device-width: 992px) {
  #content {
    width: 65%;
    float: left;
  }
  #sidebar {
    width: 35%;
    float: right;
  }
}

/* デスクトップ向けスタイル */
@media (min-device-width: 993px) {
  #content {
    width: 70%;
    float: left;
  }
  #sidebar {
    width: 30%;
    float: right;
  }
}

デフォルトのスタイルでは、コンテンツを1カラムで表示します。
タブレット向けのスタイルでは、min-device-widthとmax-device-widthを使用して、画面サイズが768px以上992px以下の場合にコンテンツとサイドバーを2カラムで表示します。
デスクトップ向けのスタイルでは、画面サイズが993px以上の場合にコンテンツとサイドバーを2カラムで表示しますが、それぞれの幅を調整しています。

その他の例