Blog

HTMLやCSSをキレイに整形してくれるオンラインツールご紹介

本日は、htmlやcssはたまたjavascriptのソースを綺麗にしてくれるwebサービスを紹介します!
もちろんお金等はかかりません。

綺麗に書くように意識しつつも、
忙しい時期や、修正が繰り返し発生したりすると、
ソースを綺麗にする意識はどこかにいってしまいがちですよね・・・(自分だけでしょうか?)

そんな時に、ソースを書き終わったら、
このツールを使えば、ソースがあっという間にキレイになります。

 

PrpCSSor

ProCSSor - Advanced CSS Prettifier
こちらはcss専用で、オプションが豊富です。

・インデントの設定(1から4の半角スペース)
・括弧の位置の指定
・複数セレクタ指定の際、改行or一行の選択
・親子関係の際にインデントの指定

PrpCSSor

DIRTYMARKUP

Dirty Markup · Tidy and Beautify your HTML, CSS, and JavaScript code
こちらは、html,css,javascriptも整形出来ます。
デバック機能もあるようです。

・インデントの設定(1から4の半角スペース、タブ)

DIRTYMARKUP

HTML整形ツール(プチ・デバッグ機能付き)

HTML整形ツール(プチ・デバッグ機能付き)
こちらはHTMLのみになりますがシンプルなので、
単純に整形したい場合は、こちらでやるのがいいかと思います。

・インデントの設定(1,2,4の半角スペースかタブ)
名前の通りデバッグ機能もあるようです。

HTML整形ツール(プチ・デバッグ機能付き)

個人的にはソースは汚すぎなければいいという考えですが、
googleさんでhtmlが「こう書いたほうがいいよ」というレギュレーションがあるみたいなので、
それに沿ってみようかなと思う今日この頃です。

それはコチラ

Google HTML/CSS Style Guide

これを翻訳したのがコチラ、
「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN

中には、cssをアルファベット順に書くという面倒くさそうなものもあります・・・

googleが提唱しているのであれば、
それにのっとるのがベストなのかもしれませんね・・・

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ