macoblog

「ゲーム × プログラミング」で生きていく

アプリ検索ツール(β版)を公開

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

TOOL

WEB制作担当者

WEB制作担当者
「CSS・Javascriptファイルを圧縮してちょっとでもサイトを軽くしよう、圧縮ソフトをDLするのも面倒だな、そうだ!ファイル圧縮のWEBサービスがないか探してみよう、なるべく新しいやつをっと、、、」

ファイル圧縮のWEBサービスを探している人におすすめの記事です。

本記事では、CSS・Javascriptなどのファイル圧縮を支援してくれるWEBサービスを紹介しています。「簡単に圧縮したい」「難しいことはしたくない」こんな方は必見です。

「小さなことからコツコツと、ファイル圧縮のススメ」

目次【本記事の内容】

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

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

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

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

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

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

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

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

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

Refresh-SFを使ってCSSファイルを圧縮する方法

サービス名 Refresh-SF
リンク 実際に使ってみる
オススメ度 ★★★★★
対応ファイル HTML,CSS,javascript

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

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

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

CSS Minifierを使ってCSSファイルを圧縮する方法

サービス名 CSS Minifier
リンク 実際に使ってみる
オススメ度 ★★★★☆
対応ファイル CSS,javascript,画像

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

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

③:CSS Compressor「CSSのみ」

CSS Compressorを使ってCSSファイルを圧縮する方法

サービス名 CSS Compressor
リンク 実際に使ってみる
オススメ度 ★★★★☆
対応ファイル CSS

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

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

CSS Minifier(syncer)を使ってCSSファイルを圧縮する方法

サービス名 CSS Minifier(syncer)
リンク 実際に使ってみる
オススメ度 ★★★★★
対応ファイル CSS,javascript

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

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

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

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

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

  • Pretty Diff

Pretty Diff:コピペするだけ

Pretty Diffを使って圧縮済みファイルを元に戻す方法

>>Pretty Diff

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

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

以上になります。