HTML整形フリーツールおすすめ2選

2019年3月3日 2021年5月16日

こんにちは。あいりです。

ホームページを作成するときは、無料のテンプレートをダウンロードして、カスタマイズをしながら作成しています。

私は作業を一通り終わらせてから、最後にまとめてHTMLでエラーが発生していないか、体裁を確認していました。

すると、ところどころ＜div＞タグを付け忘れたり、どこまでタグを囲うのか分からなくなる時があります。

どこから発生したものなのか、原因を追っていくのに時間がかかりました。

そこで、作業の途中で定期的にHTMLの整形ツールを使用して整形するようにしました。

その結果、エラーの原因を見つける時間が削減され、手戻りの修正がなくなりました。

HTMLの整形するおすすめの便利なツールがございますのでご紹介します。

おすすめフリーHTML整形サイト

整形するメリットについてご紹介します。

１.記述漏れを防ぐ

HTMLのタグつけ漏れを防ぐことができます。

２．メンテナンスしやすくする

自分以外の相手がHTMLのソースコードを確認する場合に見やすくさせます。

３．エラー箇所を特定しやすくする

HTMLの記述でエラーが出ている場合、原因を特定しやすくします。

おすすめの整形フリーサイトをご紹介します。

Dirty Markup

オススメ度★★★

Dirty Markupは英語表記です。感覚的に操作ができます。

HTMLのほかにもCSS、Javascriptも整形できようになっています。

Dirty Markupのおすすめ機能は３つあります。

１．HTML補完機能

HTMLのタグが足りない状態で整形すると、HTMLタグを自動で付けてくれます。

２．インデント設定機能

どの単位でインデントするか設定することができます。

３．インデントするときどれくらい空けるのか設定する機能

インデントをするときにどれくらい空けるのか文字数単位で設定することができます。

HTMLの整形の操作方法をご説明します。

操作方法：

1．整形したいソースコードをコピーし、「Dirty Markup」にあるソースコードの箇所に貼り付ける。

２．「HTML」で選択されていることを確認し、「clean」のボタンを押下する。

３．HTMLが整形されます

ただ、注意することがあります。

・HTMLのほかにもCSS、Javascriptも選択できるようになっていますが、選択してしまうと、すでに貼り付けたソースコードが削除されてしまいます。

・貼り付けたとき、赤く表示されている箇所がありますが、多くのサイトで「赤く表示されているのはエラーの箇所であるので、エラーチェックができる」と言っていることが多いです。

本当にエラーの箇所を示せているのか確認しましたところ、すべてエラー箇所を表示しきれていませんでしたので、こちらは気にしなくてよいです。

あくまで、HTMLのソースコードの整形用に使用して頂ければと思います。

HTMLのインデント設定の操作方法をご紹介します。

操作方法：

１．Indentの「Block-level」を選択する

２．選択すると、ブロック要素のid、ｃlassが振られているタグごとにインデントします。

（多くの整形ツールはこの単位でインデントされます。）

使い方としてはCSSの設定するときに参考にできます。

Indentの「auto」を選択した場合、ブロック要素単位でインデントされます。

ブロック要素の<p>タグはインデントされません。

（このツールのデフォルトの設定です）

ファイルサイズを少しでも小さくしたい場合に有効です。

※ブロック要素について

文章の段落、見出しなどのブロックのかたまりのことをいいます。

ブロック要素のタグは以下になります。

インデントするときにどれくらい空けるのか設定する方法をご紹介します。

操作方法：

１．Indent withで「2 spaces」を選択する

デフォルトの設定は「Tab」単位で空けることになっていますが、「2 spaces」を選択すると2文字分スペースを空けてインデントします。

最大8文字分スペースを空けてインデントできます。

ご自身が見やすい単位で設定して頂ければと思います。

TM－WebTools

オススメ度★★★

TM－webToolsはHTMLのほかにもJavascript、CSSも整形できます。

TM－webToolsのおすすめ機能は３つあります。

１．HTMLの軽量化

HTMLの圧縮機能でHTMLを軽量化します。

２．HTML特殊文字変換

３．HTMLの整形

インデントで2文字分または4文字分空けるか設定ができます。

HTMLの整形方法をご紹介します。

操作方法：

１．HTMLのソースコードを張り付けて、「整形を行う」を選択する

２.整形されたソースコードが表示される

HTMLの整形以外の機能が豊富にありますので、ぜひブックマークすることをお勧めします。

最後に

インデント方法を色々設定できるのはいいですね。

HTMLを整形することによって、記述ミスを事前に防ぐことができますので、フリーツールを活用してみてください。

また、エラー箇所を特定する手助けになりますので、まずはソースコードを整形して、確認してみてください。