雑に書いたCSSでもがっちりと美しく整形してくれるwebサービスを使って見えないところもオシャレに変身！

インナーのタンクトップにまでこだわる男。フレッシュです。

さて、本題に。

ブログやサイトの見た目をいじる方は避けて通れないCSSです。

できれば後々の管理を楽にするためにちゃんと書きたいところですが、なんだかんだ動けばいいやの精神で雑に書いてしまうのです。僕は。

とはいえ、直接CSSを覗かれた時に「ははーん、雑！」とか言われないため（そんなシチュエーションはまあないけどな！）に、簡単にどうにかする便利なサービスがありますので、ご紹介を。

見えないところにも気を配りたいものですね。後々のいらいらを減らすことは、すなわち効率に関わるのです。だろ？未来の俺！

はい、という訳で。

#header {
background: #8bcdba;
border-bottom: none;
padding:0;
margin: 0;
}


#header .header-wrap {
background: none;
max-width: 960px;
margin: 0 auto;
padding:0 0 3em;
}

#top-stick {
    position:relative;
    }



#menu_b_top {
height: 50px;
width: 50px;
background:#666;
position:absolute;
background:url(https://top-menu.png) no-repeat #e2e655;
background-size:50px;
}

#menu_b_top .first{
    height:50px;
    width:50px;
    display:block;  
    }

#menu_b_top span {
    display:none;   
    }

#header .logo {
float: none;
margin: 50px auto 2em;
width:728px;
}

一部ですが、これがこのブログで走っているCSSです。

インデントやプロパティーの順番等、めちゃくちゃですね。うん、めちゃくちゃです。

• セレクタの後の{の前にスペースがあったりなかったり
• プロパティー（marginとか）の前にスペース4つがあったりなかったり。
• プロパティーの後のコロン（:）の後にスペースがあったりなかったり。

この程度の物量だったらまあ手動で整形しても数分で終わるかもしれませんが、実際にはこのブログ、レスポンシブで動いている手前、3000行以上になります。

無理です。手動とか不可能です。整形するくらいなら記事書きます。

ふだんからちゃんと書けよ（笑）と言いたい気分は存分にわかりますが、今からちゃんと直しますのでご覧あれ。

CSSの表記の仕方を統一する

こちらのサービスを使います。

どういうことが出来るかというと、

CSSの表記の仕方を統一してくれます

つまりは上に書いた汚いコードの問題点をいいかんじに整形してくれるんですうれしい！

さて、

まずは汚いCSSを入力欄に放り込みます。

コード入力欄の下には、どのように整形するかを細かく調整できます。項目から選択するだけ。

プロパティーをいじったら後は「Format Code」をワンポチ。

出力結果に満足行けば、お疲れ様でした。もし意図と違う出力結果でも何度でもやり直せますからね。

最終的にコードはどうなったかというと

#header {
    background : #8bcdba;
    border-bottom : none;
    padding : 0;
    margin : 0;
}

#header .header-wrap {
    background : none;
    max-width : 960px;
    margin : 0 auto;
    padding : 0 0 3em;
}

#top-stick {
    position : relative;
}

#menu_b_top {
    height : 50px;
    width : 50px;
    background : #666;
    position : absolute;
    background : url(http : //top-menu.png) no-repeat #e2e655;
    background-size : 50px;
}

#menu_b_top .first {
    height : 50px;
    width : 50px;
    display : block;
}

#menu_b_top span {
    display : none;
}

#header .logo {
    float : none;
    margin : 50px auto 2em;
    width : 728px;
}

ここまでビューティフルに整形してくれます。助かる。

それぞれのセレクターやタグの書き方、インデント数が統一され、実に見やすくなりました。

コロンやセミコロンの後にまで挙動を制御できるのはありがたいですね。

個人的にはセレクタとセレクタの間には一行欲しい私です。ちゃんとほしい感じに成形できました。

細かく自分仕様に調整できるのも助かる感じですね。

ちなみに、僕の設定は上記です。

プロパティーの順番も揃えておきたい

髪に櫛（コーム）を通したみたいに整形するという個人的には優れた名前のサービス。

どういうことが出来るかというと

プロパティーの順番をセレクタ毎に統一してくれます。

どうやら

CSScomb for Textmate
CSScomb for Coda 2
CSScomb for Coda
CSScomb for Espresso 2
CSScomb for IntelliJIDEA/WebStorm/PyCharm
CSScomb for Notepad++
CSScomb for Vim
CSScomb for Chocolat
CSScomb CLI version

こんなかんじで、いろんなアプリの中にビルトインして使うことも出来るようですが、webアプリとしても使えるありがたい仕様です。

さて、

ではweb版を実際に使ってみます。

何は無くともコードを放り込みます。ちなみに「Format CSS Code」で整形済みのコードだとなお話が早いですね。

コードを放り込めばコード入力欄の上にある「Diff」をぽちっと。ちなみに「difference（違い）」みたいな意味かと。

左右で見比べることが出来ます。

うむ、ちゃんとプロパティーの順番が入れ替わってます！なんという統一感！これはプロの仕業（笑）

プロパティーの順番は基本的におまかせですが、順番まで制御したい束縛派のあなたのためにも順番まで調整出来るセッティング画面が存在します。

では、最終的にコードはどうなったかというと

ビフォー

#header {
background: #8bcdba;
border-bottom: none;
padding:0;
margin: 0;
}


#header .header-wrap {
background: none;
max-width: 960px;
margin: 0 auto;
padding:0 0 3em;
}

#top-stick {
    position:relative;
    }



#menu_b_top {
height: 50px;
width: 50px;
background:#666;
position:absolute;
background:url(https://top-menu.png) no-repeat #e2e655;
background-size:50px;
}

#menu_b_top .first{
    height:50px;
    width:50px;
    display:block;  
    }

#menu_b_top span {
    display:none;   
    }

#header .logo {
float: none;
margin: 50px auto 2em;
width:728px;
}

アフター

#header {
    margin : 0;
    padding : 0;
    border-bottom : none;
    background : #8bcdba;
}

#header .header-wrap {
    margin : 0 auto;
    padding : 0 0 3em;
    max-width : 960px;
    background : none;
}

#top-stick {
    position : relative;
}

#menu_b_top {
    position : absolute;
    width : 50px;
    height : 50px;
    background : #666;
    background : url(http : //top-menu.png) no-repeat #e2e655;
    background-size : 50px;
}

#menu_b_top .first {
    display : block;
    width : 50px;
    height : 50px;
}

#menu_b_top span {
    display : none;
}

#header .logo {
    float : none;
    margin : 50px auto 2em;
    width : 728px;
}

匠の優しさのお陰でここまでいい感じに整形されました。

最初と比べると、雲泥の違い！

冗談はさておき、コードが綺麗だとどういいのか？

まずは保守性が高まります。

一人で自分のブログを運営する場合には特に問題を引き起こさない（苦しむのは自分）場合でも、複数人で運営する場合はどうでしょうか。
ルールに従って整形されたコードは純粋に読みやすいですね。

marginやpaddinは近くにいて欲しいし、widthやheightも近くにいてくれるとありがたいです。

もちろん普段からこういうルールに沿って書ければいいのですが、追記追記で運営する場合どうしても順番が狂いがちです。

世代によってCSSまでバージョン管理を徹底している方ならそもそも雑に書くことはないかもしれませんが、ある程度見た目の修飾が終わったCSSは整形して管理することをおすすめします。

人間には優しくてもブラウザで描画するときにコメントや改行がパフォーマンスに影響を及ぼすやろ！というゴリゴリ派のあなたには

コードを難読化圧縮するソレもあります。

WordPressの場合はプラグインにて圧縮を書けることも出来ますね。

なので、ローカルで管理する場合は難読化圧縮掛ける必要はないかも。

きれいな方がいいの？という方もいると思いますが、綺麗だと純粋に気持ちがいいですよ（笑）プロっぽいし。

そんな理由かい！と呆れるかもしれませんが、保守の恩恵は、整形されたあとでこそ感じられるものです。

納品レベルの整形にも使えるとは思いますが、整形前のCSS（動作確認されたもの）をちゃんとバックアップしてから、整形後テストをしてみてください。

くれぐれもいつだって、バックアップは大事です。バックアップを取ってからお試しくだされ。

本来はセレクタやタグの順番等まで気を使いたいものですが、そのへんはさすがにセルフでお願いします（笑）

じゃ、こんなかんじで。

文：シンタロヲフレッシュ

はてブ

pocket

twitter