構文と一般的なブレークポイント
メディアクエリの構文と、現代のWebデザインで使われる標準的なブレークポイントを学びます。
「構文と一般的なブレークポイント」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
メディアクエリの構文
メディアクエリはCSSルールを囲み、条件が真の場合にのみ適用します。基本的な構文は次のとおりです：
<div class="box">Media query syntax demo</div>
メディアタイプ
主なメディアタイプは次のとおりです：
all— すべての出力デバイスに適用（デフォルト）screen— コンピューターやスマートフォンの画面print— 印刷プレビューと印刷用speech— スクリーンリーダー用
<div class="layout">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
メディア特性
メディア特性は、デバイスやビューポートの特徴を表します。よく使われる特性には、width、height、orientation、resolution、prefers-color-scheme、hoverがあります。
min-widthクエリ
最もよく使われる特性で、幅がしきい値以上の画面を対象にします。モバイルファーストのアプローチです。
<div class="box">Breakpoint ladder</div>
一般的なブレークポイント
すべてのケースに適した、普遍的に正しいブレークポイントはありません。一般的なデバイス幅に基づく、よく使われる設定は次のとおりです：
- 480px — 大型スマートフォン
- 768px — タブレット
- 1024px — 小型デスクトップ、横向きのタブレット
- 1280px — 標準的なデスクトップ
- 1536px — 大型デスクトップ
コンテンツベースのブレークポイント
デバイスごとにブレークポイントを設定するのではなく、現代的な方法では、コンテンツが崩れる位置にブレークポイントを設定します。1つのサイズでデザインし、サイズを変更しながら、レイアウトが崩れ始めた時点でブレークポイントを追加します。
範囲構文（最新）
最新のCSSでは、メディアクエリ内で範囲構文を使用できます。minとmaxを組み合わせるよりも読みやすくなります：
<div class="panel">Range syntax demo</div>
andによる組み合わせ
andを使うと、複数の条件を同時に満たすことを要求できます：
<div class="sidebar">Sidebar</div>
notによる否定
notを使うと、メディアクエリを否定できます。クエリに一致しないすべての対象に適用されます：
<div class="doc">Not-screen demo (affects print/speech only)</div>
カンマによる複数のクエリ
セレクターリストと同じように、複数のクエリをカンマで区切ります。いずれかのクエリに一致すれば、スタイルが適用されます。
<div class="page">
Multiple queries with comma
<div class="nav-drawer">Nav drawer (hidden on wide screens or print)</div>
</div>
emベースのブレークポイント
ブレークポイントにpxではなくem単位を使うと、ユーザーのブラウザのフォントサイズ設定に合わせて拡大縮小され、アクセシビリティが向上します。
<div class="box">Em-based breakpoints</div>
クイックチェック
幅が少なくとも1024pxある画面に一致するメディアクエリはどれですか？
まとめ
メディアクエリは、デバイスやビューポートの特徴に基づいて、条件付きでCSSを適用します。モバイルファーストにはmin-width、デスクトップファーストにはmax-widthを使用してください。任意のデバイスサイズではなく、コンテンツに応じてブレークポイントを設定します。最新の範囲構文を使うと、コードが読みやすくなります。
よくある質問
「構文と一般的なブレークポイント」レッスンは無料ですか？
はい。「構文と一般的なブレークポイント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「構文と一般的なブレークポイント」で何を学びますか？
メディアクエリの構文と、現代のWebデザインで使われる標準的なブレークポイントを学びます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「構文と一般的なブレークポイント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。