HTML・CSS独学応援 2-6 「ドキュメントツリー」と「インデント」

  • ドキュメントツリーのイメージを持つ
  • インデントについて知る

以上の2点が今回の内容になります。

書籍などでも、登場する言葉で、
知っていると学習がスムーズになりますので解説していきます。

ドキュメントツリー

HTMLは「入れ子構造」になっています。
この関係をツリー状に示したものが「ドキュメントツリー」です。

プログラムが、どんな構造か示したイメージ図のようなものです。

「入れ子構造」とは?

HTMLは「入れ子」
っていう構造をしています。

大きな枠の中に、
小さな枠が入っているイメージです。

外の枠のことを「親要素」
中の枠のことを「子要素」っていうよ。

こうやって要素ごとに分けると
HTMLがどんな構造をしているのかわかりやすいですね。

また、後々学ぶCSSで、
どの部分にどんな効果を付けるのか考える時に
この構造がイメージできていると学習がスムーズになります。

実際にコードを書く時にも、「入れ子構造」が
分かるように書いておくと、便利です。

そのための方法が「インデント」になります。

インデント

コードの中に、空白を打ち込むことで
HTMLの構造を見やすくします。

下のコードは、インデントしないで、書いたものです。

このコードだけを見て、
要素同士の関係をイメージするのは難しいですね。

<!DOCTYP html>
<html lang = "ja">
<head>
<meta charset = "UTF-8">
<title></title>
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>

これにインデントを入れてみましょう。
こんな感じになります。

<!DOCTYP html>
    <html lang = "ja">
        <head>
            <meta charset = "UTF-8">
            <title></title>
        </head>
        <body>
            <h1></h1>
            <p></p>
        </body>
    </html>

どうですか?
だいぶ見やすくなりましたね。

「入れ子構造」を
視覚的に把握しやすいコードになりました。

親子関係にある要素の頭に
空白を挿入して、見た目を整える。

これが「インデント」です。

空白の数は
半角スペース4つ単位で使われることが多です。
↓↓こんな感じのイメージです。

まとめ

インデントを使って見やすくコードを書くことで
学習がスピードアップします。

今後学ぶCSSで、どの部分に効果を付けるか考える際にも
インデントしたコードならば、構造がイメージしやすく
スムーズに学習が進んでいきます。

他にも、インデントされていないコードでは
思わぬエラーの原因になりますし、
エラーの改善が難しくなります。

今は面倒に感じるかも知れませんが
ぜひ「インデント」を使ったコードを心がけてください。

ドキュメントツリー

HTMLがどんな構造になっているかを
まとめたイメージ図

インデント

コードを書く時に、見やすくするための余白

© 2021 ーれおの部屋ー