北海道工業大学電子計算機研究部ネットワークチーム　講座 03

1. HTML 基礎 Ⅱ

2.  HTML 要素の構造
 親要素、子孫要素
 兄弟要素
 要素の重なり方
 Chrome Developer Tools
 課題

3.  HTML はツリー構造になっている。
html 要素を root (根) として、
その下に複数の要素がぶら下がっている。

4.  入れ子になった要素の関係を親子で表す
<div>
<p></p>
</div>
※入れ子とは、要素を要素で囲むこと。ネストとも言う。
p の親要素
div の子要素

5.  親要素が同じ要素のことを兄弟で表す
<div>
<h1></h1>
<p></p>
<p></p>
</div>
基準となる要素
弟要素
兄要素
共通の親

6.  HTML の要素は親要素よりも子要素が上に被るよう
に重なり合っている。
 パソコンでイラストを描いたり画像を編集する人は、
レイヤーをイメージすると分かりやすい。

7.  Google Chrome を開いている状態で F12 または Ctrl +
Shift + I を押すと Developer Tools が開く。
 HTML の構造がツリー
状になっていることが
視覚的に分かる。
 ブラウザで HTML, CSS
, JavaScript を扱う時に
役立つツール。

8.  アンケートと課題の URL は Google Drive を参照。
 上とは別に、 HTML タグを 3 つ以上調べて、使い方をまとめたもの
を提出する。その際、次の 3 点を必ず記述する。
 要素の分類 (インライン、ブロックレベル、その他)
 使い方 (使用例)
 属性の指定方法
例: a タグの説明
インライン要素で、文書内や他の文書へのリンクを設置するときに使
う。
使い方: <a href=“path/to/resource”>リンク</a>
属性の説明
href: リンク先の URI を指定する
target: リンク先を表示するフレームやウィンドウを指定する