幅・高さ・向きのクエリ
メディア機能を使って、特定のビューポートサイズやデバイスの向きを対象にします。
「幅・高さ・向きのクエリ」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
widthメディア特性
width特性は、ビューポートの幅を対象にします。min-widthとmax-widthを使って範囲を定義します。
<div class="box">width feature demo</div>
heightメディア特性
height特性は、ビューポートの高さを対象にします。縦方向の空間が限られる、横向きのスマートフォンなど、短いビューポートに便利です。
<div class="hero">Hero (grows on tall viewports)</div>
短いビューポートのパターン
短いビューポートを検出し、コンテンツがはみ出す原因となるパディングや高さを減らします：
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation：portraitとlandscape
orientation特性は、ビューポートがもう一方の方向よりも高い（portrait）か、幅広い（landscape）かを検出します。
<div class="hero">Orientation-aware hero</div>
デバイスピクセル比
高DPI（Retina）画面を対象にするには、resolution特性、または標準外ですが広くサポートされている-webkit-device-pixel-ratioを使用します。
<div class="logo"></div>
aspect-ratio特性
特定のビューポートのアスペクト比を対象にします。4:3と16:9のビューポートでコンテンツの中央揃えを変える場合などに便利です。
<div class="video"></div>
hover機能
hover: hover特性は、主入力がホバー可能な精密ポインターかどうかを検出します。タッチデバイス専用のスタイルを適用する場合に便利です。
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
pointer特性
pointer: fineは精密なマウスカーソルを、pointer: coarseは指やスタイラスを表します。タップ対象のサイズを調整する場合に便利です。
<button>Tap target</button>
widthとheightの組み合わせ
min-widthとmax-heightを組み合わせて、横向きのスマートフォン専用のルールを作成します：
<div class="nav">Nav bar</div>
ビューポートとデバイスの寸法
CSSメディアクエリが対象にするのは、物理的なデバイス画面の寸法ではなく、ブラウザウィンドウであるビューポートです。デスクトップのブラウザウィンドウのサイズを変更すると、ビューポートの幅もリアルタイムで変化します。
ビューポート単位とメディアクエリ
メディアクエリとビューポート単位（vw、vh）は、同じビューポートの寸法に反応します。レイアウトの変更にはメディアクエリを、レイアウト内の可変サイズ指定にはビューポート単位を使用してください。
クイックチェック
デバイスに、要素上でホバーできる精密なポインターがあるかどうかを検出するメディア特性はどれですか？
まとめ
メディア特性には、width、height、orientation、resolution、hover、pointerがあります。これらを使って、ビューポートの寸法やデバイスの機能に合わせてレイアウトを調整します。hoverとpointerの特性を使うと、画面サイズだけでなく、タッチデバイスとマウスデバイスを区別して対象にできます。
よくある質問
「幅・高さ・向きのクエリ」レッスンは無料ですか？
はい。「幅・高さ・向きのクエリ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「幅・高さ・向きのクエリ」で何を学びますか？
メディア機能を使って、特定のビューポートサイズやデバイスの向きを対象にします。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「幅・高さ・向きのクエリ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。