CSSメディアクエリをビジュアルで作成できます。デバイスプリセットを選ぶかブレイクポイントを入力して、向き・ダークモード・アニメーション削減などの機能を追加し、生成された @media コードをそのままスタイルシートに貼り付けてください。

アプローチ選択

デバイスプリセット

幅 & 高さ

px
px
px
px

メディア機能

ライブ ビューポートマッチ

ビューポート: — × — まだクエリが生成されていません

生成された CSS

/* ここに @media クエリが表示されます */

クイックリファレンス — よく使うブレイクポイント

名前フレームワークブレイクポイント対象デバイス
xsBootstrap< 576px小型スマートフォン
smBootstrap≥ 576pxスマートフォン横向き
mdBootstrap≥ 768pxタブレット縦向き
lgBootstrap≥ 992pxタブレット横向き・小型ノートPC
xlBootstrap≥ 1200pxデスクトップ HD
xxlBootstrap≥ 1400pxワイドデスクトップ
smTailwind≥ 640pxスマートフォン横向き
mdTailwind≥ 768pxタブレット
lgTailwind≥ 1024pxノートPC・大型タブレット
xlTailwind≥ 1280pxデスクトップ
2xlTailwind≥ 1536pxワイド・4K
モバイルカスタム< 768pxスマートフォン全般
タブレットカスタム768px–1199pxタブレット全向き
デスクトップカスタム≥ 1200pxノートPC・デスクトップ
4Kカスタム≥ 2560pxウルトラワイド・4Kディスプレイ

関連ツール

□ CSS Flexboxジェネレーター ▣ CSSグリッドジェネレーター 📺 画面解像度チェッカー

フリーランス・個人事業主の方へ

レスポンシブデザインの制作費を確定申告でしっかり経費処理。
freee会計なら銀行・クレカを自動取得してラクに帳簿が完成します。

freeeを無料で試す

使い方

  1. アプローチを選択 — モバイルファーストは min-width で小さい画面から拡張、デスクトップファーストは max-width で大きい画面から縮小します。
  2. デバイスプリセットを選ぶか、最小・最大の幅・高さを手動入力します。
  3. メディア機能をトグル — 向き・ダークモード・モーション削減・印刷を追加できます。
  4. **「@media クエリを生成する」**をクリックすると CSS コードとライブマッチ状況が表示されます。
  5. **「CSSをコピー」**でクリップボードにコピーしてスタイルシートへ貼り付けます。

モバイルファースト vs デスクトップファースト

モバイルファーストデスクトップファースト
ベーススタイルの対象最小画面最大画面
クエリタイプmin-widthmax-width
プログレッシブエンハンスメント対応非対応
フレームワーク対応Tailwind、Bootstrap 4+旧来のフレームワーク

ベストプラクティス: モバイルファーストが現代の標準です。詳細度の衝突を減らし、ベーススタイルをシンプルに保てます。

prefers-color-scheme の活用

/* OSがダークモードのときだけダークスタイルを適用 */
@media screen and (prefers-color-scheme: dark) {
body {
background: #0f172a;
color: #e2e8f0;
}
}

CSS カスタムプロパティ（変数）と組み合わせると、宣言の重複を避けられます。

prefers-reduced-motion — アクセシビリティ

前庭障害やモーション感受性のあるユーザーは OS レベルでアニメーション削減を設定できます。必ず対応しましょう:

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}

関連ツール