カテゴリー: 開発ツール
レスポンシブブレークポイント早見表
フレームワーク間でブレークポイントを比較、または独自に作成
Tailwind、Bootstrap、Bulma、Material Designが既定で使用するmin-widthブレークポイントを並べて比較し、そのいずれかについてすぐ使えるメディアクエリをコピーできます。また、独自のブレークポイント名と幅を入力してカスタムのクエリを生成することもできます。
| 名前 | 最小幅（min-width） |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
メディアクエリ
@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 */
}1行につき名前とピクセル幅を入力してください。例：「md, 768」
| 名前 | 最小幅（min-width） |
|---|---|
| sm | 480px |
| md | 768px |
| lg | 1100px |
| xl | 1440px |
メディアクエリ
@media (min-width: 480px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1100px) {
/* lg */
}
@media (min-width: 1440px) {
/* xl */
}このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
CSSフレームワークはそれぞれ独自のブレークポイント名とピクセル幅を採用しているため、プロジェクトを切り替えるたびにどれがどこに当てはまるのか混同しがちです。このツールは4つの主要フレームワークの既定値を並べて一覧表示し、そのいずれか、あるいは自分で入力したカスタムの一覧を、そのまま貼り付けられる@media (min-width: …)のブロックに変換します。
使い方
- フレームワークを選んで、その既定のブレークポイントとメディアクエリを確認します。
- 必要なブレークポイントの生成されたCSSをコピーします。
- または、独自のブレークポイント名と幅を入力してカスタムクエリを作成します。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- なぜmax-widthではなくmin-widthを使うのですか。
- min-widthによるモバイルファーストのアプローチでは、基本のスタイルが最も小さい画面を対象とし、各ブレークポイントで大きい画面向けのスタイルを追加していくため、フレームワーク自身のブレークポイントのようにルールを何度も上書きし合う必要がありません。
- これらはフレームワークの既定値と正確に一致しますか。
- はい、それぞれのフレームワークが公式に文書化している既定のブレークポイントです。プロジェクトでTailwindやBootstrapの設定をカスタマイズしている場合は、カスタムブレークポイントビルダーにプロジェクト独自の値を入力して使用してください。
- カスタムブレークポイントの一覧はどのように入力すればよいですか。
- 1行に1つのブレークポイントを、名前とピクセル幅をカンマまたはスペースで区切って入力します。例：「md, 768」