レスポンシブ入門(メディアクエリ)

このレッスンでは、メディアクエリを使ったレスポンシブデザインの基本を学び、スマホでもパソコンでも見やすいページを作れるようになることを目標にします。「CSS メディアクエリ 使い方」で調べている方向けです。

@media (max-width: 幅) { }を使うと、画面の幅に応じて異なるCSSを適用できます。スマホでもパソコンでも見やすいページを作るための基本テクニックで、これに対応したデザインを「レスポンシブデザイン」と呼びます。

サンプルコードでは、通常は緑色の.cardが、画面幅が400px以下になると@media (max-width: 400px)のルールが適用されてピンク色に変わります。プレビューの幅を実際に変えてみて、背景色が切り替わるタイミングを確認してみましょう。

初心者がよくつまずくのが、メディアクエリを適用する順番です。CSSは基本的に後に書いたルールが優先されるため、メディアクエリは通常のスタイルより後ろに書く必要があります。順番を間違えると、意図した画面幅でスタイルが切り替わらないことがあります。

今やWebサイトへのアクセスの多くはスマートフォンからです。パソコンの大画面用に作ったデザインをそのままスマホで表示すると文字が小さすぎたりレイアウトが崩れたりするため、メディアクエリでの調整はほぼ必須のスキルになっています。