インデント【無料】HTMLのコード整形ツール

2022年11月25日2024年6月19日

コーディングにはインデントを入れるルールがありますが、複数のエンジニアやコーダーが入ってコピー＆ペーストなどで編集した時、かなりインデントが乱れ、コードがわからなくなることがあります。

そんな時、カンタンにページのインデントを整形してくれるソフトがありますのでご紹介いたします。

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

その他、コーディングルールを以下に記述しておきます。

HTMLのコーディングルール

フォーマット
フォーマットについては以下のようにリストアップされています。

属性内のテキストは小文字
１行で１要素
ネストされた要素にはそれぞれ１レベルのインデントを入れる
link,script,style要素にtype属性を入れない
閉じタグは忘れずに入れる
brやhrなどセルフクロージング要素にスラッシュ入れない

HTMLのclassネーミング
id名やクラス名のつけ方は難しいことですが、重要なこと。機械的な名前をつけると、そのときは良くても後から見てこれ何？っていうことになる可能性大。

難しくする必要はなく、パッと見てそれが何か分かるようにすると良いと思います。例えばアイコンなら先頭にicon_をつけて後ろに配置場所を書くなどです。icon_side_title

CSSのコーディングルール

次はCSSルール。Githubのこちらに日本語化されたものがあります。ここでは特に重要なところだけ確認していきます。

CSSコメントのつけ方
忘れがち＆メンドクサイことですが、コメントは必ず入れるようにしましょう。他の人が見てすぐにわかるように、なぜこのスタイルが必要なのかなども入れておきます。以下はコメントのフォーマット。

CSSのフォーマットと宣言順
CSSのフォーマットも揃えておくと見やすくなります。大事なのは以下の部分。

複数セレクタがある場合、セレクタは１行ずつ記述
CSSは１行ずつ記述し、それぞれインデントをつける
宣言順は特定のルールに沿って決めること

javascriptのコーディングルール

さいごにjavascriptの記述ルール。こちらに日本語テキストがあります。非常に長いので重要なところだけ紹介します。

javascriptのスペース、改行、インデントの書き方
HTMLやCSSでもあったように、ホワイトスペースをスペースでやるかタブでやるかは自由です。大事なのは一貫性。中には１行で全て書く人もいますが、それが見づらくなっては意味がないのでできるだけ改行して、インデントもつけます。

クオート、行末と空行
シングルクオートにするか、ダブルクオートにするかはどちらでもOK。行末などに意味のないスペースを入れることはやめましょう。

javascriptのネーミング
CSSと同じくjavascriptのネーミングも分かりやすさを重視します。