画面サイズ、デバイスタイプ、印刷状況などの条件に基づいてスタイルを適用するルールです。レスポンシブデザインの基礎となる機能で、モバイル、タブレット、デスクトップなど様々なデバイスに対応できます。
@media <media-query> { ... }バリアント sm: / md: / lg: / xl: を先頭に付けて使います
| md:grid-cols-2 | @media (min-width: 48rem) { grid-template-columns: repeat(2, ...) } |
モバイルファースト（min-width基準）。上限側は max-md:、任意幅は min-[420px]:。
@media (max-width: 768px) {
.container {
padding: 1rem;
font-size: 14px;
}
}モバイル（768px以下）でのレイアウト調整
@media (min-width: 769px) and (max-width: 1024px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}タブレット（769px〜1024px）で2列グリッド
@media (min-width: 1025px) {
.sidebar {
display: block;
}
.main {
margin-left: 250px;
}
}デスクトップ（1025px以上）でサイドバー表示
@media (orientation: portrait) {
.hero {
height: 50vh;
}
}
@media (orientation: landscape) {
.hero {
height: 100vh;
}
}デバイスの向き（縦・横）に応じた高さ調整
@media print {
.no-print {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}印刷時のスタイル調整
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #ffffff;
}
}ダークモード対応
モバイルファーストで設計し、小さい画面から大きい画面へとスタイルを追加していくのが一般的。breakpointは320px, 768px, 1024px, 1200pxなどがよく使われる。
max-widthとmin-widthの使い分けを間違えると意図しない結果になる。重複する条件で後から書いたルールが優先される。
AIは古いmin-width/max-width記法だけで書きがちですが、現在は範囲構文（@media (768px <= width < 1024px)）が全ブラウザで使え、境界の重複ミス（max-width: 767pxのような-1px調整）を根本から解消できます。また画面幅以外（hover: hover、prefers-*系）のクエリを組み合わせる発想もAIからは出にくいので明示すると良いです。
このmin-width/max-widthだらけのメディアクエリを新しい範囲構文に書き換えて、境界のバグがないか確認して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。