ぐちゃぐちゃになったCSSを瞬時に整形してくれるWEBサービス「CSS Beautify」

ぐちゃぐちゃになったCSSを瞬時に整形してくれるWEBサービス「CSS Beautify」

ぐちゃぐちゃになったCSSを瞬時に整形してくれるWEBサービス「CSS Beautify」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly
※2017/03/10追記
CSS Beautifyは、サービス終了してしまいました。

ちょこちょこCSSをいじっていると、いつの間にかコードが汚くなっていることってありますよね。不要な改行が入ったままだったり、インデントがタブとスペース入り混じっていたり。。。

そんなぐちゃぐちゃになってしまったCSSも、CSS Beautifyを使えば瞬時に整形することが可能です。

例えば、以下のようなぐちゃぐちゃに書いたCSSがあったとします。


menu{color:red} navigation{background-color:#333 /* darkgrey */}

.test {
 color:red;
}

.test2{background:none;
}

.test3{color:blue;background:#fff;}

ルールが全くなく、ぐちゃぐちゃですね。CSS Beautifyを使えば、これを一瞬で以下のように整形してくれるんです。


menu {
 color: red;
}

navigation {
 background-color: #333 /* darkgrey */;
}

.test {
 color: red;
}

.test2 {
 background: none;
}

.test3 {
 color: blue;
 background: #fff;
}

あんなにぐちゃぐちゃだったCSSが一瞬できれいになりました。

スポンサードリンク

CSS Beautifyの使い方

1. CSS Beautifyにアクセスします。
2. 左側の「Type any unformatted CSS」にCSSを貼り付けます。

Type any unformatted CSS

3. 右側の「Beautified CSS」に整形されたCSSが表示されます。

Beautified CSS

あとは、整形されたコードをコピーしてスタイルシートに貼り付けます。

また、CSS Beautifyにはオプション機能もあって、インデントに使うスペースの数を調整したり、括弧の位置を調整することができます。

オプション

Indent with:インデントのスペースの数を指定します。スペースではなくタブも選択可能。
Open curly brace:括弧の位置を調整します。
Automatic semicolon:チェックを入れると、自動でセミコロンが入ります。

あとがき

CSSを色々とカスタマイズしてコードがぐちゃぐちゃになってしまったら、ぜひ試してみてください。

私も自分が運営しているサイトのCSSを整形してみましたが、やっぱりコードがきれいだと気持ちがいいですね。

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

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。