【全部無料】HTMLを自動整形してくれるツール9選



【全部無料】HTMLを自動整形してくれるツール9選

あれ?このタグどこのタグ?いま自分がどこの部分を書いているのかわからない!エラーになってレイアウトが崩れてる!・・・HTMLを書いていると、どんどんタグが複雑化して、閉じ忘れや書き損じのミスも出てきてしまいますね。そんなミスは、HTMLをキレイにわかりやすく書くことで減らすことができます!

今回紹介するツールを使ったHTMLの自動整形を使えば、すっきりキレイ。ミスを減らしたい!方や、どうすればわかりやすくなるんだろう?と悩んでいる方におすすめですよ!

目次
  1. HTMLの自動整形ツールって?
  2. タグをインデントする
  3. 閉じるタグを自動生成する
  4. 書き損じやミスを教えてくれる
  5. コードを補完する
  6. マクロが記録できるものも
  7. フリーの自動整形ツール、インストールエディタ編5選!
  8. サクラエディタ
  9. Sublime Text
  10. Atom
  11. eclipse
  12. Chrome
  13. フリーの自動整形ツール、オンラインツール編4選!
  14. HTML整形ツール
  15. Source Code Beautifier
  16. TM-Web Tools
  17. Dirty Markup
  18. まとめ

HTMLの自動整形ツールって?

HTMLはOSに最初からインストールされている「メモ帳」のようなテキストエディタでも書くことができます。しかし、HTMLを書くことに特化した「エディタ」を使うと、より便利にコードを書くことができ、ミスも減らせる様々な機能がついています。

エディタに搭載されている、主な機能について紹介します。

タグをインデントする

文章で、段落ごとに文字を下げて書くことをインデントと言います。HTMLのタグも同じように、構造に合わせて文字を下げることで、どの部分のタグかをわかりやすくすることができます。一般的にHTMLの整形というと、タグをインデントを使ってわかりやすく編集することを言います。 image

閉じるタグを自動生成する

<html></html>のように、始まりのタグと終わりのタグをセットで書くタグが多いですね。そのようなタグの場合、エディタによっては始まりのタグを書くと終わりのタグ(閉じるタグ)を自動で追記してくれる機能を持っているものがあります。HTMLを書くスピードもアップしますが、閉じ忘れ防止にも役立ちますね!

書き損じやミスを教えてくれる

htmlをhtnlと書いてしまった!など、うっかりタイプミスしてしまうこともありますよね。そんな綴りの間違いに気づいて警告を出してくれる機能をもつエディタもあります。バグが出てから人の目で探すより、とても効率的ですよね。

コードを補完する

スマホの入力支援のように、タグの入力途中で候補となるタグを表示してくれる機能があるものもあります。この機能はコード補完と呼ばれます。

マクロが記録できるものも

Excelのようにマクロを登録することができるエディタもあります。決まったタグを貼り付けたり、定期的に文章をHTML化したり・・・などルーチンワークがある場合は利用すると便利です。

フリーの自動整形ツール、インストールエディタ編5選!

今回紹介するツールは、全て無料で利用できます!

サクラエディタ

image image

画像出典:サクラエディタ

  • 公式サイト:https://sakura-editor.github.io/
  • インストール/オンライン:インストール(Windowsのみ)
  • 対応言語:HTML、CSS、JavaScript、Java、C/C++、VBなど
  • コーディング補助:コード補完など

サクラエディタは、国産フリーエディタです。HTMLだけでなく、たくさんのプログラミング言語に対応しています。シンプルな見た目と使い勝手ですが、細やかな設定が可能なので、入門者からプロまで人気のあるエディタです。

弊社参考記事:サクラエディタ初心者なら必ず入れたい便利機能3選

Sublime Text

image

画像出典:Sublime Text

  • 公式サイト:https://www.sublimetext.com/
  • インストール/オンライン:インストール(Mac,Windows,Linux)
  • 対応言語:HTML、CSS、JavaScript、Java、C/C++、VBなど
  • コーディング補助:コード補完など

スタイリッシュなデザインと機能の拡張性が人気のSublime Text。ユーザーがプラグインを作って投稿することができ、多くの便利機能から自分の好みに合わせてエディターをカスタマイズすることができます。HTMLの整形ができるプラグインでは、HTML-CSS-JS Prettifyが有名です。

Atom

image

画像出典:Atom

  • 公式サイト:https://atom.io/
  • インストール/オンライン:インストール(Mac,Windows,Linux)
  • 対応言語:HTML、CSS、JavaScript、Java、C/C++、VBなど
  • コーディング補助:コード補完など

Sublimeと双璧をなす人気エディタのAtomです。こちらも、ユーザーが作ったプラグインを自由にインストールして、好きな機能を盛り込むことができる、とてもカスタマイズ性の高いエディタです。HTMLの整形ができるプラグインとして有名なものはformatter-jsbeautifyがあります。

eclipse

image

画像出典:eclipse foundation

  • 公式サイト:https://atom.io/
  • インストール/オンライン:インストール(Mac,Windows,Linux)
  • 対応言語:HTML、CSS、JavaScript、PHP、Javaなど
  • コーディング補助:コード補完、プレビューなど

eclipseはツール上でWebサーバーを起動しての画面プレビューができるなど、プロも利用する機能が満載の統合開発環境です。Javaとの相性が良いためJavaやJSP、PHPの開発によく使われますが、もちろんHTMLの整形もできます。コードの整形のショートカットキーは、Windows・Linuxは「Ctrl+Shift+F」、Macの場合は「⌘Command+Shift+F」です。

Chrome

実は普段見ているブラウザChromeにも、隠れた整形機能があります。HTMLのテスト中にちょっとだけ確認したい時などに便利!

image 「その他のツール」>「デベロッパーツール」を起動します。

image HTMLなど整形したいファイルを表示させます。画面左下の{ }ボタンを押すと、HTMLやCSSが自動整形されて表示されます。

  • 公式サイト:https://atom.io/
  • インストール/オンライン:インストール(Mac,Windows,Linux)
  • 対応言語:HTML、CSS、JavaScript
  • コーディング補助:エラー検出

フリーの自動整形ツール、オンラインツール編4選!

HTML整形ツール

image

画像出典:PIka's Home

個人の方が作成された、ブラウザ上で手軽にHTMLの整形ができるツールです。タイプミス、閉じ忘れなどがあるとエラータグとして検出される「プチデバッグ」機能つき。

Source Code Beautifier

image

画像出典:Source Code Beautifier

  • 公式URL:https://ctrlq.org/beautifier/
  • インストール/オンライン:オンライン(ブラウザ)
  • 対応言語:HTML、JavaScript、PHPなど
  • コーディング補助:エラーのタグを赤文字表示

インドのIT企業が立ち上げているソースコード整形サービスです。シンプルで美しいですね!閉じ忘れやタイプミスのあるタグは赤文字で表示してくれます。

TM-Web Tools

image

画像出典:TM-Web Tools

  • 公式URL:http://tm-webtools.com/Tools/HTMLBeauty
  • インストール/オンライン:オンライン(ブラウザ)
  • 対応言語:HTML、CSS、XML、JSONなど
  • コーディング補助:エラータグ検出

個人の方が作成されているサイトです。ファイル整形、ファイル圧縮、URLエンコードなどWeb製作に関連した様々なツールを掲載してくださっています!HTMLの整形ページでも、エラーまで検出してくれてとても便利です。

Dirty Markup

image

画像出典:Dirty Markup

  • 公式URL:https://www.10bestdesign.com/dirtymarkup/
  • インストール/オンライン:オンライン(ブラウザ)
  • 課金:なし
  • 対応言語:HTML、CSS、JavaScript
  • コーディング補助:整形時自動修正

カリフォルニアのWeb制作会社10BestDesign社が製作したツール、Dirty Markup。AtomやSublime Textのような綺麗なブラウザ画面でHTMLを整形してくれます。タブでインデントするか、半角スペースを使うかなどが選べるのも親切ですね。タグの色分けもとても見やすいです。

タグの閉じ忘れやタイプミスがあると強調表示され、整形時に自動で修正してくれます。また、文章を貼って「Clean」を押すと、HTMLのヘッダーなどをつけてHTMLファイルにしてくれます。

まとめ

わかりやすくきれいなHTMLは、ミスを減らすだけでなく、作業全体をスピードアップしてくれますよ!どんどん使って実力もアップしていきましょう!

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp