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

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

雑に書いた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の表記の仕方を統一する

Format CSS Code – CSS Portal

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

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

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;
}

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

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

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

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

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

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

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

The Greatest tool for sorting CSS properties in specific order

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

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

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

どうやら

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アプリとしても使えるありがたい仕様です。

さて、

Online sorting

では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;
}

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

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