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

公開日：2020-09-30 15:07:45
最終更新日：2020-11-17 22:04:11

Workteria(ワークテリア)では難易度の高いものから低いものまで、スキルや経験に合わせた案件を多数揃えています。会員登録は無料ですので、ぜひ会員登録してご希望の案件を探してみてください！

フリーランス／正社員のエンジニアとして活躍するには、ご自身のスキルや経験に合わせた仕事を選ぶことが大切です。ご希望の案件がみつからない場合はお気軽にお問い合わせください！ユーザ満足度の高いキャリアコンサルタントが在籍していますので、希望条件や悩み事などなんでもご相談ください。ご希望にピッタリの案件をご紹介させていただきます。

案件一覧を見る非公開案件を紹介してもらう

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

ここでは、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コードの構造が分かりやすくなりました。

【著者】

たけまえ

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

編集した記事一覧

正社員／フリーランスの方でこのようなお悩みありませんか？

自分に合う案件を定期的に紹介してもらいたい
週2、リモートワークなど自由な働き方をしてみたい
面倒な案件探し・契約周りは任せて仕事に集中したい

そのような方はぜひ、Workteriaサイトをご利用ください！

定期的にご本人に合う高額案件を紹介
リモートワークなど自由な働き方ができる案件多数
専属エージェントが契約や請求をトータルサポート

案件一覧を見る非公開案件を紹介してもらう

よく読まれている記事

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

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

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

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

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

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

目次