サイト運営しているうちにCSSがものすごい大きくなってしまうことがありますよね。昔使用していたCSSがそのままだったり、もしくはコメントアウトしたものが残っていたりなどです。そういった不要なCSSをサイト表示速度改善のためにCSS圧縮をすることがあります。
すると、だいたい1行にまとめられて結構な縮小になります。
その後、サイト運営を続けているうちにCSSが同じようなことになりつつあることがあります。
しかし、以前のCSSをCSSminifyなどにて1行に圧縮してしまった為に古いCSSのどこのどの部分がどこに該当するのかわかりにくくなってしまいます。
以下のようになってしまいます。
なので、CSSの圧縮は有名ですが逆の圧縮を元に戻すCSS整形をすることにより見やすくなります。
メルカリ招待コード：
CSS整形が可能なサイト一覧は以下になります。
DirtyMarkup Formatter - CSS Beautifier for Stylesheets
Messy stylesheets can be impossible to edit. Use DirtyMarkup's free online tool to tidy up your CSS code. Beautify even the ugliest / unformatted CSS.
CSSのコード整形ツール
Minify処理などで難読化してあるスタイルシートのコードに、インデントや改行を付けて見やすく整形するツールです。他サイトのCSSを分析したい時、間違えてMinify前のコードを消してしまった時などにご利用下さい。
CSS整形ツールの使い方
このサイトでは簡単に使える便利なウェブツールを公開しています。うまく使うことでWeb開発や日々の作業を効率化することができます。
JavaScript / CSS 整形
インデント・改行を調節し、ソースコードを整形します。
CSS整形ツール
整形前のテキスト欄に入力されたコードが、自動的に改行やインデントを付加した見やすい状態にして表示します。
上記の中でも一番おすすめなサイトは一番はじめに紹介したDirtyMarkup Formatter - CSS Beautifier for Stylesheetsサイトですかね。
CSS整形後は以下のように人の目で見てわかるように修正・整形・直してくれます。
それぞれのCSSが見やすくなります。
その他のCSS整形サイトもみんな綺麗に整形してくれます。それぞれのサイトで整形後の容量が少しだけ異なりますが長過ぎる（多すぎる・大き過ぎる）CSSだとわかりにくいです。
CSS整形後の容量が一番少ないツールサイトをご利用されるか、CSS整形後の容量が一番多いツールサイトをご利用されるかなど、
CSSの整形後の容量で、どのサイトが一番自分の使用しているCSS合っているのかの判断材料にしても良いのかもしれません。
comment