ツリー構造【HTML】


さぁ、はじめよう!!

ほぼ初心者な私が、そろそろWeb制作の基本も理解しておいた方がいいかな?と思い、でも覚えなさそうなので、忘れてもいいように少しずつ書きまとめているものです。

 

スポンサーリンク

 

⦿ ツリー構造とは

HTML文書は、html要素を基点とする階層構造になっており、1つの要素が複数の子要素を持ち、その子要素がさらに複数の孫要素を持ち、階層が深くなるにつれ枝分かれしていくデータ構造のこと。

木が幹から枝、枝から葉へと枝分かれしていくように、「木」を逆さまにしたような形状になっていることから、「ツリー構造」または「木構造(きこうぞう)」と呼ばれている。

 

▲クリックすると画像拡大

 

 サンプルソース 

<!DOCTYPE html >
<html >
<head>
<html lang=”ja”>
<meta charset=”UTF-8″>

<title>ツリー構造</title>
</head>
<body>
<h1>
ツリー構造とは<h1>
<ul style=”font-size: 12pt;”>
<li>
樹木を上下さかさまにして見たような形状をしたデータ構造</li>
<li>
企業の組織図や家系図、トーナメント表などもツリー構造</li>
</ul>
<h2>
ツリー構造を構成する要素<h2>
<p style=”font-size: 12pt;”>
ツリー構造は、<strong>「ノード・ルート・ブランチ・リーフ」</strong>の要素で構成されている。</p>
</body>
</html>

サンプル画面

 

⦿ ツリー構造を構成する要素

 ノード node  
ツリー構造における要素の呼び名。

途中の枝分かれ要素のことで、木でいう「節( ふし)」にあたる部分で、「節ノード」とも呼ばれる。
入ってくるデータが1つで、出ていくデータが1つ以上ある要素。

 ルート root  
木でいう「根元」にあたる部分で、「根ノード」とも呼ばれる。
すべてのデータの出発点となる要素。

 リーフ leaf  
木でいう「葉」にあたる部分で、「葉ノード」とも呼ばれる。
入ってくるデータが1つで、出ていくデータがない要素。

 エッジ edge / ブランチ branch  
木でいう「枝」にあたる部分。
要素同士をつなぐ線。

 

⦿ 要素同士の関係

 祖先要素  
ある要素を含み、その要素よりも上位にある要素。
このうち一つ上の階層の要素が「親要素」となる。

 子孫要素  
ある要素を含む、その要素よりも下位にある要素。
このうち一つ下の階層の要素が「子要素」となる。

 兄弟要素  
ツリー構造上、同じ親を持ち、同じ階層に位置する要素。

 

スポンサーリンク


最後まで読んでくれてありがとうございました。
それでは、see you next time.

カテゴリーHTML

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA