CSS

マージン・ボーダー・パディング・コンテンツのサイズをリアルタイムで調整。Chrome DevToolsと同じ色分けで図が即座に更新され、コピー可能なCSSも自動生成されます。 ...

CSSの cursor プロパティで使える全カーソル値を一覧で確認。カードにホバーしてカーソルをプレビューし、ボタンをクリックしてCSSをコピーできます。検索・カテゴリーで絞り込みも可能。カスタムカーソルのCSS生成ツールも内蔵しています。 ...

CSSの outline プロパティを即座に生成。スタイル・幅・色・オフセットをリアルタイムプレビューで調整し、コピーするだけで使えるCSSコードを取得できます。 プリセット ...

TailwindのユーティリティクラスをコピペするだけでTailwind推奨順序に自動整列。レイアウト→ポジション→サイズ→スペーシング→タイポグラフィ→背景→ボーダー→エフェクト→トランジション→インタラクションの順でキレイに並べ替えます。 関連ツール：CSS変数ジェネレーター · CSSメディアクエリジェネレーター ...

CSSトランジションを視覚的に作成できる無料ツールです。プロパティ・継続時間・タイミング関数・遅延を設定し、複数のトランジションを組み合わせて、すぐに使えるCSSをコピーできます。 ...

HEX・RGB・HSL値を入力して、最も近いCSS名前付きカラーを即座に検索。148色のCSS色名を一覧表示・検索・コピーできます。 最も近いCSS色名を検索 HEX RGB ピッカー HEXカラー 色名を検索 6桁のHEXコードを入力してください（例: #ff6347） ...

ブラウザの表示領域（ビューポート）サイズをリアルタイムで確認し、どのCSSブレイクポイントが適用されているかを即座に把握できます。デバイスプリセット一覧との比較機能付き。登録・インストール不要。 関連ツール: 画面解像度 → 画面解像度チェッカー | メディアクエリ → CSSメディアクエリジェネレーター — 幅 (px) × — 高さ (px) — ブレイクポイント — — DPR — ブレイクポイントインジケーター 0640768102412801536+ xs<640px sm640–767 md768–1023 lg1024–1279 xl1280–1535 2xl1536px+ window.innerWidth — スクロールバーを含む表示幅 window.innerHeight — スクロールバーを含む表示高さ document.documentElement — × — clientWidth × clientHeight screen.width × screen.height — 物理画面の解像度 devicePixelRatio — CSS px と物理 px の比率 向き（Orientation） — 縦向き / 横向き 情報をコピー クリップボードにコピーしました！ 主要デバイスのビューポート参考値 デバイス ビューポート (CSS px) Tailwind BP 備考 iPhone 15 Pro 393 × 852 xs 縦向き、@3x iPhone 15 / 14 390 × 844 xs 縦向き、@3x iPhone SE（第3世代） 375 × 667 xs 縦向き、@2x iPad（第10世代） 820 × 1180 md 縦向き、@2x iPad Pro 12.9" 1024 × 1366 lg 縦向き、@2x Pixel 7 412 × 915 xs 縦向き、@2.625x Galaxy S24 360 × 780 xs 縦向き、@3x MacBook Air 13" 1280 × 800 xl Retina @2x MacBook Pro 14" 1512 × 982 xl Retina @2x MacBook Pro 16" 1728 × 1117 2xl Retina @2x デスクトップ 1080p 1920 × 1080 2xl @1x 標準 使い方 上部の数値を確認 — ブラウザのウィンドウをリサイズするとリアルタイムで更新されます。 ブレイクポイントバーをチェック — 現在の幅がTailwind CSSのどのブレイクポイント（xs / sm / md / lg / xl / 2xl）に該当するかが一目でわかります。 デバイスプリセット一覧で比較 — 実機でどのように表示されるかの参考として活用してください。 「情報をコピー」ボタン — バグ報告やデザイン確認のためにスナップショットをテキストでコピーできます。 各プロパティの意味 プロパティ 計測対象 window.innerWidth/Height スクロールバーを含む表示領域のサイズ clientWidth/Height スクロールバーを除いた表示領域（CSSメディアクエリと一致） screen.width/Height デバイスの物理画面解像度（ズームに影響されない） devicePixelRatio CSS 1px が物理何ピクセルに対応するか（Retinaは2以上） Tailwind CSS ブレイクポイント一覧 プレフィックス 最小幅 CSSルール (なし — xs) 0 px デフォルトスタイル sm 640 px @media (min-width: 640px) md 768 px @media (min-width: 768px) lg 1024 px @media (min-width: 1024px) xl 1280 px @media (min-width: 1280px) 2xl 1536 px @media (min-width: 1536px) Web制作の経費管理もかんたんに ...