CSSメディアクエリ自動生成ジェネレーター

レスポンシブコーディングで毎回忘れるCSSの @media の書き方を一発で生成します。
重複による表示バグを防ぐため、スマホ用（max-width）のピクセル数は自動的に「-1px」されて安全に出力されます。

1. ブレイクポイント（切り替え幅）の設定

PCとスマホの表示が切り替わる境界線のピクセル数を入力してください。（一般的には 768 が標準です）

SCSS環境を利用している場合、こちらを定義しておくと便利です。

CSSの display: none; で表示を隠す手法は手軽ですが、裏側では画像や不要なHTML要素も読み込まれているため、ページの表示速度（PageSpeed Insights）が落ちる原因になります。

💡 WordPressならPHPで「HTML自体を出力しない」のが正解！
スマホの時だけ（iPadなどは除外して）不要なブロックを完全に読み込ませないようにするには、当サイトの 👉 WPスマホ厳密判定(PHP) スニペット をご利用ください！