CSS

3 件のツール

CSS FormatterCSS を適切なインデントでフォーマット・美化 CSS Minifier空白とコメントを削除して CSS を圧縮 CSS単位コンバーターpx・rem・em・vw・vh・% 間で CSS 単位を変換

ToolDeck の無料CSSオンラインツールを使えば、スタイルシートのフォーマット、圧縮、単位変換をブラウザ上で直接行えます——インストール不要、登録不要、データのアップロードも不要です。CSS Formatter は乱雑なスタイルシートを読みやすく適切にインデントされたコードに整形します。コードレビューや圧縮済みの本番ファイルをデバッグする際に役立ちます。CSS Minifier は空白とコメントを取り除き、可能な限り小さい出力を生成します。デプロイ前の最終ステップとして使用してください。CSS Unit Converter は px、rem、em、vw、vh、パーセンテージの各単位を、設定可能なベースフォントサイズで相互変換します。コードベース全体で一貫した単位計算が必要なレスポンシブデザインの移行時に効果を発揮します。すべてのツールはクライアントサイドで動作し、スタイルシートがマシン外に出ることはありません。

CSSツールとは？

CSS（Cascading Style Sheets）は HTML 要素の画面上の表示を制御します。典型的な Web プロジェクトでは、数十のファイルにわたって数千の CSS ルールが蓄積されます。実際のスタイルシートは共同作業を経て肥大化します——デザイナーがセクションを追加し、サードパーティのライブラリがコンポーネントスタイルを注入し、フレームワークがユーティリティクラスを大量に出力します。結果として、インデント規則が混在し、コメントスタイルも統一されないパッチワーク状のコードになりがちです。CSSツールは、こうしたルールの読み取り・編集・最適化といった機械的な作業を自動化し、空白の整理ではなくデザインの判断に集中できるようにします。具体的には、壊れたセレクターを特定するために圧縮済み本番ファイルを再インデントしたり、デプロイ前にスタイルシートを圧縮して数キロバイト削減したり、Figma の仕様書のピクセル値をデザインシステムのベーススケールに合わせた rem 換算値に変換したりといった作業です。適切なツールを使えば数秒で終わる作業も、手作業で行うと微妙なバグを引き起こしかねません。

フォーマットツールは、コードレビュー時にスタイルシートを一覧しやすくするため、一貫したインデント・ブレース配置・プロパティ順序を適用します。圧縮ツールはその逆で、ルールを1行に折り畳み、コメントを削除し、デプロイ前のファイルサイズを削減します。単位変換ツールは、手作業では誤りが生じやすい計算を処理します。たとえば、ルートが 16px のとき 14px のフォントサイズを rem に変換する（0.875rem）場合や、ビューポート相対の幅を計算する場合などです。

これらの作業は、デバッグ（圧縮済み本番スタイルシートを再フォーマットして壊れたルールを特定）、ビルドプロセス（出荷前の CSS 圧縮）、レスポンシブデザイン作業（絶対単位と相対単位の切り替え）といった場面で発生します。ブラウザベースの CSSツールは、フルのビルドパイプラインを起動したり依存関係をインストールしたりせずに素早く答えが欲しいときに便利です。

CSS は初期から大幅に進化しました。CSS Grid、カスタムプロパティ（変数）、コンテナクエリ、ネイティブネスティングといったモダンな機能は表現力を高める一方、スタイルシートの複雑性も増しています。こうした新しい構文を解析・再フォーマットできるツールは、開発者が手動フォーマットの失敗を心配せずに新機能を採用する助けになります。W3C CSS Working Group は新しいモジュールをリリースし続けており、@layer、:has()、subgrid などの最近の追加機能はすべての主要なブラウザエンジンでサポートされています。これらの新しい構文を正しく処理できるフォーマット・圧縮ツールは、@layer の順序や :has() の詳細度に依存するカスケードを手動編集のミスで壊してしまうリスクを排除します。

ToolDeck の CSSツールを使う理由

ToolDeck の CSSツールは JavaScript を使ってすべてブラウザ内で処理します。CSS がサーバーにアップロードされることはなく、アカウントも不要で、初回ページロード後はオフラインでも動作します。

🔒

デフォルトでプライベート

スタイルシートはブラウザタブ内に留まります。いかなるサーバーにも送信・ログ記録・保存されません。独自のデザインシステムや社内プロジェクトにも安全に使用できます。

⚡

即座の結果

フォーマット、圧縮、単位変換はミリ秒単位で完了します。CSS を貼り付ければすぐに結果が得られます。ビルドステップもCLIフラグも設定ファイルも不要です。

📐

正確な単位計算

単位変換ツールは四捨五入によるバグの原因となる小数精度を適切に処理します。ベースフォントサイズを一度設定すれば、px、rem、em、ビューポート単位の間で値のセットをまとめて変換できます。

🌐

インストール不要

ブラウザがあればどのデバイスでも動作します。Node、PostCSS、フォーマットプラグイン付きのコードエディターをインストールできないマシン上でも使用できます。

CSSツールの使用例

CSS のフォーマット、圧縮、単位変換は、Web プロジェクトのあらゆる段階とチームのすべての役割で発生します。開発中は、複数のコントリビューターが変更をプッシュする際にフォーマットがスタイルシートを読みやすく保ちます。本番リリース前は、圧縮が CSS のペイロードサイズを削減してページロードを高速化します。レスポンシブデザイン作業やデザインシステムを相対単位に移行する際は、単位変換が数十のピクセル値を rem やビューポート単位に変換するときに発生する計算ミスを防ぎます。通常の開発環境外でタスクが発生した場合——借りたマシンや、ライブのコードレビューセッション中、ステージングサーバーで直接デバッグしている場合など——ブラウザから素早くアクセスできるツールが特に役立ちます。

コードレビューの整形

チームメンバーがインデントが不統一で折り畳まれたルールを含むPRを提出しました。CSS を CSS Formatter に貼り付けてスタイルを正規化してから、変更を1行ずつ比較しましょう。

本番向け最適化

ホットフィックスをデプロイする前に、可能な限り小さい CSS ペイロードが必要です。スタイルシートを CSS Minifier にかけて、動作を変えずにコメント・空白・余分なセミコロンを取り除きましょう。

レスポンシブデザインの移行

デザインチームがアクセシビリティのスケーリングを向上させるため、ピクセルベースのスペーシングから rem 単位への移行を希望しています。CSS Unit Converter を使って、正しいベースフォントサイズで値をまとめて変換しましょう。

圧縮済み CSS のデバッグ

圧縮済みスタイルシートで本番バグが発生しました。CSS を読みやすいブロックにフォーマットすることで、どのセレクターが誤ったプロパティを適用しているかを追跡できます。壊れたルールを特定したら、ソースを修正して再圧縮してからパッチをプッシュしましょう。

CSS レイアウトの学習

CSS チュートリアルに取り組む学習者は、単位変換を試して rem、em、ビューポート単位が異なるベースサイズでどう関係するかを確認できます。計算式を視覚的に確認することで、レスポンシブ CSS を1行書く前に適切な単位タイプを選ぶための直感が身につきます。

デザイントークンの生成

スペーシングやタイポグラフィのスケールを構築する際、px と rem の相互変換によってトークン値がコンポーネントやブレークポイント間で一貫しているか確認できます。デザインファイルの生のピクセル値を貼り付けると、トークン定義にそのまま使える rem 換算値が出力されます。

CSS 単位リファレンス

CSS にはいくつかの長さの単位が定義されています。以下の表は最もよく使われるものをまとめています。絶対単位（px など）はコンテキストに関わらず同じサイズを生成します。相対単位は親要素、ルートフォントサイズ、またはビューポートの寸法に基づいてスケールします。

単位	種類	基準	レスポンシブ	典型的な用途
px	絶対	1インチの1/96（固定）	—	ボーダー、シャドウ、固定サイズのアイコン
rem	相対	ルート要素のフォントサイズ	✓	フォントサイズ、スペーシング、メディアクエリ
em	相対	親要素のフォントサイズ	✓	コンポーネントスコープのスペーシング
%	相対	親要素の寸法	✓	可変幅、グリッドカラム
vw	ビューポート	ビューポート幅の1%	✓	全幅セクション、流体タイポグラフィ
vh	ビューポート	ビューポート高さの1%	✓	ヒーローセクション、全画面レイアウト
ch	相対	'0' 文字の幅	✓	等幅カラム幅、入力フィールドのサイジング
vmin	ビューポート	ビューポートの短辺の1%	✓	正方形コンテナ、向き対応のサイジング
vmax	ビューポート	ビューポートの長辺の1%	✓	背景サイジング、最大寸法レイアウト

CSS Values and Units Module Level 4（W3C）では、2023年以降すべてのモダンブラウザでサポートされている dvh、svh、lvh（動的/小/大ビューポートサイズ）などの追加単位も定義されています。

適切な CSSツールの選び方

ToolDeck の各 CSSツールはスタイルシートワークフローの異なる部分を担います。現在のタスクに合ったものを選びましょう。

1
必要な作業乱雑または圧縮済みのスタイルシートを適切なインデントと改行で読みやすくする → CSS Formatter
2
必要な作業空白・コメント・不要な文字を削除して本番用に CSS ファイルサイズを削減する → CSS Minifier
3
必要な作業カスタムベースフォントサイズで px、rem、em、vw、vh、% の間で変換する → CSS Unit Converter

日常的な作業のほとんどは CSS Formatter と CSS Minifier でフォーマットと最適化をカバーできます。レスポンシブレイアウトの構築やデザインシステムを相対単位に移行する際は、CSS Unit Converter が計算の手間を省いてくれます——特にデザインファイルがピクセル値を使用していてコードベースが rem を期待している場合に効果的です。どこから始めればいいか迷ったら CSS Formatter から始めるのがおすすめです。AIが生成したサードパーティの CSS をプロジェクトに組み込む前に読みやすくする用途にも適しています。パフォーマンスを重視する開発者は CSS Minifier を最終ステップとして使用し、前後のファイルサイズを比較して削減効果を確認します。

よくある質問

CSS フォーマットと CSS 圧縮の違いは何ですか？

フォーマットは CSS を人間が読みやすくするために空白・インデント・改行を追加します。圧縮はその逆で、ファイルサイズを最小化するためにそれらをすべて取り除きます。両者は逆の操作です。CSS は開発中やコードレビュー時にフォーマットし、本番デプロイ前に圧縮します。

CSS を圧縮しても安全ですか？スタイルが壊れることはありますか？

標準的な圧縮（空白とコメントの削除）は、ブラウザによる CSS の解釈方法を変えません。レンダリングに影響しない文字を削除するだけです。ただし、積極的な圧縮ツールの中にはショートハンドプロパティを書き換えたりセレクターをマージしたりするものがあり、詳細度が変わることがあります。ToolDeck の CSS Minifier は安全な空白とコメントの削除のみを行います。

CSS における rem と em の違いは何ですか？

rem はルート要素のフォントサイズ（通常は html 要素、デフォルトで 16px）を基準にします。em は親要素のフォントサイズを基準にします。em を使った要素をネストすると、サイズが複合的に変化します。rem は常にルートを参照するため、この複合変化が生じません。最新の CSS フレームワークの多くは、スペーシングとフォントサイジングに rem を好んで使用します。

px を rem に変換するにはどうすればいいですか？

ピクセル値をルートフォントサイズで割ります。デフォルトのルート 16px の場合、24px は 1.5rem になります（24 ÷ 16 = 1.5）。プロジェクトで別のルートフォントサイズを設定している場合は、その値を使用してください。ToolDeck の CSS Unit Converter ではカスタムベースを設定でき、除算を自動的に処理します。

rem の代わりにビューポート単位（vw、vh）を使うべき場面はどこですか？

ビューポート単位はフォントサイズではなくブラウザウィンドウのサイズに応じてスケールします。ヒーローセクション、全幅背景、ウィンドウに合わせてスケールする流体タイポグラフィなど、画面のパーセンテージにまたがる要素には vw や vh を使用してください。ユーザーのテキストサイズ設定に合わせてスケールするスペーシングとフォントサイズには rem を使用してください。レスポンシブデザインでは両者を組み合わせることが一般的です。

CSS 変数（カスタムプロパティ）を含む CSS もフォーマットできますか？

はい。CSS カスタムプロパティ（--variable-name）は標準的な CSS 構文です。CSS Formatter は他のプロパティ宣言と同様に解析します。var(--variable-name) を使った変数参照もフォールバック値を含めて正しく処理されます。

これらの CSSツールは CSS ネスティングや新しい構文をサポートしていますか？

ツールは標準的な CSS 構文を解析します。ネイティブ CSS ネスティング（& セレクター）は 2023年12月以降すべての主要ブラウザでサポートされています。フォーマッターと圧縮ツールはネストされたルールを通常のセレクターと同様に処理します。Sass や Less の変数（$var、@var）のようなプリプロセッサ固有の構文はプレーンテキストとして扱われ、壊れることはありませんが、プリプロセッサを考慮したフォーマットは適用されません。

CSS 圧縮によるファイルサイズ削減は通常どの程度ですか？

削減量は元の CSS の書き方によって異なります。コメントが豊富で空白が多いスタイルシートは通常 20〜40% 縮小します。Tailwind や CSS-in-JS ライブラリなどのツールから自動生成された CSS はすでにコンパクトな場合が多く、10〜15% 程度の削減にとどまることがあります。最大の効果はブロックコメント、ライセンスヘッダー、開発用のアノテーションを取り除くことから得られます。正確な数値は CSS Minifier を実行する前後の文字数を比較してください。