💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
CSSでレスポンシブにする方法｜メディアクエリ
📌
結論
@media でレスポンシブデザインが作れます
📝 実際のコードはこちら
@media (min-width: 768px) {
.container { grid-template-columns: 1fr 1fr; }
}モバイルファースト
デフォルトでスマホ用（1列）にし、min-width で大画面用を追加するのが現代のベストプラクティスです。
| ブレイクポイント | 対象 |
|---|---|
| デフォルト | スマホ |
| 768px〜 | タブレット |
| 1024px〜 | PC |
まとめ
・@media (min-width: ○px) で画面幅に応じてスタイルを変える
・モバイルファーストが主流
演習で試してみよう
768px以上で2列になるレスポンシブレイアウトを作ってみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
768px以上で2列、未満で1列になるようにしてください。
詰まったらヒント
@media (min-width: 768px) で grid-template-columns を変更