レスポンシブWebデザインのためのメディアクエリの活用方法

まず、メディアクエリを使ってタブレットビューに対応する方法を紹介します。以下のコード例では、タブレットの画面幅が800ピクセル以下の場合にスタイルが適用されます。

@media (max-width: 800px) {
  /* タブレットビューに適用するスタイル */
  /* ここにスタイルのプロパティと値を指定します */
}

次に、モバイルビューに対応する方法を示します。以下のコード例では、モバイルの画面幅が480ピクセル以下の場合にスタイルが適用されます。

@media (max-width: 480px) {
  /* モバイルビューに適用するスタイル */
  /* ここにスタイルのプロパティと値を指定します */
}

上記のコード例では、max-widthを使用して特定の画面幅以下の場合にスタイルを適用していますが、min-widthを使用することで特定の画面幅以上の場合にスタイルを適用することもできます。

さらに、複数の条件を組み合わせることも可能です。以下のコード例では、タブレットビューとモバイルビューの両方に対応するスタイルを適用しています。

@media (max-width: 800px), (max-width: 480px) {
  /* タブレットビューとモバイルビューに適用するスタイル */
  /* ここにスタイルのプロパティと値を指定します */
}

以上が、メディアクエリを使用してタブレットビューとモバイルビューに対応する方法の一例です。必要に応じて、さまざまな条件やスタイルを組み合わせることができます。