初心者向け！CSSのMedia Queriesと@media.device-widthでレスポンシブデザインを作ろう

CSSのMedia Queriesと@media.device-width

@media.device-widthは、デバイスの幅に基づいてスタイルシートを切り替えるためのメディアクエリです。例えば、以下のように記述することで、スマートフォンとタブレット、デスクトップそれぞれに異なるスタイルを適用できます。

/* スマートフォン */
@media (max-width: 575px) {
  body {
    font-size: 16px;
  }
}

/* タブレット */
@media (min-width: 576px) and (max-width: 767px) {
  body {
    font-size: 18px;
  }
}

/* デスクトップ */
@media (min-width: 768px) {
  body {
    font-size: 20px;
  }
}

@media.device-widthの使いどころ

• スマートフォン、タブレット、デスクトップそれぞれに異なるレイアウトを適用する
• 画面幅に応じて、画像のサイズや配置を調整する
• フォントサイズや行間を調整する
• ナビゲーションバーの表示・非表示を切り替える

その他のメディアクエリ

• @media.min-width：指定された最小幅以上のデバイスに適用
• @media.orientation：デバイスの向き（縦向き/横向き）を指定

注意点

• メディアクエリは、ブラウザの互換性によって動作が異なる場合があります。
• 複数のメディアクエリが一致する場合、メディアクエリリストの最後のものが適用されます。

補足

• 上記の例はあくまで基本的なものです。より複雑な条件を設定することも可能です。
• メディアクエリは、JavaScriptと組み合わせてより動的なレスポンシブデザインを実現できます。

さまざまなデバイス向けのサンプルコード

スマートフォン

@media (max-width: 575px) {
  /* スマートフォン向けのスタイル */
  body {
    font-size: 16px;
  }
  
  .main-content {
    width: 100%;
  }
  
  .sidebar {
    display: none;
  }
}

タブレット

@media (min-width: 576px) and (max-width: 767px) {
  /* タブレット向けのスタイル */
  body {
    font-size: 18px;
  }
  
  .main-content {
    width: 75%;
  }
  
  .sidebar {
    display: block;
    width: 25%;
  }
}

デスクトップ

@media (min-width: 768px) {
  /* デスクトップ向けのスタイル */
  body {
    font-size: 20px;
  }
  
  .main-content {
    width: 50%;
  }
  
  .sidebar {
    width: 30%;
  }
}

• 画像のサイズや配置をデバイス幅に応じて調整する

@media (max-width: 575px) {
  img {
    width: 100%;
  }
}

@media (min-width: 576px) {
  img {
    width: 50%;
  }
}

@media (max-width: 575px) {
  .nav {
    display: none;
  }
}

@media (min-width: 576px) {
  .nav {
    display: block;
  }
}

Media Queries を使用せずにデバイス幅に応じたスタイルを適用する方法

JavaScript を使用して、デバイス幅を取得し、それに応じてスタイルを動的に変更することができます。

const deviceWidth = window.innerWidth;

if (deviceWidth <= 575) {
  // スマートフォン向けのスタイル
  document.body.style.fontSize = "16px";
} else if (deviceWidth <= 767) {
  // タブレット向けのスタイル
  document.body.style.fontSize = "18px";
} else {
  // デスクトップ向けのスタイル
  document.body.style.fontSize = "20px";
}

CSS Grid レイアウトを使用すると、デバイス幅に応じて要素を自動的に配置することができます。

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}

@media (max-width: 575px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

Flexbox レイアウトを使用すると、要素を柔軟に配置することができます。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 575px) {
  .container {
    flex-direction: row;
  }
}

Media Feature Queries Level 5 では、min-width や max-width 以外にも、より詳細な条件を指定することができます。

@media (min-width: 575px) and (max-width: 767px) and (orientation: landscape) {
  /* タブレット横向き向けのスタイル */
}

• シンプルなレイアウトの場合は、@media.device-width を使用するのが easiest 方法です。
• より複雑なレイアウトの場合は、JavaScript や CSS Grid レイアウトを使用する必要があります。
• 将来のブラウザ互換性を考慮する場合は、Media Feature Queries Level 5 を使用することができます。