HTMLのインデントのルールを解説!実際の例も紹介!

HTMLのインデントに関するルールについてタブなのかスペースなのかの話やGoogleやAirbnbなど実際の企業のインデントルールの例について紹介していきます。

コンテンツ [表示]

  1. 1HTMLのインデントとは?
  2. 2HTMLのインデントのルール
  3. 2.1タブかスペースか
  4. 2.2どこで改行インデントを行うか
  5. 2.3結局どうすべきか?
  6. 3HTMLのインデントのルールの例
  7. 3.1Google HTML/CSS Style Guide
  8. 3.2AirbnbのCSS/Sassスタイルガイド
  9. 3.3DropboxのCSSスタイルガイド
  10. 4まとめ

HTMLのインデントとは?

みなさんはコーディングする際にインデントを意識していますか?

インデントとはプログラムを書く際に読み手が読みやすいように、字下げを行い、コードを適宜揃える事です。

実際にインデント"していない例"と"している例"を見比べてみましょう。

インデントしていない例

<div class="wrap">
<ul class="list">
<li class="item">
<a href="">link1</a>
</li>
<li class="item">
<a href="">link2</a>
</li>
</ul>
</div>

インデントしている例

<div class="wrap">
  <ul class="list">
    <li class="item"><a href="">link1</a></li>
    <li class="item"><a href="">link2</a></li>
  </ul>
</div>

いかがでしょうか?インデントしていない例では何が書いてあるのか分かりづらく見る気もしませんよね。実際にインデントせずにコーディングしているとHTMLの閉じタグを忘れて表示が壊れたり、更にその原因究明にも時間がかかります。

一方でインデントしている例では字下げを行っているため、HTMLタグのタグの開始・閉じや、階層構造まで形から把握することが出来ます。

このようにプログラムを書く際にはインデントを適宜行い、自分にも他人にも見やすいコードを書くというのは基本になります。


では上記のサンプルでは字下げとして半角スペース2個で字下げを行っていますが、一般的にはどのようなインデントのルールがあるのでしょうか?

HTMLのインデントのルール

ではHTMLのインデントのルールについて紹介していきます。

タブかスペースか

まず考えるべきはタブなのかスペースなのか、どちらでインデントするのかの問題です。まずはサンプルコードで両者の違いを見てみましょう。

タブのインデント

<div class="wrap">
	<ul class="list">
		<li class="item"><a href="">link1</a></li>
		<li class="item"><a href="">link2</a></li>
	</ul>
</div>

上記のサンプルではTabキーで入力できるタブ文字を使ってインデントしている例です。

半角スペースのインデント

<div class="wrap">
  <ul class="list">
    <li class="item"><a href="">link1</a></li>
    <li class="item"><a href="">link2</a></li>
  </ul>
</div>

一方こちらの例は冒頭と同じく半角スペース2個分でインデントした例です。

人によって見やすい・見にくいはあると思いますが、正直どちらが正解というのはありません。実際の現場でもタブ派・半角スペース派が存在しています。

いずれにせよタブ・半角スペースを混在させるのはありませんので、タブなのかスペースで行くのかは現場のルールがあればそれに従うようにしましょう

またエディターによってはタブを自動でスペース2個or4個に変換するような設定もあります。ぜひお使いのエディターでインデントの設定を現場のルールとあわせる事をプログラムを書く前に行いましょう。

どこで改行インデントを行うか

次に改行について考えてみます。まずは下記のサンプルコードを見てみましょう。

どこで改行するか

<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

<ul>
  <li>
    London
  </li>
  <li>
    Paris
  </li>
  <li>
    Tokyo
  </li>
</ul>

上記のコードのように、HTMLタグでもどこで段落下げさせるかというのはエンジニアによって結構違いがあります。更にHTMLでは改行が入ることで、実際のブラウザで表示したときに謎のスペースが現れるなどコーディングルールによって思わぬ問題が発生することもあります。

例えば下記の例を見てみましょう。

この例ではspanタグを別の行で書いている前者では間にスペースが生まれています。一方で改行させずに記述している後者では間にスペースが生まれていません。

ちなみにこの問題は下記のように親要素を設け、親要素の文字サイズを0にして、子要素で文字サイズを改めて設定することで回避出来ます。

結局どうすべきか?

ルールがバラバラで各エンジニアが好きなようにマイルールでコーディングしていると、チームで動いたり新たなメンバーが入ってきた時に停滞する原因となりえます。

インデントのルールに絶対的な正解はありませんが、ぜひ統一したルールを最初に設ける様にしましょう。


ではこの章で見てきたルールについて他の企業ではどのようなルールが決められているのか紹介していきたいと思います。

HTMLのインデントのルールの例

Google HTML/CSS Style Guide

GoogleではHTML/CSSのスタイルのガイドを紹介しています。

下記よりアクセスすることが出来ます。インデント以外にも様々なルールが定められていますので、ぜひこれからルールを作ろうかと思っている方は参考にしてみて下さい。

Google HTML/CSS Style Guide

Googleのインデントはスペース2つ!

さてGoogleですが、インデントは半角スペース2つで行っているようです。タブは混ぜないようにという注意書きもあります。

Googleのインデントの例

<ul>
  <li>Fantastic
  <li>Great
</ul>

ちなみにCSSも同じくインデントはスペース2つです。

CSSのインデント

.example {
  color: blue;
}

AirbnbのCSS/Sassスタイルガイド

続いてAibnbのCSS/Sassのスタイルガイドです。

GitHub - airbnb/css: A mostly reasonable approach to CSS and Sass.
A mostly reasonable approach to CSS and Sass. Contribute to airbnb/css development by creating an account on GitHub.

Airbnbもスペース2つ分で字下げとしています。

AirbnbのCSSのインデント

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

DropboxのCSSスタイルガイド

続いてDropboxのCSSスタイルガイドです。

GitHub - dropbox/css-style-guide: Dropbox’s (S)CSS authoring style guide
Dropbox’s (S)CSS authoring style guide. Contribute to dropbox/css-style-guide development by creating an account on GitHub.

Dropboxではスペース4つをインデントとしてルールを決めています。

DropboxのCSSのインデント

.u-l-island {
    padding: 32px;
}

まとめ

いかがでしたでしょうか。インデントに関してルールやGoogleやAirbnbなどの実際の企業のルールの例を紹介してきました。

これからルールを作ろうという方はぜひインデント以外の部分についてもGoogleなど実際のコーディングルールを公開しているところを見てその上で決めると、一貫性のある現場でも使いやすいルールが出来上がります。

ぜひ参考にしてみて下さい!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次