Media Queries 入門：Web デザインをデバイスに最適化する

Media Queries（メディアクエリ）は、Webページのレイアウトやデザインを、閲覧デバイスの特性に合わせて動的に調整するためのCSS機能です。具体的には、画面サイズ、解像度、向き、メディアタイプ（スマートフォン、タブレット、パソコンなど）といった条件に基づいて、CSSスタイルを適用することができます。

@media.device-widthとは？

@media.device-widthは、Media Queriesの中でも、デバイスの幅に基づいてスタイルを適用する機能です。具体的には、以下の構文を使用します。

@media (min-device-width: 値) {
  /* 対象デバイスの幅が指定値以上の場合に適用されるCSSスタイル */
}

上記例では、デバイスの幅が最小値ピクセル以上の場合に、指定されたCSSスタイルが適用されます。反対に、デバイスの幅が値ピクセル未満の場合は、このMedia Queryに定義されたスタイルは適用されません。

例：スマートフォン向けのデザイン

スマートフォン向けに、メインコンテンツの幅を600ピクセルに設定したい場合は、以下のMedia Queryを使用します。

@media (min-device-width: 600px) {
  #main-content {
    width: 600px;
  }
}

このMedia Queryは、デバイスの幅が600ピクセル以上の場合にのみ適用され、#main-content要素の幅を600ピクセルに設定します。

注意点

@media.device-widthを使用する際は、以下の点に注意する必要があります。

将来的な変化に対応する: モバイルデバイスの画面サイズは、今後も拡大していく可能性があります。そのため、将来的に問題が発生しないよう、柔軟なデザインを心がける必要があります。
デバイスによって幅の解釈が異なる場合がある: スマートフォンやタブレットなどのモバイルデバイスでは、画面解像度と実際の表示サイズが異なる場合があります。そのため、@media.device-widthのみで判断すると、意図したデザインにならない可能性があります。

スマートフォン向けデザイン

この例では、スマートフォン向けに以下のデザインを行います。

余白を20ピクセルに設定
フォントサイズを16ピクセルに設定
メインコンテンツの幅を600ピクセルに設定

/* デフォルトのデザイン */
#main-content {
  width: 80%;
  font-size: 18px;
  padding: 30px;
}

/* スマートフォン向けデザイン (デバイス幅600px以下) */
@media (max-device-width: 600px) {
  #main-content {
    width: 100%;
    font-size: 16px;
    padding: 20px;
  }
}

タブレット向けデザイン

この例では、タブレット向けに以下のデザインを行います。

余白を30ピクセルに設定
フォントサイズを18ピクセルに設定
メインコンテンツの幅を800ピクセルに設定

/* デフォルトのデザイン */
#main-content {
  width: 80%;
  font-size: 18px;
  padding: 30px;
}

/* タブレット向けデザイン (デバイス幅600px以上かつ900px未満) */
@media (min-device-width: 600px) and (max-device-width: 900px) {
  #main-content {
    width: 800px;
    font-size: 18px;
    padding: 30px;
  }
}

パソコン向けデザイン

この例では、パソコン向けに以下のデザインを行います。

余白を40ピクセルに設定
フォントサイズを20ピクセルに設定
メインコンテンツの幅を1000ピクセルに設定

/* デフォルトのデザイン */
#main-content {
  width: 80%;
  font-size: 18px;
  padding: 30px;
}

/* パソコン向けデザイン (デバイス幅900px以上) */
@media (min-device-width: 900px) {
  #main-content {
    width: 1000px;
    font-size: 20px;
    padding: 40px;
  }
}

上記はあくまで一例であり、具体的なデザインは状況に合わせて調整する必要があります。

Media Queriesは、レスポンシブデザインを実現するための重要な機能です。ぜひ積極的に活用してみてください。
複数のMedia Queriesを組み合わせることで、より複雑なデザインに対応することができます。
上記の例では、min-device-widthとmax-device-widthを組み合わせて、デバイス幅の範囲を指定しています。

@media.width

@media.widthは、ブラウザウィンドウの幅に基づいてスタイルを適用するMedia Queryです。デバイスの幅とブラウザウィンドウの幅は必ずしも一致するわけではないため、@media.device-widthよりも柔軟なレイアウトを作成できます。

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

レイアウトグリッド

CSS Grid LayoutやFlexboxなどのレイアウトグリッドシステムを使用すると、デバイスの幅に関係なく、柔軟なレイアウトを作成することができます。これらのシステムは、行や列を定義することで、コンテンツを配置することができます。

#main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

JavaScriptによる判定

JavaScriptを使用して、デバイスの幅を判定し、それに応じてCSSスタイルを動的に適用する方法もあります。この方法は、より高度なレイアウトやインタラクティブな機能が必要な場合に有効です。

const width = window.innerWidth;

if (width <= 600) {
  document.getElementById('main-content').style.width = '100%';
} else {
  document.getElementById('main-content').style.width = '800px';
}

方法	利点	欠点
`@media.device-width`	シンプルでわかりやすい	デバイス幅とブラウザウィンドウ幅の差異の影響を受ける
`@media.width`	ブラウザウィンドウ幅に柔軟に対応できる	複雑なレイアウトには不向き
レイアウトグリッドシステム	柔軟性が高く、複雑なレイアウトにも対応できる	学習曲線がやや高い
JavaScript	高度なレイアウトやインタラクティブな機能を実現できる	JavaScriptの知識が必要