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

アプローチ選択

デバイスプリセット

幅 & 高さ

px
px
px
px

メディア機能

<label class="mq-feature-chip" id="mqChipScreen" onclick="mqToggleChip('mqChipScreen','mqFeatScreen')">
  <span class="mq-feature-dot"></span>
  <input type="checkbox" id="mqFeatScreen">
  screen（画面）
</label>

<label class="mq-feature-chip" id="mqChipPrint" onclick="mqToggleChip('mqChipPrint','mqFeatPrint')">
  <span class="mq-feature-dot"></span>
  <input type="checkbox" id="mqFeatPrint">
  print（印刷）
</label>

<label class="mq-feature-chip" id="mqChipOrient" onclick="mqToggleChip('mqChipOrient','mqFeatOrient')">
  <span class="mq-feature-dot"></span>
  <input type="checkbox" id="mqFeatOrient">
  向き (orientation):
  <select class="mq-chip-select" id="mqOrientVal" onclick="event.stopPropagation()">
    <option value="portrait">縦 (portrait)</option>
    <option value="landscape">横 (landscape)</option>
  </select>
</label>

<label class="mq-feature-chip" id="mqChipColor" onclick="mqToggleChip('mqChipColor','mqFeatColor')">
  <span class="mq-feature-dot"></span>
  <input type="checkbox" id="mqFeatColor">
  カラースキーム:
  <select class="mq-chip-select" id="mqColorVal" onclick="event.stopPropagation()">
    <option value="dark">ダーク (dark)</option>
    <option value="light">ライト (light)</option>
  </select>
</label>

<label class="mq-feature-chip" id="mqChipMotion" onclick="mqToggleChip('mqChipMotion','mqFeatMotion')">
  <span class="mq-feature-dot"></span>
  <input type="checkbox" id="mqFeatMotion">
  モーション削減:
  <select class="mq-chip-select" id="mqMotionVal" onclick="event.stopPropagation()">
    <option value="reduce">reduce</option>
    <option value="no-preference">no-preference</option>
  </select>
</label>

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

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

生成された 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;
  }
}

関連ツール