CSSアニメーションとレスポンシブ対応の基本

CSSアニメーション・レスポンシブとは｜このカテゴリで分かること

CSSアニメーションとレスポンシブ対応は、見た目に動きを与える技術と、画面サイズや閲覧環境に合わせて表示を切り替える技術です。このカテゴリでは、CSS transition、@keyframes と animation、メディアクエリ、clamp()、コンテナクエリ、ダークモード対応の6本を扱います。hover で滑らかに変化させたい、スマホ表示をきちんと作りたいといった、CSSの基礎を終えた初心者から中級のコーダーが次に学ぶ内容です。

2つは別のテーマに見えますが、どちらも「状況によってスタイルを変える」という共通点があります。状態が変わる（hover や表示）なら transition や animation、環境が変わる（画面幅・親要素の幅・配色設定）ならメディアクエリ系の機能、と整理すると、どの記事を読めばよいか迷いません。

読む順番（おすすめの順路）

CSS transitionとは｜hoverで滑らかに変化させる書き方 … 最も手軽に動きを付けられる方法です。hover の変化から始めます。
CSS @keyframesとanimationの使い方｜フェードイン・回転の作り方 … 状態変化では足りない、繰り返しや多段階の動きを扱います。
CSSメディアクエリの書き方｜ブレークポイントとモバイルファースト … レスポンシブの基本です。モバイルファーストの考え方を押さえます。
CSS clamp()の使い方｜流体タイポグラフィと可変の余白 … 段階的な切り替えではなく、滑らかに変化させる文字サイズや余白を作ります。
CSSコンテナクエリの使い方｜親要素の幅で切り替えるレスポンシブ … 画面幅ではなく親要素の幅で切り替える、部品向けの手法です。
CSSダークモード対応のやり方｜prefers-color-schemeとlight-dark() … 閲覧者の設定に合わせた配色の切り替えです。

レスポンシブ対応の前提として、HTML側の meta viewport とは｜width=device-width と user-scalable の注意点と picture と srcset の使い方｜sizes・レスポンシブ画像の書き方も併せて読むと、画像まで含めた対応ができます。

押さえておきたいポイント（リサーチ）

MDN の解説で確認できる要点です。

メディアクエリーは、画面の幅だけでなく、ユーザー設定にも対応できます。たとえば prefers-color-scheme（配色）や prefers-reduced-motion（動きの軽減）、hover や pointer（入力デバイスの特性）を条件にできます。
幅の条件は、従来の max-width のほか、範囲構文（例: width <= 1250px）でも書けます。
コンテナクエリは、コンテナーにする要素（多くは部品の親要素）に container-type: inline-size を指定し、@container で条件を書きます。ビューポートではなくコンテナーのサイズに基づくため、同じ部品を幅の違う場所で再利用しやすくなります。
コンテナ基準の単位として cqw・cqi などがあります。
動きを抑えたい人向けに、prefers-reduced-motion: reduce で animation や transition を弱める書き方が示されています。

対応ブラウザや新しい構文は更新されます。導入前に最新の状況を公式で確認してください。

よくある疑問

Q. transition と animation はどう使い分けますか。
A. 開始と終了の2状態を滑らかにつなぐなら transition、途中の段階や繰り返しがあるなら animation です。詳細は CSS transitionとは｜hoverで滑らかに変化させる書き方と CSS @keyframesとanimationの使い方｜フェードイン・回転の作り方を参照してください。

Q. ブレークポイントは何pxにすればよいですか。
A. 端末の機種で決めず、内容が崩れる幅で決める考え方が一般的です。CSSメディアクエリの書き方｜ブレークポイントとモバイルファーストで解説しています。

Q. メディアクエリとコンテナクエリのどちらを使いますか。
A. ページ全体の構造はメディアクエリ、再利用する部品はコンテナクエリが目安です。CSSコンテナクエリの使い方｜親要素の幅で切り替えるレスポンシブを見てください。

Q. ダークモードは必須ですか。
A. 必須ではありませんが、対応するならOS設定に追従できます。方法は CSSダークモード対応のやり方｜prefers-color-schemeとlight-dark() にあります。

編集部の見解

動きとレスポンシブは、どちらも「足しすぎない」ことが重要だと考えます。アニメーションは、意味のある変化（押せる、開いた、読み込み中）だけに使い、prefers-reduced-motion への配慮も含めて設計するのが望ましいでしょう。レスポンシブも、ブレークポイントを増やすより、clamp() や Grid の自動折り返しで滑らかに対応できる部分を増やした方が、コードが少なく保守しやすくなると思います。コンテナクエリは、まだ使い慣れていない人も多いと思いますが、部品単位でCSSを管理する現場では確実に効果があります。まずは1つのカード部品で試すのがおすすめです。