検索

キーワード


【HTML】コード整形について

  • 公開日:2020-09-30 15:07:45
  • 最終更新日:2020-11-17 22:04:11
【HTML】コード整形について

こんにちは。駆け出しエンジニアの竹前です。

ここでは、HTMLのコード整形について説明します。

HTMLについて勉強している方の参考になれば幸いです。


コード整形とは

HTMLのコード整形は、HTMLの入れ子構造にあわせて改行を入れたり、半角スペースやタブで字下げ(インデント)を入れたりすることをいいます。

コード整形を行うことで、コードの可読性が向上し、作業効率が上がります。


なぜコード整形すべきか

HTMLは、改行やインデントを入れなくても、ページそのものは表示されます。

しかし、改行やインデントがないコードは構造が分かりにくくなります。

その結果、コードを修正する際に修正箇所が見つかりにくく、作業効率が悪くなります。

また、コード記述の際に必要なタグの数が合わず、記述ミスが起こる恐れもあります。

そのため、コード整形を行うことで構造を分かりやすい状態にしておく必要があります。


コードの整形方法

コード整形を行う前のサンプルコードは以下の通りです。

<body>
<h1>コード整形</h1>
<ul><li>リスト1</li><li>リスト2</li><li>リスト3</li><li>リスト4</li><li>リスト5</li></ul>
</body>


コード整形を行う前のhtmlの表示

コード整形はされていませんが、Webページは正常に表示されています。


では、上記のサンプルコードのコード整形を行います。

まず、タグごとに改行を入れます。

<body>
<h1>コード整形</h1>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
</body>


次に、入れ子になっているタグ(別のタグに囲まれているタグ)には、インデントを入れるようにします。

例えば、上記のサンプルコードの場合、<h1>~</h1>タグ、<ul>~</ul>タグ、<li>~</li>タグは、<body>~</body>タグに囲まれているので、インデントを入れ、1段階字下げします。

また、<li>~</li>タグは、<ul>~</ul>タグに囲まれているので、さらにインデントを入れ、もう1段階字下げします。

インデントを入れる方法は半角スペースを入れるやり方とタブを入れるやり方がありますが、コード内で統一するようにします。(以下のサンプルコードではタブを入れています。)


サンプルコードを整形した結果は以下の通りです。

<body>
	<h1>コード整形</h1>
	<ul>
		<li>リスト1</li>
		<li>リスト2</li>
		<li>リスト3</li>
		<li>リスト4</li>
		<li>リスト5</li>
	</ul>
</body>


コード整形を行った後のhtmlの表示


Webページの表示に変化はありませんが、HTMLコードの構造が分かりやすくなりました。



【著者】

たけまえ

駆け出しエンジニアの竹前です。 私自身が勉強したことをもとに、難しい内容はできるだけ簡単になるように読みやすく、分かりやすい記事を心がけています。

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ