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つでとても簡単に圧縮&整形することができるのでとても手軽でオススメです。こういう便利なツールをどんどん活用して効率的に作業していきたいですね。

WordPressのログイン時のツールバーWordPressでランダム記事の一覧をプラグインを使わないで表示させるやり方前のページ

the_tagsを使ってWordPressの投稿タグを表示させたり表示形式を替えたりしてみる次のページWordPressのログイン時のツールバー

関連記事

  1. Web Service

    iPhoneで撮影した写真の個人情報などにモザイクや黒の塗りつぶしで隠すことができるアプリ「hide…

    iPhoneで撮影した写真で顔やメールアドレスなどの個人情報が写ってい…

  2. ヘボン式ローマ字

    Web Service

    ヘボン式ローマ字を使う時の注意事項や便利な一覧表、入力変換サービスなど

    ヘボン式ローマ字を使う時の注意事項や便利な一覧表、入力変換サービスなど…

  3. CSSViewer

    Web Service

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

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

  4. PageSpeed Insights

    Web Service

    Webサイト高速化にするための必要項目を教えてくれるGoogleツール「PageSpeed Insi…

    Webサイトを高速化にするために必要な項目を教えてくれるGoogleツ…

  5. Web Service

    簡単にグラデーション、角丸、ボックスシャドウなんかを作成できるジェネレーター「CSS3 Genera…

    グラデーションや角丸、ボックスシャドウなどのCSS3コードを生成してく…

  6. Chrome拡張機能「PageSpeed Insights」

    Web Service

    「PageSpeed Insights」のChrome拡張機能があったのでインストールしてみた

    以前ご紹介したWebサイトを高速化するためのGoogleツール「Pag…

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP