ウェブサイトを作る際に、スマートフォンやタブレットなど、さまざまなデバイスで見やすいデザインにするにはCSSの「メディアクエリ」という便利な機能を使います。今回はその使い方を紹介します。

メディアクエリとは？

メディアクエリとは、デバイスの画面サイズや向きによってスタイルを変えるためのCSSの機能です。例えば、スマートフォンでは文字を大きくしたり、レイアウトを変えたりすることができます。

具体的な使い方

メディアクエリを使うときは、以下のような書き方をします。

/* 通常のスタイル */
h1 {
    font-size: 24px;
}

/* メディアクエリ */
@media screen and (max-width: 600px) {
    h1 {
        font-size: 18px;
    }
}

この例では、画面幅が600px以下のときにh1の文字サイズを18pxに変えるように指定しています。

ポイント

・メディアクエリは「@media」で始まり、条件を指定して{ }の中にスタイルを記述します。

・条件には画面サイズや向きだけでなく、解像度なども指定できます。

まとめ

メディアクエリを使うことで、さまざまなデバイスに対応したレスポンシブデザインを簡単に実装することができます。ぜひ活用してみてください。