複数のメディアクエリの結合
and、or、not演算子を使ってメディア機能を組み合わせ、複雑なクエリを作成します。
「複数のメディアクエリの結合」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
and演算子
andキーワードは、すべての条件が同時に真であることを要求します。特定のデバイスサイズと種類を組み合わせて対象にする場合に便利です。
<div class="box">and operator demo</div>
andを使った範囲
min-width と max-width を and で組み合わせると、特定のビューポート幅の範囲（タブレット専用のスタイル）を対象にできます：
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
ORとして機能するカンマ
カンマで区切ったクエリは OR のように機能し、いずれかのクエリに一致すればスタイルが適用されます：
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
<code>not</code> 演算子
not はメディアクエリ全体を否定します。最初の条件だけでなくクエリ式全体に適用されるため、慎重に使用する必要があります。
<div class="doc">not operator demo</div>
括弧付きの <code>not</code>（モダン）
モダンな Level 4 メディアクエリでは、個々のメディア特性に対する関数として not() を使用できます：
<div class="panel">not() function demo</div>
<code>only</code> キーワード（レガシー）
only キーワードは、メディア特性に対応していないレガシーブラウザーからメディアクエリを隠すために使用されていました。モダンブラウザーでは無視されますが、害はありません。
<div class="box">only keyword demo</div>
メディアクエリのネスト（CSS Nesting）
ネイティブ CSS ネストを使うと、セレクターブロックの中にメディアクエリを記述できます：
<div class="card">Nested media query demo</div>
モバイル＋高DPIの組み合わせ
モバイルデバイス（小型かつ高DPI）のみを対象にします：
<div class="icon"></div>
印刷＋カラー
カラープリンターにのみ適用する、印刷用スタイルの複数のメディア特性：
<div class="chart">Chart (color reverts when printing on a color printer)</div>
@import 内のメディアクエリ
メディアクエリをインポート時に適用して、スタイルシート全体を条件付きで読み込むこともできます（ただし、レンダリングをブロックするため、使用は必要最小限にしてください）：
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
複雑なクエリにおける論理プロパティ
一般的には、単純なクエリのほうが保守しやすくなります。条件を多くつなげすぎないようにしてください。クエリが複雑になった場合は、クエリ自体ではなく CSS の構成方法を見直すことを検討してください。
確認問題
ビューポートの幅が 600px 以上、またはデバイスが横向きの場合にスタイルを適用するメディアクエリはどれですか？
まとめ
and はすべての条件が真であることを要求します。クエリ間ではカンマが OR として機能します。not はクエリ全体を否定します。範囲を対象にするには min-width と max-width を組み合わせます。モダン CSS では、セレクターブロック内でのメディアクエリのネストや、より簡潔な式を記述できる範囲構文がサポートされています。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「複数のメディアクエリの結合」レッスンは無料ですか？
はい。「複数のメディアクエリの結合」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「複数のメディアクエリの結合」で何を学びますか？
and、or、not演算子を使ってメディア機能を組み合わせ、複雑なクエリを作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「複数のメディアクエリの結合」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。