- メディアクエリの構文: メディアクエリは、特定の条件が満たされたときにスタイルを適用するための条件文です。以下は、メディアクエリの基本的な構文です。
@media メディアタイプ and (条件) {
/* スタイルの宣言 */
}
- メディアタイプ: メディアタイプは、メディアクエリが適用されるデバイスの種類を指定します。例えば、画面、プリンタ、テレビなどが一般的なメディアタイプです。以下は、メディアタイプの一部の例です。
screen
: デバイスが画面を持つ場合に適用されます。print
: デバイスが印刷用途の場合に適用されます。tv
: テレビデバイスに適用されます。
- 条件: 条件は、メディアクエリが適用されるための追加の条件を指定します。例えば、デバイスの幅や方向などの条件を指定することができます。以下は、いくつかの条件の例です。
(max-width: 600px)
: デバイスの幅が600ピクセル以下の場合に適用されます。(orientation: landscape)
: デバイスの向きが横向きの場合に適用されます。
- コード例: 以下に、いくつかのメディアクエリレベル4のコード例を示します。
/* 600ピクセル以下の画面に適用されるスタイル */
@media screen and (max-width: 600px) {
/* スタイルの宣言 */
}
/* 印刷時に適用されるスタイル */
@media print {
/* スタイルの宣言 */
}
/* デバイスが横向きの場合に適用されるスタイル */
@media (orientation: landscape) {
/* スタイルの宣言 */
}
これらの例では、特定の条件が満たされた場合にスタイルが適用されます。デバイスの幅や方向に基づいて、レイアウトやスタイルを調整することができます。
メディアクエリレベル4は、CSSにおけるレスポンシブデザインの実装に非常に役立つ機能です。これらの基本的な概念とコード例を使用して、レスポンシブなウェブデザインを作成する際に活用してください。