ブレークポイントの確認(Tailwind・Bootstrap)
画面の幅を入れると、Tailwind CSS・Bootstrap などのどのブレークポイントに当たるかを一覧で表示します。
- 登録不要・無料
- ブラウザ内で処理
- データ送信なし
Tailwind CSS
-
Bootstrap 5
-
よくある端末の幅
-
※ 各フレームワークの初期設定の値です(設定で変更している場合は異なります)。「sm」なら sm: のクラスまでが効きます。今のブラウザの幅は「画面サイズ・デバイス情報の表示」で確認できます。
関連ツール
Web制作・SNS 画面サイズ・デバイス情報の表示 今見ているブラウザの画面サイズ・表示領域・デバイスピクセル比・ブラウザ情報を表示します。表示確認や問い合わせ対応に。 Web制作・SNS px ⇔ rem・em の換算 ルートの文字サイズ(16px)を基準に、px と rem・em・%・pt を相互に換算します。 Web制作・SNS box-shadow の作成 影のずれ・ぼかし・広がり・色・透明度を指定して、CSS の box-shadow を作成します。ふんわりした影のプリセット付き。 Web制作・SNS CSS clamp() の計算(レスポンシブな文字サイズ) 画面幅に応じて文字サイズなどを滑らかに変える CSS の clamp() を、最小・最大のサイズと画面幅から計算します。