41人がいいねしました

更新日

入れ子構造をイラストを使ってわかりやすく説明!

web兄さん

HTMLを学習するにあたって避けて通れない入れ子構造という概念についてイラストを使ってわかりやすく解説していきます。

入れ子構造とは?

HTMLの話を抜きにすると「入れ子」とは本来、「同じような形状だけど大きさの違うもので囲い、それを繰り返すこと」を指します。身近にある入れ子といえばマトリョーシカがもっとも有名でしょう。

マトリョーシカのように大きな容器で順番に囲っていくことを入れ子と呼ぶ

HTMLでの入れ子構造

さて、入れ子構造の基本的な意味がわかったところでHTMLでの入れ子構造について解説していきましょう。まずはHTMLでの入れ子構造がどんなものを指すか確認して見ます。

開始タグと閉じタグで囲うことを入れ子と呼ぶ

HTMLには開始タグと閉じタグで囲っていくというルールがありますが、単にテキストを囲うだけでなく「テキストを囲っているタグをさらに別のタグで囲う」ということができます。

イラストでいえばh3ulpといった要素がdivで囲われていますね。このように要素をまた別のタグで囲うことを入れ子にするといいます。この呼び方以外にも、入れ子の英訳の「ネスト」を用いて「ネストする」と言ったりします。

※「要素 = <タグ>◯◯</タグ>(タグで囲まれた部分全体)」

入れ子にはルールがある

入れ子はいくらでも囲ってOKですが、一つ注意しなければいけいないルールがあります。

それは別のタグの閉じタグとクロスしてはいけないということです。

入れ子には別の閉じタグとクロスしてはいけないルールがある

マトリョーシカが頭と胴体が同じものでないときっちりはまらないように、HTMLでも開始タグと閉じタグがしっかりと対応していないとブラザウでの表示が崩れてしまいます。そのため囲った際に別々の閉じタグがクロスしないように注意しましょう。

囲っていい要素とダメな要素

HTMLで入れ子をする場合、囲っていいタグ、囲ってはダメなタグというものが存在します。

htmlには囲っていいタグ、囲ってはダメなタグがある

divはほぼすべての要素を囲うことができますが、ph1〜h6などの見出し要素を囲うことができません。このようにタグごとに囲うことのできる要素というのが世界基準のルールで統一されています。

すべてを覚えるのは大変なのでこちらの記事を保存して、HTMLを練習していく中でなんども確認することをおすすめします。

親要素、子要素という関係性

htmlの入れ子には親要素と子要素という関係性があります。マトリョーシカで言えば

  • 囲っている入れ物が親
  • 囲われている入れ物は、囲っている入れ物に対しての子

というように表現できます。

中にある要素はすべて子要素

htmlでも同様に囲っている側を親要素囲われている側を子要素と呼びます。

ただ、マトリョーシカと違いhtmlでは入れ子を多重構造にできるという点に注意しましょう。

多重構造を理解するためにイラストのulに注目してみます。「子+親」と書かれていますね。h3pdivの子要素だけであるのに対して、uldivの子要素であるとともにliの親要素でもあります。

このようにhtmlでは無制限に入れ子構造をつくっていくことができ、これを入れ子の多重構造といいます。また入れ子構造が重なることを「入れ子の階層が深い」などと表現することがあるので頭の片隅にいれておきましょう。

htmlでサイト制作を進める上では「どの要素が、どの要素の親要素なのか子要素なのか?」を理解している必要があります。しっかりと理解できるようにしましょう。

入れ子のまとめ

入れ子の基本的な意味と使い方はわかりましたか?初めてhtmlを勉強する方にとってはすこし難しく感じるかもしれませんが実際に書いて練習していくうちに慣れていくので安心してください。

ここまで学習したことをまとめたのでおさらいしましょう。

  • 要素を別のタグで囲うことを「入れ子」と呼ぶ
  • 入れ子にはルールがあり別のタグをクロスさせてはいけない
  • 囲っている要素を親要素、囲われている要素を子要素と呼ぶ
  • htmlでは入れ子で多重構造をつくることができる

“WEB制作の勉強で失敗したくないあなたへ”

サイト制作をホントに0から学習できる教材を無料配布中!

\モダンなポートフォリオサイトが作れるように!/
  • 他のスクールなら確実に「有料級」のWEB制作の教材が今なら無料で閲覧可能!
  • ディレクター、デザイナー、エンジニアすべて一貫できる現役プロが1人で作成したから体系的に学習できる
  • 4つの課題にチャレンジしながら着実に基礎を固めていくから挫折がない

無料配布の講座では、このようにモダンなポートフォリオサイトが作れちゃいます!

特設ページで詳しくチェックする

スクール越えの圧倒的なコスパ1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ

記事では見れない豆知識

圧倒的なコスパを体感1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ