レスポンシブWebデザインに役立つ！CSSメディアクエリで2つの幅を指定するテクニック
CSSメディアクエリにおける「2つの幅の間」の指定方法
従来のメディアクエリによる幅の指定
従来のメディアクエリでは、min-widthやmax-widthプロパティを使用して、デバイスの幅に基づいてスタイルを適用していました。例えば、以下のコードは、幅が600px以下のデバイスにのみスタイルを適用します。
@media screen and (max-width: 600px) {
/* スタイル */
}
一方、幅が600px以上のデバイスにのみスタイルを適用するには、以下のコードのようにmin-widthを使用します。
@media screen and (min-width: 600px) {
/* スタイル */
}
2つの幅の間を指定する方法
しかし、これらの方法では、特定の幅範囲のみにスタイルを適用することができません。そこで、メディアクエリレベル4で導入されたand演算子と範囲指定構文を用いることで、2つの幅の間を指定することが可能になりました。
例：幅400pxから600pxまでのデバイスにのみスタイルを適用
@media screen and (min-width: 400px) and (max-width: 600px) {
/* スタイル */
}
このコードでは、and演算子によって、2つの条件を同時に満たすデバイスのみを対象としています。つまり、幅が400px以上かつ600px以下のデバイスにのみスタイルが適用されます。
範囲指定構文
さらに、範囲指定構文を用いることで、より簡潔に記述することができます。
@media screen (400px:600px) {
/* スタイル */
}
このコードは、上記のコードと同じ意味を持ちます。コロン(:)で区切られた2つの値は、それぞれ最小幅と最大幅を表します。
注意点
- メディアクエリレベル4は、すべてのブラウザで完全にサポートされているわけではありません。古いブラウザでは、従来の構文を使用する必要がある場合があります。
- 複数のメディアクエリを組み合わせることで、より複雑な条件を設定することができます。
上記以外にも、CSSメディアクエリには様々な機能があります。詳細は、以下のリファレンスを参照してください。
サンプルコード：メディアクエリで2つの幅の間を指定
例1：スマートフォン向けレイアウト（幅320px～600px）
この例では、スマートフォンサイズのデバイス（幅320px～600px）にのみ、以下のレイアウトを適用します。
/* 通常のスタイル */
@media screen (320px:600px) {
body {
font-size: 14px; /* フォントサイズを小さくする */
}
.container {
width: 90%; /* コンテナ幅を90%にする */
margin: 0 auto; /* 中央揃えにする */
}
.image {
width: 100%; /* 画像をフル幅にする */
}
}
例2：タブレット向けレイアウト（幅601px～960px）
/* 通常のスタイル */
@media screen (601px:960px) {
body {
font-size: 16px; /* フォントサイズを中程度にする */
}
.container {
width: 70%; /* コンテナ幅を70%にする */
margin: 20px auto; /* 中央揃えにする */
}
.image {
width: 80%; /* 画像幅を80%にする */
}
}
例3：PC向けレイアウト（幅961px以上）
/* 通常のスタイル */
@media screen (min-width: 961px) {
body {
font-size: 18px; /* フォントサイズを大きくする */
}
.container {
width: 50%; /* コンテナ幅を50%にする */
margin: 50px auto; /* 中央揃えにする */
}
.image {
width: 50%; /* 画像幅を50%にする */
}
}
上記例のポイント
- 各メディアクエリ内では、対象デバイスにのみ適用したいスタイルを記述します。
- メディアクエリの記述順序は任意ですが、一般的には小さい画面サイズから大きい画面サイズの順に記述するのが一般的です。
応用例
- スマートフォン、タブレット、PCそれぞれに最適なレイアウトを提供するレスポンシブWebデザイン
- 特定の解像度を持つデバイスのみでコンテンツを表示する
- ユーザーのプリンター設定に応じて印刷スタイルを変更する
上記はあくまで一例であり、メディアクエリで2つの幅の間を指定する方法は他にも様々な方法があります。詳細は、CSSの仕様やドキュメントを参照してください。
CSSメディアクエリで2つの幅の間を指定するその他の方法
and演算子とメディアクエリを複数組み合わせる
前述したように、and演算子とメディアクエリを複数組み合わせることで、2つの幅の間を指定することができます。この方法は、比較的シンプルで分かりやすいのが利点です。
@media screen and (min-width: 400px) and (max-width: 600px) {
/* スタイル */
}
しかし、メディアクエリを複数記述する必要があるため、コードが冗長になってしまうという欠点もあります。
calc()関数を使用して、幅の計算式を記述することで、2つの幅の間を指定することができます。この方法は、より柔軟な幅の指定が可能ですが、やや複雑になるという欠点があります。
@media screen and (width: 400px + 1px) and (width: 600px - 1px) {
/* スタイル */
}
この例では、width: 400px + 1pxは400pxより大きい値を、width: 600px - 1pxは600pxより小さい値を表します。つまり、このメディアクエリは、幅が401pxから599pxまでのデバイスにのみ適用されます。
メディアクエリのネガティブブール演算子を使用して、除外条件を指定することで、2つの幅の間を指定することができます。この方法は、比較的新しい方法で、対応ブラウザが限られているという欠点があります。
@media not screen (max-width: 400px) and not screen (min-width: 600px) {
/* スタイル */
}
この例では、not screen (max-width: 400px)は幅が400px以下のデバイスを除外条件として指定し、not screen (min-width: 600px)は幅が600px以上のデバイスを除外条件として指定します。つまり、このメディアクエリは、幅が401pxから599pxまでのデバイスにのみ適用されます。
メディアクエリモジュールを使用する
CSS Modulesを使用すると、コンポーネントごとに固有のメディアクエリを定義できます。この方法は、コンポーネントのスタイルをカプセル化し、メンテナンス性を向上させることができるという利点があります。
/* style.module.css */
.container {
/* 通常のスタイル */
}
@media screen (400px:600px) {
.container {
width: 90%;
margin: 0 auto;
}
}
この例では、.containerコンポーネントに、幅が401pxから599pxまでのデバイスにのみ適用されるスタイルを定義しています。
最適な方法の選び方
- 柔軟な幅の指定が必要:
calc()関数を使用する - 新しい方法を試してみたい: メディアクエリのネガティブブール演算子を使用する
- コンポーネントのスタイルをカプセル化したい: メディアクエリモジュールを使用する
- メディアクエリを使用する際には、パフォーマンスへの影響も考慮する必要があります。
- 複雑なメディアクエリは、メンテナンスが難しくなるため、できるだけ避けるようにしましょう。
css media-queries
