CSS整形ツール「ProCSSor」が便利、CSS記法を綺麗に統一し最適化してくれる

サイトの良いデザインが思いつかなかった時、CSSデザイン例などを紹介しているブログから、気に入ったものをコピーして使用するということは、結構あると思います。

僕のようなデザイン経験の乏しい者にとって、コピペで手軽に使わせてもらえるのはとても参考になるし、ありがたいです。ただ当然、いろいろなところからCSSをコピーして使っていると、紹介しているサイトごとに、CSS記法が違っていたりします。

例えばこんな感じ。

  • インデントでタブを使うかスペースを使うか
  • インデントのスペース幅が2個とか4個とか
  • CSSのプロパティーと値の間にスペースを入れるかどうかとか
    (入れない例:margin:0;)
  • 一行で書ける量なら一行で書いてあるとか
  • 複数のセレクターは開業するかどうかとか
  • 括弧の囲い方とか

こういうのは、気にならない人は気にならないと思いますが、自分のCSS記法がキチッと定まっている人には、ちょっと気になるかもしれません。

そんな時は、ProCSSorというCSS整形ツールが便利です。

photo by Mónica del Corral

スポンサーリンク
レクタングル(大)広告

ProCSSorとは

ProCSSor - Advanced CSS Prettifier

ProCSSorは、無料で使えるCSS整形ツールです。

これを使うことで、CSSの書式を統一することができ、見づらいコードも美しくなり、余分なコードも省いて最適化してくれます。

このツールの特徴は、余分なコードを省くからといって、CSSの実行に必要な部分だけ残すというわけではなく、作成者が見やすく編集しやすい形に整形してくれるところです。たまに、読みやすいようにするために入れておいたコメントが、すべて省かれてしまう整形ツールなどもありますが、このツールはそんなこともありません。

ProCSSorの使い方

ProCSSorの使い方はいたって簡単です。

入力欄にCSSを貼り付けて「PROCSS NOW」ボタンを押すだけです。

入力欄にCSSを記入

コピペの他に、ファイルやURLからでも、整形することができます。

デフォルトだと整形後は、こんな感じで表示されます。

CSSの整形後

自分のCSS記法に合わせたい場合は、オプションで指定します。

オプションではこのようなことを設定できます。

ProCSSorオプションの説明

  • Neat
    • Properties of a rule:プロパティの改行ルール
    • Brace Style:括弧の記入スタイル
    • Indent Properties:インデントのスペース幅
  • Pretty
    • Selectors of a Rule:セレクタの改行ルール
    • Sort Properties:プロパティーのソート(使用できないっぽい)
    • Blank Line Between Rules:ルール(CSS設定)間に改行を入れる
    • Improve Comments:コメントをオサレな感じに(逆に変になることもあります)
  • Awesome
    • Columnize:カラム(左寄せ、右寄せなど)
    • Indent:インデント(タブを使用したインデントを使用したいときなど)

これらの設定を行うことで、自分のCSS記法にあった結果を出力することができます。

CSS変換後は、ダウンロードしたり、コピーしたりできるようになります。

CSS変換後

試しに、今使用しているWordpressテーマのstyle.cssに書かれているスタイルシートを僕の好きな記法で変換してみました。

インデント幅は統一され、プロパティーと値の間にはスペースが1つ入り、統一された記法になりました。とても見やすいです。

↓クリックすると表示されます。

※インデントされたコメントは、ずれることもあるようです。

まとめ

ProCSSorは、サイトのデザイン完成時にCSS記法を統一するのにとても便利だと思います。

僕も、好みのCSS記法はあるものの、使用するエディターによっては、登録されているスニペットの違から記法が変わってしまうことも結構あります。なので書くときは、書きたいように書いて、こういうもので後から一発で自分好みの書き方に変換できるのは、ものすごく楽でいいです。

後のメンテナンス時のコードの可読性が良くなる点からも今後積極的に使っていきたいと思います。