UUUP Tools

デザインツール

レスポンシブ・ブレークポイントテスター - フレームワーク別ブレークポイント確認

現在の window width がどの CSS framework breakpoint に当たるかをリアルタイムで確認できます。Tailwind CSS、Bootstrap、Material UI の preset と custom list を使い、responsive debugging に役立てられます。

クイック切替→ピクセル定規
ResponsiveBreakpointDesign
クイック切替:ピクセル定規CSS 単位変換

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻る すべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

  • 現在有効な responsive breakpoint を確認する
  • framework ごとの breakpoint preset を比較する
  • layout 実装中の参照一覧として使う

使い方

  1. CSS framework の preset を選ぶ
  2. browser window をリサイズする
  3. 現在の breakpoint と一覧を確認する

入出力サンプル

ウィンドウ幅

768px

Tailwind

md ブレークポイント

FAQ

どの framework に対応していますか？

Tailwind CSS、Bootstrap 5、Material UI、および custom breakpoint list を preset として用意しています。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

ピクセル定規

ピクセル定規 - 画面サイズと目盛り表示

利用可能

ページ上に horizontal または vertical の pixel ruler を描画できます。長さや tick 間隔を調整し、window size と device pixel ratio を見ながら layout や mockup 上の CSS pixel を確認できます。

Pixels Ruler Measure
ツールを開く

CSS 単位変換

CSS 単位変換 - px、rem、em、vw

利用可能

px、rem、em、pt、vw、vh、% の相互変換を行えます。root font size、親要素 font size、viewport size を設定し、レスポンシブ対応やデザインから実装への引き継ぎに活用できます。

CSS 単位 変換
ツールを開く