CSSメディアクエリジェネレーター
ブレークポイントプリセット（またはカスタム幅）と条件タイプからCSS @mediaクエリブロックを生成します。CSSルールを貼り付け可能なレスポンシブブロックで囲みます。
入力
@mediaブロックで囲みたいCSSルールを貼り付けます。プレースホルダーコメントのままにしておくと、空の@mediaシェルが生成されます。
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-media-query-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"breakpointPreset": "tablet",
"customWidth": "320",
"conditionType": "min-width",
"cssContent": "color: red;"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-media-query-generator` tool (CSS Media Query Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-media-query-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSメディアクエリジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
機能
CSSメディアクエリジェネレーターは、ブレークポイント幅と条件タイプから貼り付け可能な@media (...) { }ブロックを作成します。一般的なデバイスプリセットを選択する（またはカスタムピクセル幅を設定）、その幅の上か下に適用するかを選択する、または向きチェックに切り替える、囲みたいCSSルールを貼り付けます。オプションを変更すると、ツールは出力をリアルタイムで更新します。
CSSメディアクエリとは
メディアクエリは、ビューポート幅、高さ、向きなどの特性に応じて、スタイルシートが異なるルールを適用できるようにします。基本的な形式は次のとおりです。
@media (min-width: 768px) {
/* 768px以上のみで適用されるルール */
}メディアクエリはレスポンシブデザインの基礎です。固定レイアウト1つを配信する代わりに、基本レイアウトを書き、ビューポートがブレークポイントを超える特定のプロパティを上書きします。
一般的なブレークポイント
単一の公式ブレークポイントスケールはありません。異なるフレームワーク（Bootstrap、Tailwind、Material Design）が独自に定義していますが、広く使用される一般的なスケールは次のようなものです。
- モバイル — 480px（小型スマートフォン以上）
- タブレット — 768px（タブレットと小型ノートパソコン）
- ラップトップ — 1024px（ノートパソコンと小型デスクトップモニター）
- デスクトップ — 1280px（標準デスクトップモニター以上）
プロジェクトが異なるスケールを使用している場合は「カスタム」を選択してください。
使用方法
- ブレークポイントプリセット（モバイル、タブレット、ラップトップ、デスクトップ）を選択するか、カスタムを選択して独自のピクセル幅を入力します。
- 条件タイプを選択します。
- 最小幅 — モバイルファースト、ブレークポイント以上で適用されます。
- 最大幅 — デスクトップファースト、ブレークポイント以下で適用されます。
- 向き：縦向き/横向き — ビューポート幅ではなく、向きに基づいて適用されます（ブレークポイントは無視されます）。
- 囲みたいCSSルールを囲むCSSに貼り付けます。空の
@mediaシェルが必要な場合は、プレースホルダーコメントのままにしておきます。 - 出力から生成されたブロックをコピーまたはダウンロードし、スタイルシートに貼り付けます。
FAQ
最小幅と最大幅の違いは何ですか？
min-widthは「モバイルファースト」です。小型スクリーン用にベーススタイルを書き、画面がブレークポイントの幅に達すると開始するオーバーライドを追加します。max-widthは「デスクトップファースト」です。オーバーライドは画面がブレークポイントの幅に達するまで適用されます。これはモバイルファーストが一般的になる前のより伝統的なアプローチです。
範囲用にmin-widthとmax-widthを組み合わせることはできますか？
このツールは一度に1つの条件を生成します。範囲（例「768pxから1023pxの間だけ」）の場合は、1023pxでmax-widthバージョンを生成し、768pxでmin-widthバージョンを生成し、andを使用して手動で組み合わせます。
@media (min-width: 768px) and (max-width: 1023px) { ... }
向きを選択すると、ブレークポイントフィールドが何もしないのはなぜですか？ 向きクエリはビューポート幅ではなくアスペクト比に応答するため、ブレークポイント値は生成される条件の一部ではありません。縦向き/横向きの選択だけが重要です。
このツールは何かを保存またはアップロードしますか？ いいえ。すべてはブラウザでローカルに実行されます。貼り付けたCSSがデバイスを離れることはありません。