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

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

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

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

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

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

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

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

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

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

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

u670.com

 

10 Shares

62 Users

75 Pockets

ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）

http://u670.com/pikamap/htmlseikei.php

HTMLのコード整形ツール SYNCER

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

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

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

ビューアー機能

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

インデント文字の設定

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

長すぎる行の改行

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

改行を保持

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

SYNCER

 

19 Users

37 Pockets

HTMLのコード整形ツール

https://lab.syncer.jp/Tool/HTML-PrettyPrint/

HTMLのコードに、適切なインデントと改行を付けて、見やすく整形するサービスです。難読化されたコードの分析などにお役立て下さい。

Source Code Beautifier

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

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

ctrlq.org

 

32 Shares

2 Users

144 Pockets

Online Code Beautifier for JavaScript, HTML, CSS and PHP

https://ctrlq.org/beautifier/

With Code Beautifier, you can pretty-print and syntax highlight source code written in JavaScript, HTML, CSS, PHP or other programming languages.

dirtymarkup

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

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

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

言語の選択

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

インデントの選択

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

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

www.10bestdesign.com

 

49 Shares

216 Users

155 Pockets

DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier

https://www.10bestdesign.com/dirtymarkup/

A free tool to clean up your dirty code. DirtyMarkup is the best HTML, CSS, and Javascript (JS) beautifier with an API to tidy up your code in an application.

TM – WebTools

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

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

tm-webtools.com

 

1 Pocket

TM - WebTools

http://tm-webtools.com/Tools/HTMLBeauty

このサイトでは簡単に使える便利なウェブツールを公開しています。うまく使うことでWeb開発や日々の作業を効率化することができます。

まとめ

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

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

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