HTMLの要素は親要素・子要素・孫要素に分けることができます

要素とは？？？

HTMLコードを記述したときにできる一つ一つのかたまりの事を要素といいます。

例えば、文章を書くときは<p>〜</p>タグを使いますが、要素とはこのタグで囲われた範囲のことを意味しています。

HTMLコードは色々なタグが組合わさって構成されていますが、同時に沢山の要素で構成されているともいえます。

そして要素はそれぞれ親要素、子要素、孫要素という呼び方で分けられて、CSSコードはそれぞれの要素に対して指定することができます。

文字にすると何のことやら分からないので、具体的な図例を見ていきましょう。

親要素・子要素・孫要素とは？

下の図はHTMLコードで簡単な文章を作成したものです。<div>〜</div>タグで囲まれた大きなかたまりの中に<p>〜</p>タグや<ul>〜</ul>タグを使って文章を書いています。

図を見てもらえば分かるように、<div>〜</div>タグで囲まれた部分が親要素になります。

そして<div>〜</div>タグの中に<p>〜</p>タグや<ul>〜</ul>タグがあるのが分かりますね。これが子要素とよばれるものになります。

<ul>〜</ul>タグの中に<li>〜</li>タグがありますが、これは<div>〜</div>タグからみたら孫要素にあたります。

これをサイト表示すると下図のようになります。

ここでは要素のかたまりを見やすくするために背景色をシルバーに変えています。

この場合のCCSは下図のように表せます。

<div>〜</div>タグという親要素に対して背景色シルバーを指定しています。

ここでは子要素である<p>〜</p>タグや<ul>〜</ul>タグにCSSを指定していないので、そのまま親要素のCSSを引き継いでいます。

HTMLコードは、親要素といわれる大きなかたまりの中に子要素、孫要素といわれる小さなかたまりが含まれています。

サイトを構成するHTMLコードには親要素・子要素・孫要素が存在していて、それらが合わさって1つのページが作られてるといえます。

それを簡単に表したのが下の図になります。

親要素・子要素・孫要素は起点によって見方が変化

上の図では親要素が3つあるのが分かりました。

ここで注意が必要なのは、孫要素から見た時の親要素は何になるかということです。上の図は起点が親要素になっています。

親要素から見たら直下が子要素、その下が孫要素です。

それでは、子要素から見たらどうなるかというと下図のようになります。

それまで子要素だったのが親要素になりました。

同時に孫要素が子要素に変化しています。

この変化は下図のように家族構成を例にすると分かりやすくなります。

上図は一般的な家族構成を表した図ですが、HTMLでの親要素・子要素・孫要素も似たような関係になります。

家族構成図をイメージしてもらえば親要素、子要素はその時々で変化することが分かると思います。

親要素・子要素に使えるタグの順番のルール

ここでは、親要素・子要素で使用できるタグの使い方のルールについて解説していきます。

あるタグで囲われた親要素の中に子要素が入るわけですが、親要素のタグによっては子要素で使用できないタグが存在します。

つまりあるタグを親要素にしたら、子要素として使えないタグがあるということです。

言葉で説明してもイメージがつきにくいので簡単な例で解説していきます。

下は<div>〜</div>タグで囲まれた親要素の中に<p>〜</p>タグ、<span>〜</span>タグがある場合のHTMLとCSSコードになります。

これがサイトに表示されるときは以下のようになります。

<div>〜</div>タグで囲まれた親要素の中に<p>〜</p>タグで文章を入力して、<span>〜</span>タグで部分的に背景色を黄色にしています。

ここでのタグの順番は

<div>〜</div>タグ⇒<p>〜</p>タグ⇒<span>〜</span>タグとなっています。

ここで質問です。

<p>〜</p>タグと<span>〜</span>タグの順番を入れ替えたらこのHTMLコードは成立するでしょうか？？？

答えは、

成立しません

本当に成立しないか試してみます。

<p>〜</p>タグと<span>〜</span>タグの順番を入れ替えると下図のようになります。

CSSは先ほどと同じままにします。

このHTMLコードでサイトを表示させてみると下のようになります。

<span>〜</span>タグを親要素、<p>〜</p>タグを子要素とした場合、CSSの指定が無効になっているのが分かります。

つまり、

• <p>〜</p>タグは<span>〜</span>タグの子要素にはできない
• <span>〜</span>タグは<p>〜</p>タグの親要素にはできない

となります。

今回は<p>〜</p>タグと<span>〜</span>タグの関係を見ていきましたが、その他にも色々なパターンがあります。

HTMLタグは沢山あるので、それらの関係性をすべて暗記するのは大変です。

そんな時に役に立つのサイトを見つけましたので紹介します。

吉川ウェブ〜HTML5 子要素・親要素対応

このサイトは自動で親要素、子要素の関係を表示してくれて、とても便利なサイトになります。

子要素・親要素対応の使い方

先ずは上記のリンク先に移動すると以下のページが表示されます。

出典：吉川ウェブ〜HTML5 子要素・親要素対応

例えば<p>タグにカーソルを合わせると「親」「子」の表示が出ますので、調べたい方をクリックします。

ここでは「親」をクリックしてみます。

「親」をクリックすると<p>〜</p>タグの親要素になることができるタグが色付きで表示されます。

出典：吉川ウェブ〜HTML5 子要素・親要素対応

色付きで表示されたタグが親要素になれることを表しています。

<span>〜</span>タグを見てみると色が表示されていないので<p>〜</p>タグの親要素になれないことが分かりますね。

まとめ

親要素と子要素について解説してきましたが、何となくイメージをつかむことができたでしょうか？

親要素と子要素の関係はCSSでスタイルを指定するときにも関わってきます。

親要素と子要素の関係をはっきりイメージできる場合、CSSコードを書くのも容易になります。

HTMLコードを書くときは、それらの関係を頭の中でイメージしながら書いていきましょう。