現役エンジニアが教える豆知識シリーズ~HTML整形~

小技タグ

現役エンジニアが教える豆知識シリーズ~HTML整形~

こんにちは!
現役エンジニアが教える豆知識シリーズです。

今回は、「HTMLの整形ツール」に関して
お話させていただきます!

現役エンジニアが教える豆知識シリーズ~HTML整形~

前回、HTMLのポイントとして
タグの閉じ方の順番についてお話しました。

今回は、知っていると便利な
「HTML整形ツール」をご紹介させていただきます!

「HTML整形ツール」とは、その名の通り
HTMLで書いたものを整形してくれるツールになります。

先ほど紹介した記事のソースコードをみてみましょう。

このように改行などがしっかりと表示されていて
見やすいところは良いですが、
サイトによってはそのような表示していない
ところもあります。

先ほどのコードを使ってメモ帳で再現してみました!
これだとなにがどこにあるのか分かりづらいですよね。

そんなときに便利なのが「HTML整形ツール」になります!
改行もない分かりづらいコードを用いると…

なんとこのように自動で整形してくれるのです!
どうです?
すごく分かりやすくなったと思いませんか?

このように、HTMLがコピペで簡単にきれいになるのです。
また、間違いをある程度修正してくれる
「HTML整形ツール」もあります。


HTMLはEC事業に切っても切り離せないもの…
ぜひ「HTML整形ツール」を活用してみてくださいね!

今回使用した「HTML整形ツール」はコチラ▽
https://lab.syncer.jp/Tool/HTML-PrettyPrint/

プチデバック機能付きの「HTML整形ツール」はコチラ▽
http://u670.com/pikamap/htmlseikei.php

関連記事一覧