HTML・CSSのオンライン整形ツール3選をご紹介！【インデント揃える/自動インデント】

HTML・CSSの整形

みなさんは普段HTMLやCSSを書いていて、インデントを揃えていますでしょうか？インデントを揃えている・いないで、コードのメンテナンス性がかなり変わってきます。

今回の記事ではオンラインで簡単にHTML・CSSのインデントや整形ができるツールをご紹介していきます。オンラインでブラウザのコピペだけで簡単に利用できますので、ぜひHTML・CSSを整形する際にご利用下さいませ。

それではHTML・CSSのオンライン整形ツール3選ご紹介します。いずれのツールも自動インデント機能があり、コピペですぐにHTML・CSSを整形することが出来ます。

SyncerにはHTML・CSS・JavaScriptの整形ツールがあります。HTMLやCSSのコードに適切なインデント（スペースやタブを選択できる）で揃える事ができ、コピペですぐに利用することが出来ます。

Syncerでは左側にコードを入力（スマホだと上）すると、リアルタイムで整形されたコードが右側（スマホだと下）に表示されます。

更にインデントのタブやスペースの選択、改行の調整が可能なのも嬉しいポイントです。

HTML整形ツールではHTMLの整形が行えるシンプルな機能で使いやすいツールとなっています。下記のリンクからアクセスすることが出来ます。

この図のように、サイトの上部のフォームに自動フォーマットしたいHTMLをコピペします。すると、下にインデントが付加された整形されたHTMLが表示されます。

更に細かい情報として、処理時間や整形前のバイト数、整形後のバイト数や行数などもわかり、インデント対象のタグなども表示されます。

FREEFORMATTER.COMのHTML Formatは英語のWEBツールになりますが、機能的にはとてもシンプルで、またコピペだけではなく、ファイルアップロードや文字コードの選択も可能なHTMLの整形ツールです。

CSSの場合は、こちらのリンクです。

上記リンクにアクセスすると、HTMLの入力フォームがありますので、そこに整形したいHTMLをコピペします。

またはHTMLファイルのアップロードでも同様の事が可能です。フォーマットしたいHTMLがファイルで持っていたら、ファイルアップロードしてみましょう。

整形されたHTMLはこのようにシンタックスハイライト付きで色分けされ表示されます。こちらのHTMLをコピーして、利用しましょう。