PROLABLOG

プログラミング学習に
役立つ情報を
お届けしていきます。

  1. HOME
  2. ブログ
  3. 初心者つまずき解消
  4. 【HTML】インデントその⑤:入れ子とネストってなんですか?

【HTML】インデントその⑤:入れ子とネストってなんですか?

皆さんこんにちは!
プログラミング初心者さんがつまずきやすいポイントを丁寧に解説、解消していく「初心者つまずき解消ブログ」です。

4週に渡って解説してきました初心者がつまずきやすいインデントシリーズ、いよいよ最終回となりました。 この回もHTMLを参考に解説していきます。
(以前の記事が気になる方は下のリンクから読んでみてください。)

インデントシリース その①
インデントシリース その②
インデントシリース その③
インデントシリース その④

その①の中で、つまずきポイントは人それぞれあるとお伝えしました。

  • そもそもインデントが何かわからない。
  • どこにインデントを入れればいいかわからない。
  • 何が「親」で何が「子」かわからない。
  • いま半角スペースを自分で何個入れたかがわからない。
  • 入れ子とは?ネストとは?

今回は入れ子とネストについて解説していきます。


マトリョーシカってご存知ですか?
ロシアの民芸品で、人形の中から人形が出てくるあれです。あのマトリョーシカ人形のような構造を入れ子(いれこ)もしくはネストと言います。

実際にコードで見ていきましょう。

<body>
  <ul>
    <li>リストA</li>
  </ul>
</body>

body要素の中にul要素があり、ul要素の中にli要素があります。これが、HTMLにおける入れ子です。

上記のコードでは、<body>と</body>がセットになっていて大きいマトリョーシカの役割をしています。
その中の<ul></ul>のセットが小さいマトリョーシカ、その中にさらに小さいマトリョーシカの<li></li>のセットがある……というように入れ子構造を表現しています。

それでは、以下の例を見てください。
※構造的におかしい部分があります。

<body>
  <p>あいうえお</p>
  <ul>
    <li>リストA</li>
    <li>リストB
    </ul>
  </li>
</body>

このコードでは小さいマトリョーシカが大きいマトリョーシカを突き出てしまっています。こうなった場合はどこかがおかしいので、必ず見直して間違っているところを探しましょう。

答え:</ul>と2つ目の</li>の閉じる順序が逆です。

インデントシリーズのその③で親要素と子要素について解説しましたが、それらの関係性を理解して書けば上記のようなミスは起きないはずなので、しっかりと覚えておきましょう。

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


関連記事