インデント(字下げ)でHTMLコーディングを分かりやすく示す【HTMLの書き方入門】

下図、２枚のHTMLファイルを見て下さい（クリックで拡大可能）。
書いてある内容は全く一緒ですが、右の方が「何の要素の中に」「何が含まれているか」がわかりやすくありませんか？

右のHTMLのように、字下げを使って構造を示すことを「インデント」と言います。

• インデントとそのメリット
• インデント方法とルール
• インデントの入力方法
• インデントを付ける時のルール

インデントとそのメリット

インデントとは、文章の行頭に空白を挿入して段を下げた“字下げ”のことです。
HTMLアークアップやプログラミングなどでは、読みやすいようにインデントを入れてコードを整える、ということを行います。

HTMLの場合は、インデントをつけることで、コードの入れ子構造・どの開始タグに対する閉じタグかを分かりやすく示します。
例として、以下のコードを見てください。

<header><h1>エドベース株式会社</h1><nav><ul><li>ホーム</li><li>会社概要<li>お問い合わせ</li></ul></nav></header>

改行も字下げもなく、1行でヘッダー部分を書いてみました。
ものすごく分かりにくいですね。

実は、会社概要の後の</li>タグが1つ抜けているのですが、分かりましたか？

インデントを付けると、下記のようになります。
コードの方が入れ子構造（ネスト）や、終了タグ抜けが分かりやすいですね。

<header>
    <h1>エドベース株式会社</h1>
    <nav>
        <ul>
            <li>ホーム</li>
            <li>会社概要
            <li>お問い合わせ</li>
        </ul>
    </nav>   
</header>

今回作っているedbaseのサイトでは、そこまで入れ子構造が深くありません。
ですので、開始タグと終了タグの関係性、という部分はピンとこないかもしれません。

が、複雑なデザインのページでは、下図のようなコードを書くこともあります。
</div>が７個も連なっていますね。

もし、このコードで</div>が1つ抜けていて表示が崩れてしまっていたらどうでしょう。

開始タグと終了タグの位置があっていれば、すぐに直すことが出来ます。
しかし、インデントが正しくない場合は「このdivは閉じているな」と1つずつ確認していかなくてはいけません。大変ですね。

自分一人なら大変なだけですが、チームで制作する時・クライアントに納品する場合は、嫌がられます。
インデントが乱れていると、構造も分かりにくく、修正や更新もしにくいからです。

逆から言えば、きれいなコードを書ける＝高評価ポイント。
今からインデントを意識して、綺麗に整えるクセをつけましょう！

インデント方法とルール

では、実際にインデントを付けるための方法を見ていきましょう。

インデントの入力方法

インデント（字下げは）tabキーもしくは半角スペースで入力します。
基本的には、どちらを使用しても良いです。
どちらも使う方もいらっしゃいます。

●全角スペースにご注意

画面に表示させるテキストとして、日本語という全角の文字も私達は入力します。
ブラウザで半角スペースはインデントと認識されますが、全角スペースは文字と認識されてしまいます。

下図のスクリーンショットは、一見、問題なくインデントが付いているように見えます。

ですが、ブラウザで表示すると下図のようになりました。
「お問い合わせ」が離れてしまっていますね。

これはインデントの中に全角スペースが紛れ込んでいるため、起こっています。
テキスト部分をドラッグで選択状態にしてみると分かりやすいです。

エディタでも、選択状態にして反転させると、インデントと全角スペースの区別が付けやすいです。
インデント入力方法によって見え方に違いはありますが、全角スペースが入ってしまっている部分は“空白”になっています。

全角と半角の切り替えを忘れたま、インデントを入力してしまうことがあるかもしれません。
すると上例のようにレイアウトが崩れてしまうので、tabキーの方が間違いは起こりにくいでしょう。

インデントを付ける時のルール

インデントを設定する時、必ず守るべきルールは３つ。

• 開始タグと終了タグの位置を揃える
• 字下げの量（下げ幅）は一定にする
• 字下げ＝親子関係を示すものにする

インデントは入れ子（要素の親子関係）や、開始タグと終了タグの関係性を示します。
そのためNG例のようにズレてしまうと「あれ? このタグは終了していない?」「抜けているタグがあるのかな?」と誤解の元になります。

最後の親子関係ですが、これは「そのタグの中に入っているか否か」を示します。
例えば、見出し（Hタグ）と文章（pタグ）はそれぞれ独立しています。

HTMLの構造上は親要素・子要素の関係では無いので、インデントはつけません。
下図のように書きます。

改行する? しない?

短いコード、例えばリンク箇所など1行で収まるような短い箇所は、そのまま書いても良いです。
もちろん、改行+字下げを行なっても構いません。

hタグやpタグの中身も人によって改行する、しないが分かれます。
ここもお好きな方で構いません。

現場のルールに従う

お仕事になると、職場やクライアントから指示をされることもあります。
コーディングのルールが設定されていれば、そのルールに従って記述しましょう。

例）

• インデントは半角スペース２個分
• pタグのところも改行しインデントをつける

Skillhubのレッスンや課題では、特にルールはありません。
ご自身が自分が書きやすい・見やすい方法をお使いください。

インデントが整っているか、作成したindex.htmlを見直してみましょう。