- ドキュメントツリーのイメージを持つ
- インデントについて知る
以上の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がどんな構造になっているかを
まとめたイメージ図
インデント
コードを書く時に、見やすくするための余白