受講料が最大70%OFF 受講料が最大70%OFF

HTMLの自動整形ツールを使い、読みにくいHTMLを整形しておくと、後からそのHTMLを直すことになった場合、とても楽です。また、読み易いHTMLの書き方が解らない、という方は、ぜひ、整形後のHTMLを真似て書けば、読み易いHTMLが書けるようになります。今回は、HTMLの自動整形ツールについて紹介します。

読み易いHTMLに整形するメリット

HTMLは、「」で囲ったタグをたくさん使い、Webページに表示するコンテンツを記述します。しかも、タグとタグの間に改行を入れずに書くことも可能です。そのため、書き方によっては、かなり読みにくいHTMLも書けてしまいます。

そして、そのような読みにくいHTMLを読み易くするのが整形です。次から、HTMLを整形するメリットについて解説します。

HTMLは読みにくい

他の人の書いたHTMLを編集することになり、あまりに読みにくいコードに閉口した経験のある方は、意外に多いのではないでしょうか。なお、HTMLは、Webブラウザが処理するための言語のため、人が読み易いようにはできていません。

特にHTMLのタグは「」で囲まれており、人が読んだ場合、その開始と終了が解り難いうえ、何重にも階層構造が作られていると同じタグが連続したりします。さらに、複数のタグを使ったHTMLが1行で書かれていたりすると、編集箇所を探すだけでかなり時間がかかってしまいます。

このように、HTMLは、人が読み易いコードではありません。そのため、普段から読み易いHTMLを書く習慣が必要です。ただし、自分にとって読み易いコードが、他の人にとっても読み易いとは限りません。そのため、一定のルールに従って整形することが重要であり、そのための自動整形ツールが使われることもあります。

HTMLの整形の基本はインデント

インデントとは、プログラムを読み易くするための空白、またはタグを使い、行の開始位置を右側にずらすことを言います。そして、プログラムでは、繰り返しループや条件分岐した際の処理などで、よくインデントが使われます。

このインデントは、HTMLでもよく使用されます。例えば、HTMLには階層を持つタグが幾つかありますが、そういったタグで続けて書いてしまうと、その構造が解り難くなるでしょう。そこで、下の階層を書く際、改行して行の開始位置を2文字または4文字ずらすことで、その階層構造が見やすくなります。そしてこれが、HTMLの整形の基本です。

インデントを適用した例

例えば、ulタグとliタグを使い、HTMLのリストを作った場合、次のように書けます。

インデントを意識しない書き方の例

<ul><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul>

しかし、これでは、後から修正しようとすうると、その構造が解り難くなります。そこで、インデントと改行を使って次のように整形してみましょう。いかがでほうか、見やすくなったのではないでしょうか。

インデントを意識した書き方の例

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

とはいえ、慣れていないと、どこを改行したり、インデントを入れたら良いのか解りません。そういった方は、自動で改行やインデントを入れてくれる自動整形ツールを活用しましょう。

HTMLを整形してくれるサイト

HTMLの整形を手軽に利用しようと思ったら、オンラインで誰でも無料で利用できるWebサイトがおすすめです。このようなサイトを使えば、HTMLをコピペするだけで、整形後のHTMLが表示されるので、ぜひ、利用してください。ただし、このようなサイトは、HTMLの整形とはどういったことかを知りたい方向け、または、HTMLを簡単に整形してみたいという方が利用するサイトです。業務で利用するなら、後述の別の方法を利用しましょう。

次から、代表的なサイトを紹介します。

Syncer Webツール

Syncerは、あらゆさんが公開しているHTML・CSS・JavaScriptの整形が可能なWebツールです。そして、HTMLなどのコードをコピペするだけで、即座に整形後のコードが表示されます。

HTMLのコード整形ツール

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

このサイトも個人の方が作成した、HTMLをコピペするだけで簡単に使えるシンプルなWebツールです。また、整形後、HTMLのバイト数や行数などを表示する機能もあります。

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

FREEFORMATTER.COM

このサイトは、英語のWebツールなので、何か難しいことが書いてあるのかと思われるかもしれません。しかし、使い方は、上の2つの日本語のサイトと同じで、HTMLをコピペするだけです。また、もちろん日本語も使えるうえ、サイズが大きい場合は、ファイルをアップロードして整形させることも可能です。

Free Online HTML Formatter – FreeFormatter.com

HTML編集ツールの自動整形を活用する

普段、HTMLを書くために、どのようなツールを使っているでしょうか。OS付属のテキストエディタとWebブラウザがあれば、最低限HTMLを作ることは可能です。しかし、プロとしてHTMLを作っている方なら、何か専用のツールを使うのが一般的です。

そして、そのHTML編集ツールに、自動整形が付いているのではないでしょうか。よく利用されているHTML編集ツールの自動整形について紹介します。

Dreamweaver

Dreamweaverは、Adobe社がサブスクリプションで提供しているプロ向けのHTML編集ツールです。同じAdobe社の画像編集ソフト、PhotoshopやIllustratorとの連携に優れており、ファイル管理機能など多くのメリットがあることから、多くのWeb制作会社が利用しています。

なお、DreamweaverはWebサイト開発専用の統合開発環境であり、HTMLを作るテキストエディタの他に、Webブラウザと同等の表示機能や文法チェック機能など、HTML開発に必要な機能が全て揃っているツールです。そして、そのようなDreamweaveには、「ソースフォーマットの適用」という機能があり、この機能を活用することで、乱雑に書かれたHTMLコードを、見やすく書き直してくれます。

Adobe Dreamweaverの購入 | webデザインソフトウェア

プログラム開発用の統合開発環境

プログラム開発を仕事にしている人なら、Visual Studio CodeやEclipseといった無料で使える統合開発環境を利用されている方が多いでしょう。このような統合開発環境は、HTMLやCSS、JavaScriptの開発にも対応しています。そして、HTMLを書く際に、自動整形機能が利用できます。

さらに、そのような統合開発環境では、HTMLとCSSを効率よく書くためのプラグイン、Emmetが利用可能です。ショートカットでインデント済のひな型コードを追加する、といったことができるので、ぜひ活用してください。

テキストエディタを使う

これまで説明したDreamweaverやプログラム開発用の統合開発環境は、高機能な分、パソコンに大きな負担をかけます。そのため、会社支給のパソコンにインストールして使うと、かなり遅いので不便、という方もいるでしょう。そして、そのような方の多くは、フリーで使えるテキストエディタを活用しています。

今、プログラム開発にも使われるオープンソースのテキストエディタは、マクロやプラグインなど、機能を追加可能です。そして、その中にはHTMLを自動整形してくれるマクロやプラグインがあります。テキストエディタが使いやすい、という方は、ぜひ、このようなマクロやプラグインを利用してください。

無料で使えるテキストエディタの例

サクラエディタ

Atom

統合開発環境のHTML整形をカスタマイズする

統合開発環境やテキストエディタのHTML整形を、デフォルト設定の状態で使うことも可能ですが、所属する会社やチームの方針に合っていないこともあります。そのような場合は、統合開発環境のHTML整形をカスタマイズして利用しましょう。

Visual Studio CodeのHTML整形のカスタマイズ

プログラム開発用の統合開発環境であるVisual Studio Codeは、HTML開発用としてもよく利用されています。そして、そのHTML整形機能は、Visual Studio Codeの設定ファイルのsettings.jsonを編集することで、修正可能です。

なお、このsettings.jsonは、HTML整形以外にもいろいろな設定で使われており、かなり大きなテキストファイルです。ネットの記事などを参考に修正して、その機能を試してみてください。また、会社やチームで同じ設定ファイルを使っている場合もあります。その場合は、詳しい方に設定内容を教えてもらいましょう。

まとめ

HTMLを書く仕事をするのなら、どのツールを使うかが重要です。それは、使っているツールによって、生産性にかなり差があるからで、プロなら効率良く作れる多機能な統合開発環境を使いこなしましょう。そして、そのような統合開発環境には、自動整形が付いています。ぜひ、自動整形も使いこなし、編集しやすいHTMLが作れるようになってください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。