Web Service

ボタン1つでCSSファイルを軽量化!圧縮や整形が簡単にできる「csCSSc」

CSSファイルを簡単に圧縮したり整形したりできるツール「csCSSc」を使ってみました。ボタン1つで簡単にできるのでとても便利ですね!600行くらいのCSSファイルを試しに圧縮してみたところ1KBほど軽量になりました。少しでもサイトの読み込み時間を速くしたい時には是非活用していきたいっすね。以下、簡単な使い方です。

[ads_center]

使い方

使い方はとても簡単です。エディタで目的のCSSファイルを開いてコードを全部コピーします。で、サイトへ行きコードをペーストして「Compress」というボタンをクリックするだけです。これで圧縮することができます。

圧縮

csCSScの使い方 圧縮
圧縮する時には3つのオプションがあります。

include comments
コメントを含めることができます。
single line
コードを全部1行にします。
sort styles
セレクタをアルファベット順にソートします。

必要に応じてチェックを入れるといいかと思います。WordPressのテーマのstyle.cssなんかは最初にコメントで必要な情報を記述しなきゃいけないのでその場合はinclude commentsにチェックを入れないといけないですね。

整形

先程の圧縮したコードが出来上がったテキストエリアに整形したいコードをコピー&ペーストして、その下にある「Decompress」というボタンをクリックするとコードが整形されます。

csCSScの使い方 整形

こんな感じでボタン1つでとても簡単に圧縮&整形することができるのでとても手軽でオススメです。こういう便利なツールをどんどん活用して効率的に作業していきたいですね。

関連記事

  1. Web Service

    iPhoneの画像編集アプリ「Filterstorm」を使ってみた

    面白そうだったので使ってみました。iPhoneで画像編集なんてあんまり…

  2. OmmWriter

    Web Service

    創造力を掻き立ててくれるテキストエディタ「OmmWriter Dāna II」を使えば集中して文章が…

    めちゃくちゃシンプルでミニマルデザインが素敵なテキストエディタ「Omm…

  3. Pocketのリスト並べ替え

    Web Service

    Pocket(Web版)で記事リストを最新から最古に並べ替える設定方法

    Web版(ブラウザ)のPocketで記事リストを表示させるとデフォルト…

  4. Web Service

    色々なブランドカラーの値を知ることができる「BrandColors」

    ちょっとした参考になりそうだったのでメモがてらご紹介します。色々なブラ…

  5. Web Service

    JavaScriptのソースコードを1クリックで簡単に圧縮してくれる「/packer/」を使ってみた…

    JavaScriptのコードを1クリックで簡単に圧縮してくれる便利なツ…

  6. CSSViewer

    Web Service

    マウスを乗せた場所のCSSコードを気軽に確認することができるChrome拡張機能「CSSViewer…

    とても便利そうだったので使ってみました。マウスを乗せた場所のCSSコー…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Soundcore Liberty Air 2
  2. Soundcore Liberty 2
  3. マザーツリー
  4. RICOH THETA SC2

アーカイブ

PAGE TOP