HTMLを自動整形してくれるツールが便利!【無料】

ツール

HTMLを自動整形してくれるツールが便利!【無料】

2019年03月03日 8:00 

HTMLを自動整形してくれるツールが便利!【無料】

おはようございます!社員Aです👩

弊社で統一して使用しているエディタには、自動整形機能がついているのですが、出先や自分のPCではないときにHTMLをサクッと整形したいときに使えるツールをご紹介したいと思います。



 

ソースコードの整形とは?

HTMLのコードに、適切なインデントと改行を付けて、見やすく整形することです。整形をすることにより、可読性も上がりますし、別のコーダーが編集するときも見やすく編集しやすいのが利点です。

もちろん自分で手動で整形していくこともできるのですが、ソースコードが長い場合は面倒ですよね。

そんなときに使えるのが、自動整形ツールです。

 

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

上部に元ソースを貼り付け、中央にある「整形」ボタンを押すと、下部に整形されたソースコードが表示されるシンプルで使い勝手の良いツールです。

また、こちらのサイトでは単にHTMLを整形するだけでなく、不完全なタグが見つかると、対象タグの一覧を表示するプチデバッグ機能も搭載されています。

HTMLをすっきり整形させるだけでなく、デバッグも兼ねたいときにおすすめです。

 

HTMLのコード整形ツール SYNCER

HTMLコードに適切なインデントと改行を付けて、確認しやすく整形してくれます。

使い方も簡単で、「変換前」のフォームに、コードを入力するか、ファイルをドロップするだけで、「変換後」のフォームに変換結果が表示されます。

オプション設定も豊富で、カスタマイズして整形したい方におすすめです。

ビューアー機能

入力したコードをこのページ上で確認してしまいたいときに便利なビューアー機能が搭載されています。

インデント文字の設定

インデント文字と、その個数を設定することができます。

長すぎる行の改行

1行が長すぎる場合、適切な場所で改行してくれます。

改行を保持

既存の改行を保持するか、削除するか選択できます。

 

Source Code Beautifier

海外のサイトですが、非常にシンプルで使い勝手が良いです。ソースコードを入力し、「Beautify Code」のボタンをクリックすると枠内でコードが整形されます。

こちらのサイトでは、HTMLだけでなく、JavaScript、XML、CSS、およびPHPを含むすべての一般的な言語のソースコードを理解し、フォーマットすることができます。

 



dirtymarkup

こちらも海外のサイトです。

右側にソースコードを貼り付け、オプションを選択し、「Clean」をクリックすると整形されます。

予めサイドメニューで、オプションを選択しておくことができます。

言語の選択

HTML・CSS・JS・APIから選択できます。

インデントの選択

インデントを下記のいずれかから選択できます。

  • タブ
  • スペース2
  • スペース3
  • スペース4
  • スペース8

 

TM – WebTools

上部にソースコードを貼り付け、「整形を行う」ボタンをクリックすると、下部に整形されたソースコードが表示されます。

こちらのサイトでも、「スペース2」「スペース4」のどちらか選択ができます。

 

まとめ

オンライン上で簡単にHTMLを自動整形できるツールをご紹介しました!

「とりあえず自動で整形したい!」「オプションまで指定しながら整形したい」など用途に合わせてサイトを使い分けていただくと便利に使えると思います!

もちろん、エディターに自動整形機能が装備されているのがベストだと思いますが、出先やエディタがないときでも簡単に整形できるので、ブックマークしておくと便利です。

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!