CSS @media メディアクエリの使い方

まず、@mediaルールの基本構文は以下のようになります:

@media メディアタイプ and (条件) {
    /* スタイルの定義 */
}

メディアタイプは、画面、プリンタ、スクリーンなど、特定のデバイスまたはメディアの種類を指定します。条件は、画面幅、解像度、方向などのプロパティを指定し、その条件に一致する場合に適用されるスタイルを定義します。

例えば、以下のコードは、画面幅が800ピクセル以下の場合に適用されるスタイルを定義しています:

@media screen and (max-width: 800px) {
    /* 800px以下の画面幅に適用されるスタイル */
    body {
        background-color: lightblue;
    }
}

この例では、screenというメディアタイプと、(max-width: 800px)という条件を指定しています。したがって、画面幅が800ピクセル以下の場合に、body要素の背景色がライトブルーになります。

他にも、デバイスの解像度に応じて画像のサイズを変更したり、特定の方向に対して異なるスタイルを適用したりすることもできます。

また、@mediaルールは連結することもできます。例えば、以下のコードは、画面幅が600ピクセル以上かつ800ピクセル以下の場合に適用されるスタイルを定義しています:

@media screen and (min-width: 600px) and (max-width: 800px) {
    /* 600px以上かつ800px以下の画面幅に適用されるスタイル */
    body {
        font-size: 16px;
    }
}

このように、@mediaルールを使用することで、レスポンシブなウェブデザインを実現することができます。さまざまなデバイスや画面サイズに対して最適な表示を提供するために、@mediaルールを活用しましょう。

この記事では、@mediaルールの基本的な使い方といくつかのコード例を紹介しました。これを参考にして、自身のウェブプロジェクトに@mediaルールを適用してみてください。