CSSのプロパティを指定した順番に並べ替えてくれるWEBサービス「Online sorting」

CSSのプロパティを指定した順番に並べ替えてくれるWEBサービス「Online sorting」

CSSのプロパティを指定した順番に並べ替えてくれるWEBサービス「Online sorting」

Online sortingは、バラバラに書かれたCSSのプロパティを指定した順番通りに並べ替えてくれるWEBサービスです。

CSSを頻繁に修正していると、プロパティの順番はセレクタによってバラバラになってしまうことがあります。順番のルールを決めて書けばいいのですが、すでにバラバラになってしまっている場合、すべての順番を修正するのはなかなか億劫です。

そこでOnline sortingを使えば、一瞬でバラバラになったプロパティを指定した順番に並べ替えてくれます。

例えば、以下のようなCSSがあったとします。


p{
line-height: 2em;
}
.post-box{
font-size: 14px;
line-height: 2em;
margin-bottom: 50px;
}
.post-box h1 {
font-weight: bold;
line-height: 1;
font-size: 30px;
margin-bottom: 2px;
}
.post-box h2 {
margin-bottom: 10px;
font-size: 26px;
line-height: 1;
font-weight: bold;
}

marginとかfont-weightの順番がバラバラですね。これをOnline sortingで整形すると、


p{
line-height: 2em;
}
.post-box{
margin-bottom: 50px;
font-size: 14px;
line-height: 2em;
}
.post-box h1 {
margin-bottom: 2px;
font-weight: bold;
font-size: 30px;
line-height: 1;
}
.post-box h2 {
margin-bottom: 10px;
font-weight: bold;
font-size: 26px;
line-height: 1;
}

このようにプロパティをきれいに並べ替えてくれます。

CSSのプロパティを指定した順番に並べ替えてくれるWEBサービス「Online sorting」

Online sortingの使い方

1. Online sortingにアクセスします。
2. フォームにCSSを入力します。

CSSの入力

3. 右上にある[Settings]をクリックします。

プロパティの順番を指定する

4. デフォルトの順番が入っているので、好きな順番に入れ替えて[Save]をクリックします。

プロパティの並べ替え

5. [RESORT]をクリックします。

[RESORT]をクリックします

6. [Copy result code]をクリックして、整形後のCSSをコピーします。

CSSコードのコピー

あとがき

CSS Beautifyも併用して改行やスペースも整形すると完璧ですね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です