弊社で統一して使用しているエディタには、自動整形機能がついているのですが、出先や自分のPCではないときにHTMLをサクッと整形したいときに使えるツールをご紹介したいと思います。WebToolsまとめソースコードの整形とは?HTMLのコードに、適切なインデントと改行を付けて、見やすく整形することです。整形をすることにより、可読性も上がりますし、別のコーダーが編集するときも見やすく編集しやすいのが利点です。自分で手動で整形していくこともできるのですが、ソースコードが長い場合は面倒ですよね。そんなときに使えるのが、自動整形ツールです。HTML整形ツール(プチ・デバッグ機能付き)上部に元ソースを貼り付け、中央にある「整形」ボタンを押すと、下部に整形されたソースコードが表示されるシンプルで使い勝手の良いツールです。こちらのサイトでは単にHTMLを整形するだけでなく、不完全なタグが見つかると、対象タグの一覧を表示するプチデバッグ機能も搭載されています。HTMLをすっきり整形させるだけでなく、デバッグも兼ねたいときにおすすめです。SYNCERHTMLコードに適切なインデントと改行を付けて、確認しやすく整形してくれます。使い方も簡単で、「変換前」のフォームに、コードを入力するか、ファイルをドロップするだけで、「変換後」のフォームに変換結果が表示されます。オプション設定も豊富で、カスタマイズして整形したい方におすすめです。入力したコードをこのページ上で確認してしまいたいときに便利なビューアー機能が搭載されています。インデント文字の設定インデント文字と、その個数を設定することができます。長すぎる行の改行1行が長すぎる場合、適切な場所で改行してくれます。既存の改行を保持するか、削除するか選択できます。PocketsHTMLのコード整形ツールhttps://lab.syncer.jp/Tool/HTML-PrettyPrint/HTMLのコードに、適切なインデントと改行を付けて、見やすく整形するサービスです。難読化されたコードの分析などにお役立て下さい。Beautifier海外のサイトですが、非常にシンプルで使い勝手が良いです。Code」のボタンをクリックすると枠内でコードが整形されます。こちらのサイトでは、HTMLだけでなく、JavaScript、XML、CSS、およびPHPを含むすべての一般的な言語のソースコードを理解し、フォーマットすることができます。languages.dirtymarkupこちらも海外のサイトです。右側にソースコードを貼り付け、オプションを選択し、「Clean」をクリックすると整形されます。サイドメニューで、オプションを選択しておくことができます。言語の選択HTML・CSS・JS・APIから選択できます。インデントの選択インデントを下記のいずれかから選択できます。WebTools上部にソースコードを貼り付け、「整形を行う」ボタンをクリックすると、下部に整形されたソースコードが表示されます。こちらのサイトでも、「スペース2」「スペース4」のどちらか選択ができます。WebToolshttp://tm-webtools.com/Tools/HTMLBeautyこのサイトでは簡単に使える便利なウェブツールを公開しています。うまく使うことでWeb開発や日々の作業を効率化することができます。まとめオンライン上で簡単にHTMLを自動整形できるツールをご紹介しました!「とりあえず自動で整形したい!」「オプションまで指定しながら整形したい」など用途に合わせてサイトを使い分けていただくと便利に使えると思います!もちろん、エディターに自動整形機能が装備されているのがベストだと思いますが、出先やエディタがないときでも簡単に整形できるので、ブックマークしておくと便利です。フロントエンドエンジニア・デザイナーの社員Aです。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。人気記事Posting....。