メディアクエリとモバイルファースト開発
min-widthメディアクエリでブレークポイントを記述し、モバイル向けレイアウトから構築して、大きな画面へ段階的に拡張します。
「メディアクエリとモバイルファースト開発」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
メディアクエリとは
メディアクエリは、viewport幅がしきい値を超えている場合など、特定の条件が成立したときだけCSSルールを適用します。1つのスタイルシートをあらゆる画面サイズに対応させる、レスポンシブデザインの基盤です。
基本構文
メディアクエリは、CSSのブロックを@mediaルールで囲みます。内部のルールは、条件が一致した場合にのみ適用されます。
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-widthとmax-width
min-width：viewportが指定した幅以上の場合にスタイルを適用します（モバイルファースト）。max-width：viewportが指定した幅以下の場合にスタイルを適用します（デスクトップファースト）。モバイルファースト開発ではmin-widthを優先してください。
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }モバイルファーストのアプローチ
まず小さな画面向けのCSSをメディアクエリの外側に記述します。次に、min-widthのメディアクエリを使って、大きな画面向けに段階的に機能を追加します。これにより、モバイルユーザー向けのCSSが小さくなり、コード全体も整理されます。
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}一般的なブレークポイント
ブレークポイントは特定のデバイスではなく、コンテンツに基づいて選択してください。開始点としてよく使われる値は、480px（大型スマートフォン）、768px（タブレット）、1024px（小型デスクトップ）、1280px（大型デスクトップ）です。特定のデバイスモデルを対象とするブレークポイントは避けてください。
メディアタイプ
画面幅だけでなく、メディアタイプも対象にできます。ディスプレイにはscreen、プリンターにはprintを指定します。印刷用メディアクエリを使うと、ページを印刷したときの表示をカスタマイズできます（ナビゲーションを非表示にする、色を調整するなど）。
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}and による条件の組み合わせ
andで条件を連結すると、両方の条件が真の場合にだけスタイルを適用できます。より複雑な論理にはnotとorを使います。
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}prefers-color-scheme
ユーザーのOSにおけるダークモードの設定に応じて表示を切り替えます。デフォルトで切り替えボタンを用意しなくても、ダークテーマを提供できます。
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
動きを少なくしたいユーザー（前庭機能障害やてんかんのあるユーザーなど）に配慮できます。このメディアクエリの中でアニメーションを無効にするか、簡略化します。
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}コンテナクエリ — これからの技術
コンテナクエリ（@container）は、ビューポートではなく親コンテナのサイズに基づいてスタイルを適用します。これにより、真にコンポーネント単位でレスポンシブ対応できるようになり、2023年以降はすべての主要な最新ブラウザーで利用できます。
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}RTL対応のための論理プロパティ
左から右、右から左のどちらの言語でも機能するレイアウトには、margin-leftの代わりにmargin-inline-startのような論理プロパティを使います。将来にも対応できるレスポンシブレイアウトを構築できます。
確認問題
mobile-firstのCSS戦略を正しく定義しているアプローチはどれですか。
まとめ：メディアクエリとモバイルファースト
モバイルファーストの段階的な機能強化には@media (min-width: N)を使います。クエリなしでモバイル向けの基本スタイルを記述し、画面が大きくなったら複雑なスタイルを追加します。ダークモードにはprefers-color-scheme、アクセシビリティにはprefers-reduced-motion、コンポーネント単位のレスポンシブ対応にはコンテナクエリを使います。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「メディアクエリとモバイルファースト開発」レッスンは無料ですか？
はい。「メディアクエリとモバイルファースト開発」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「メディアクエリとモバイルファースト開発」で何を学びますか？
min-widthメディアクエリでブレークポイントを記述し、モバイル向けレイアウトから構築して、大きな画面へ段階的に拡張します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「メディアクエリとモバイルファースト開発」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- viewportメタタグ
- レイアウトのためのFlexbox
- レイアウトのためのCSS Grid
- メディアクエリとモバイルファースト開発