CSS／Frontend ツール | Tooloo

すべてのツール

カラー

オンラインカラーピッカーカラーパネルで色を選び、HEX・RGB・HSL とコントラスト比を同時に取得。

CSS グラデーション生成linear・radial・conic グラデーションをプレビューしながら作成しコピー。

ビジュアル効果

CSS Box Shadow 生成オフセット・ぼかし・広がり・色を調整し、多重シャドウを作成してコピー。

CSS 角丸ジェネレーター4 つの角を個別に調整し、楕円角にも対応した border-radius を出力。

CSS Filter 生成ぼかし・明るさ・コントラスト・彩度などを調整し、効果を即座に比較。

CSS アニメーション生成効果を選んで時間や回数を調整し、keyframes と animation を出力。

レイアウト

Flexbox ジェネレーターflex コンテナのプロパティを調整し、並び方の変化をその場で確認。

CSS Grid ジェネレーター列数・行数・間隔・揃え方を設定し、プレビューしながら grid CSS を出力。

サイズ換算

CSS clamp() 流動サイズ計算最小値・最大値とビューポート範囲から流動的な clamp() を算出。

PX から REM 変換ピクセルを rem に変換。ルート文字サイズを指定でき、対照表も付属。

REM から PX 変換rem 値を実際のピクセルに換算し、常用 rem の対照表も表示。

PX から VW／VH 変換デザインファイルの寸法を基準にピクセルをビューポート単位へ変換。

アスペクト比計算幅と高さから最簡比を求め、比率から不足する辺も算出。

SVG

SVG ビューアSVG を貼り付けて安全にプレビューし、除去された危険な内容も確認。

SVG 最適化ツール不要な内容と過剰な小数を除去し、前後のサイズを比較。

ツールごとにページを分けている理由

シャドウの調整とグリッドの記述はまったく別の作業で、同じ作業の中で行き来することもなければ、検索する言葉も異なります。そのため各ツールは独自の URL、独自の説明、独自の FAQ を持ち、タブで切り替える 1 枚のページにまとめてはいません。カラー形式の相互変換は視覚調整ではなくテキスト変換なので、既存の Developer Tools のカラーコンバーターをそのまま利用し、ここでは重複させていません。

関連ツール

カラーコンバーター（HEX／RGB／HSL） ↗CSS Formatter ↗CSS Minifier ↗HTML Formatter ↗Base64 エンコード／デコード ↗