【HTMLのテクニック】インデントを覚えてコードを綺麗に見せよう

web兄さん

htmlを勉強する初心者に覚えて欲しいインデントと呼ばれる字下げのテクニックについて解説します。本記事を読むことでインデントの使用目的と基本的な使い方を学習できる他、WEB制作現場ではどのように使われているのか実践的な使い方も身につけることができます。

インデントとは？

インデントとはもともと文章の先頭を字下げするという意味です。wordでは文章の内容の変わったタイミングで段落の最初にスペースを空けますよね。あれがインデントです。

htmlでも字下げをすることをインデントと呼びますが、文章ではなくタグの頭を字下げします。

タグを字下げすることはイメージしにくいので以下の例で確認して見ましょう。

インデントしていないコード

<div>
<h1>私の好きな食べ物</h1>
<ul>
<li>ラーメン</li>
<li>お寿司</li>
<li>焼肉</li>
</ul>
</div>

インデントしてあるコード

<div>
    <h1>私の好きな食べ物</h1>
    <ul>
        <li>ラーメン</li>
        <li>お寿司</li>
        <li>焼肉</li>
    </ul>
</div>

インデントしてあるコードの方が入れ子構造（ネスト）がわかりやすく、みやすいと感じたのではないでしょうか？

このように入れ子構造になっているタグの頭を字下げすることで

親子関係にあるタグが一目見てわかる
開始タグと対応している閉じタグがわかりやすい

というメリットがあります。

インデントの２つの入力方法

それではインデントの使い方について解説していきます。

まずはインデントの入力方法についてです。インデントには「tabスペースの入力」または「半角スペースの入力」という2つの方法での入力があります。

それぞれインデント部分をフォーカスしてみるとわかりますが、tabは1つのスペースとして、半角スペースは細かいスペースとして入力されていますね。どちらも実際の制作現場でよく使われているのでどちらが正解とはいうことありません。

ただ、それぞれの入力方法にはメリットとデメリットがあります。

入力方法	メリット	デメリット
tab	入力が簡単	環境によってタブの幅が違うので見た目が変わる
半角スペース	半角スペース幅はどの環境でも見た目が変わらない	入力回数が多いので手間

これらのメリット・デメリットを踏まえた上で、本記事では筆者のオススメするtabでの入力方法を紹介します。tab入力のデメリットである閲覧環境によって見た目が変わるデメリットを解消する方法も解説するので安心してください。

tabキーの場所

おそらくweb初心者の方のほとんどが「tabキー」を使ったことがないと思うので入力方法から説明していきます。

tabキーはキーボードの左上にあります。全角入力モード、半角入力モードになっていても同じように入力することができます。

tabキーの場所がわかったところでインデントの入力ルールを解説していきます。

インデントの入力ルール

それではインデントをどう入れていくかを解説していきます。基本的なルールは２つです。

親子の関係になるごとにタグを字下げする
開始タグと閉じタグの位置（ライン）を揃える

それぞれ説明していきますね。

親子の関係になるごとにタグを字下げする

htmlではタグの入れ子の外側にあるものを親要素、内側にあるものを子要素と呼びます。タグの関係が親子関係にある場合はtabキーを1回押してインデントをつけましょう。

お使いのテキストエディタが「sublime text」ならtabキーを1回押すごとに半角スペース4つ分のスペースが入ります。

開始タグと閉じタグの位置を揃える

インデントをするときは必ず開始タグと対応している閉じタグの縦のラインを揃えます。

例では<div>と</div>、<ul>と</ul>の縦のラインが揃っていますよね。こうすることでタグの入れ子構造（ネスト）がとてもわかりやすくなりますよね。

インデントをしなくてもいいケース

実はインデントをする必要がないケースもあります。
例えば次のように一行がとても短いような場合はインデントをせずにそのまま一行で書いたほうが見やすくコードがスッキリします。

<a href="http://sample.com"><img src="images/dog.png"></a>

その他にもこんなケースもあります。

<table>
    <tr><th>名前</th><td>のびた</td><td>ジャイアン</td></tr>
    <tr><th>性別</th><td>男の子</td><td>男の子</td></tr>
    <tr><th>特技</th><td>寝る</td><td>カラオケ</td></tr>
</table>

tableタグを使った場合はブラウザでの表示結果で一行となるtr、th、tdをインデントせずに一行でコーディングしたほうが項目を管理しやすくなります。