CSSメディアクエリで既存のWebページをモバイル対応に改良する方法

既存のWebページをモバイル対応にするには

すでに公開しているWebページをモバイル対応に改良する（リトロフィットする）には、CSSメディアクエリを活用するのが効果的です。メディアクエリを使えば、ブラウザやデバイスの機能・画面サイズに応じて、異なるスタイルシートを柔軟に適用できます。

サーバーサイドのコードが不要

この方法の大きなメリットは、サーバーサイドのコードを一切書く必要がないことです。メディアクエリを使わない場合、デバイスを種類ごとに分類するための検出コードをスクリプトに追加する必要があり、実装の手間や保守コストが増えてしまいます。

さらに、メディアクエリは標準仕様に基づいているため、自分が聞いたことのないような未知のデバイスにも自動的に対応できます。将来登場する新しい端末にも柔軟に適応できる点は、大きな強みといえるでしょう。

メディアクエリの設定例

モバイルデバイス向けのスタイルを適用するには、次のように記述します：

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {
    body {
        color: blue;
    }
}

この例では、画面幅が480px以下のハンドヘルドデバイス、デバイス幅が480px以下のスクリーン、および画面幅が600px以下のスクリーンに対して、文字色を青に変更するスタイルが適用されます。このようにメディアクエリを活用することで、既存のHTMLを大きく変更することなく、モバイルフレンドリーなデザインを実現できます。