CSS3 @mediaクエリで画面サイズ変化に対応する

@media screen and (min-width 480px) and (max-width 767px)

近年、スマートフォンやタブレットなど、様々な画面サイズのデバイスが普及しています。そのため、ウェブサイトを制作する際には、異なる画面サイズでも快適に閲覧できるように、画面サイズに応じてレイアウトやデザインを調整することが重要です。 CSS3の@mediaクエリを使用すると、画面サイズや解像度などのメディア特性に応じて、異なるスタイルを適用することができます。

この記事では、@mediaクエリを使用して、画面サイズが480px以上767px以下のデバイスに特化したスタイルを適用する方法について解説します。

1. @mediaクエリの基本

@mediaクエリは、CSSのルールセットを適用する条件を指定するために使用します。基本的な構文は以下の通りです。


@media (条件式) {
  /* 条件式が真の場合に適用されるスタイル */
}

条件式には、画面の幅や高さ、解像度、向きなどのメディア特性を指定します。複数の条件を組み合わせる場合は、"and"演算子を使用します。

メディア特性	説明
min-width	指定した値以上の幅を持つ画面に適用されます。
max-width	指定した値以下の幅を持つ画面に適用されます。
orientation	画面の向き（portrait: 縦向き、landscape: 横向き）を指定します。

2. 480px - 767pxの画面幅に対応するスタイル

画面幅が480px以上767px以下のデバイスに特化したスタイルを適用するには、以下の@mediaクエリを使用します。


@media (min-width: 480px) and (max-width: 767px) {
  /* この画面幅に適用されるスタイル */
}

例えば、PC向けのデザインでは3カラム表示だったコンテンツを、タブレット向けのデザインでは2カラム表示に変更したい場合、以下のように記述します。


/* PC向けのデザイン */
.content {
  display: flex;
}

.content > div {
  width: 33.33%;
}

/* タブレット向けのデザイン */
@media (min-width: 480px) and (max-width: 767px) {
  .content > div {
    width: 50%;
  }
}

また、文字サイズや行間、余白なども、画面サイズに合わせて調整することで、より見やすく、快適な閲覧体験を提供することができます。

3. テストとデバッグ

@mediaクエリを使用したスタイルが正しく適用されているかどうかを確認するためには、ブラウザの開発者ツールを使用します。開発者ツールを使用すると、画面サイズをシミュレートしたり、デバイスごとに異なるスタイルを確認することができます。

主なブラウザの開発者ツールには、以下のような機能があります。

デバイスシミュレーション
レスポンシブデザインモード
CSSの編集とデバッグ

これらのツールを活用することで、様々な画面サイズでの表示を確認し、必要に応じてスタイルを修正していくことができます。

参考資料

@media - CSS | MDN

よくある質問

Q1. @mediaクエリはすべてのブラウザでサポートされていますか？

A1. 最新のブラウザであれば、ほとんどの場合サポートされています。ただし、古いブラウザの中には、@mediaクエリに対応していないものもあります。そのため、古いブラウザでも正しく表示されるように、適切なフォールバック対策を講じておくことが重要です。

Q2. @mediaクエリはJavaScriptと併用できますか？

A2. はい、@mediaクエリはJavaScriptと併用することができます。 JavaScriptを使用して、画面サイズに応じてDOM操作を行ったり、イベントリスナーを設定することができます。

Q3. @mediaクエリを使用する際の注意点は何ですか？

A3. @mediaクエリを使用する際は、以下の点に注意する必要があります。

パフォーマンスへの影響: @mediaクエリを使用すると、ブラウザは画面サイズが変更されるたびにスタイルを再計算する必要があるため、パフォーマンスに影響を与える可能性があります。そのため、@mediaクエリは必要最小限に抑え、パフォーマンスを意識したコーディングを心がけることが重要です。
メンテナンス性: @mediaクエリが増えすぎると、スタイルシートが複雑になり、メンテナンスが難しくなる可能性があります。そのため、@mediaクエリは適切に整理し、コメントなどでわかりやすくしておくことが重要です。

その他の参考記事:CSSメディアタイプmedia