メインコンテンツへスキップ
Awesome Toolkit
CSSツール

CSS圧縮・整形

スタイルシートからコメントと空白を取り除いて軽いCSSファイルにしたり、圧縮されたCSSを読みやすいルールに展開したりできます。

モード
入力701文字・46行 · 701 B
結果532文字・1行 · 532 B
.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background-color:#1e293b;color:white}.navbar .logo{font-size:1.5rem;font-weight:700;text-decoration:none;color:inherit}.navbar .nav-links{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}.navbar .nav-links a{color:#94a3b8;text-decoration:none;transition:color 0.2s ease}.navbar .nav-links a:hover{color:white}@media (max-width:768px){.navbar{flex-direction:column;gap:1rem}.navbar .nav-links{flex-direction:column;align-items:center}}
24%削減
くわしく知る

CSSの圧縮：基本のポイント

本番用には圧縮、読むときは整形

圧縮では、ブラウザに不要なもの（コメント、インデント、改行、各ルールの最後のセミコロン）をすべて取り除き、gzipなどの圧縮の前の段階で、ふつう20〜50%小さくなります。整形はその逆で、サイトやライブラリの圧縮されたCSSを貼り付けて、ルールを読んだりデバッグしたりするのに使います。

変えないもの

セレクター、値、ルールの順番はそのまま変わらないので、ページの表示も同じです。使われていないルールの削除やセレクターの統合はしないので、それにはビルドツールを使いましょう。ほとんどのサイトはCSSをgzipやBrotliで配信しているので、圧縮に加えてさらに小さくなります。

使い方

CSSを圧縮する方法

  1. CSSを貼り付ける

    入力パネルにCSSのコードを貼り付けます。最初はサンプルのスタイルが入っています。

  2. 圧縮か整形を選ぶ

    小さくするなら「圧縮」、読みやすくするなら「整形」を選びます。圧縮すると、削減できたサイズが表示されます。

  3. 結果をコピーする

    最適化したCSSをコピーするか、ダウンロードします。整形では、1行に1つの宣言、1行に1つのセレクターにして、文字列、url()の値、セレクターは変えません。

活用ガイド

コツとガイド

ページの表示を速く

圧縮したCSSは、転送するデータが少ないぶん速く読み込まれます。本番のWebサイトでは、圧縮は初回の読み込み時間を短くする標準的な最適化です。

サーバーでのgzip圧縮と組み合わせれば、さらに効果的で、CSSのファイルサイズは全体でふつう70〜90%小さくなります。

プロのコツ

プライベート

CSSはブラウザの中にとどまります。アップロードも、保存も、トラッキングもありません。

自社のスタイルシートやデザインシステムも、圧縮・整形するあいだ端末から出ません。

プライバシー
よくある質問

よくある質問

CSSの圧縮について知っておきたいこと