対応しているブラウザは？

Chrome、Safari、Firefox、Edgeなど主要モダンブラウザの最新版で動作確認しています。Internet Explorerや極端に古いバージョンは対象外です。

入力したデータはサーバーに送信されますか？

いいえ。CSSメディアクエリ集はすべての処理をお使いのブラウザ内で完結させます。入力内容がサーバーに送信されたり保存されたりすることはありません。

デザイン・CSS無料登録不要

CSSメディアクエリ集

レスポンシブデザインに使う主要なCSSメディアクエリのテンプレート集。コピペで使える無料オンラインツール。

入力

結果

/* --- モバイルファースト --- */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1536px) { /* 2xl */ }

/* --- デスクトップファースト --- */
@media (max-width: 1535px) { /* <2xl */ }
@media (max-width: 1279px) { /* <xl */ }
@media (max-width: 1023px) { /* <lg */ }
@media (max-width: 767px) { /* <md */ }
@media (max-width: 639px) { /* <sm */ }

/* --- デバイス指定 --- */
@media (orientation: portrait) { /* 縦向き */ }
@media (orientation: landscape) { /* 横向き */ }
@media (prefers-color-scheme: dark) { /* ダーク */ }
@media (prefers-reduced-motion: reduce) { /* アニメ抑制 */ }
@media print { /* 印刷用 */ }

FAQ

よくある質問

CSSメディアクエリ集の出力はChrome、Safari、Firefox、Edgeの最新版で動作します。古いブラウザ対応が必要な場合はCaniuse.comで各プロパティの対応状況を確認してください。

こちらもおすすめ

CSSコンテナクエリ

CSSのcontainer queriesの書き方とユースケースを解説する無料オンラインツール。

CSSメディア特性

CSSメディア特性を表示する無料オンラインツール。CSSメディア特性をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

CSS角度単位

CSS角度単位を表示する無料オンラインツール。CSS角度単位をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

animation-direction

animation-directionを表示する無料オンラインツール。animation-directionをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...