「１クリックでOK」CSSを圧縮してくれるWEBサービス４選

名無し

CSS・Javascriptファイルを圧縮して少しでもサイトを軽くしよう、、、しかし圧縮ソフトをDLするのは面倒だな、そうだ！CCSファイルを圧縮してくれるWEBサービスがないか探してみよう、なるべく新しいやつをっと..

ファイル圧縮のWEBサービスを探している人におすすめの記事です。
本記事では、「CSS・Javascript」などのファイル圧縮を支援してくれるWEBサービスを紹介しています。

CSSファイルの圧縮を支援してくれるWEBサービスを集めてみました、基本的な機能は同じです、細かい機能に関しては実際に使って試して頂ければなと思います。

CSSを圧縮してくれるWEBサービス４選

CSSファイルを圧縮するにあたって注意点がいくつかあります。

• 圧縮前にバックアップを取る（Sass環境なら取らなくてOK）
• 圧縮後のソースコードを100%信用してはいけない

圧縮後のソースコードは圧縮時にスタイルが置き換わっている可能性があります（基本的には大丈夫）、なのですぐに戻せるようにバックアップは必ず取っておきましょう。

圧縮前に戻す方法（ツール）についても言及しますが、これも完璧ではありません、バックアップを取るのが一番確実で安全です。

それでは見ていきましょう。

①：Refresh-SF「CSS以外にも対応」

使い方は上のスクショ通りです、[input]に圧縮したいコードをコピペします、内容に応じて右上にあるボタンの色が変わるのでそれに合わせてクリックするだけですね。

今回紹介する中では唯一[HTML]の圧縮が可能です、機会があれば使ってみて下さい。

②：CSS Minifier「画像にも対応」

使い方は上のスクショ通りです、左に圧縮前のコードをコピペ、下にある「Minify」ボタンをクリックすれば右に圧縮されたコードが表示されます。

上のメニューから[javascript]に切り替えることが出来ます、画像も出来るのは面白いですね、使わないけど。笑

③：CSS Compressor「CSSのみ」

使い方は上のスクショ通りです、圧縮レベルを４段階で調整できるのがポイント、ファイルはCSSしか対応していませんが使いやすさでカバー。

④：CSS Minifier(syncer)「CSSとJSのみ」

使い方は上のスクショ通りです、左に圧縮前のコードをコピペ、下にある「Minifyをする」ボタンを押せば圧縮されます。

上にある関連ツールからjavascriptの圧縮に切り替える事ができます、日本人の方が作られたものなのでUIは使いやすいかと思います。

圧縮したCSSファイルを戻すには？【ツールの紹介】

圧縮したファイルを元のファイルに戻したい場合、これもまたWEBサービスを使えばOKです。

色々探してみましたが下記のサービスが使えそうです、他にもありましたが微妙だったので紹介しません。

• Pretty Diff

Pretty Diff：コピペするだけ

上のリンクからアクセスして圧縮済みのコードを左にコピペするか、アップロードすると右に整形前のコードが表示されます。

英語表記でゴチャゴチャしているので使いづらいという点と、他記事でおかしな挙動をすると指摘がありましたが、私の環境では確認できませんでした。

以上になります。

✅ 他の人が読んでいる記事