ウェブ

ドキュメント

  • このエントリーをはてなブックマークに追加
DOMツリーの例

ドキュメントとは

ドキュメント(document)とは「情報のまとまり」のことです。よく「文書」と日本語訳されます。

「文書」のイメージは人によって異なるかもしれませんが、フォームやボタン、動画、音声なども含めた、できるだけ広い範囲の「情報」をイメージしてください。

ウェブでのドキュメントは、ブラウザに映し出されるコンテンツ(contents)、およびそれに関係する情報=メタデータ(metadata) を記述したウェブページのソース(HTMLファイル等)から伝わる、ひとまとまりの情報を意味します。(HTML: HyperText Markup Language)

ドキュメントは、1つのHTMLファイルにまとまっている場合もあれば、リンクした別ファイルからの内容が、メインのHTMLに埋め込まれて、一体のドキュメントとなっている場合もあったり、プログラムで自動的に生成されたHTMLデータでファイルがない場合も含まれたりします。

ここからは、このウェブでのドキュメントについての話になります。

HTML要素の記述

HTMLでは、いくつもの要素を列記したり、入れ子にしたりすることで、ドキュメント全体の構成を記述します。

列記

<要素1></要素1>
<要素2></要素2>
<要素3></要素3>
   ・
   ・
   ・
   ・
   ・
列記

前の要素が終わってから、後の要素が始まります。

入れ子

<要素1>
  <要素2>
    <要素3>
      ・
      ・
    </要素3>
  </要素2>
</要素1>
入れ子

後の要素が終わってから、前の要素が終わります。

悪い例

<要素1>
あ
<要素2>
い
</要素1>
う
</要素2>
悪い例

後の要素が始まってから、前の要素が終わります。
前の要素が終わってから、後の要素が終わります。

あるブラウザでは意図通りに表示されるかもしれませんが、
別のブラウザでは意図通りに表示されないかもしれません。

修正例

<要素1>
あ
</要素1>
<要素2>
    <要素21>
    い
    </要素21>
う
</要素2>
修正例

前の要素1が終わってから、後の要素2が始まります。
後の要素21が終わってから、前の要素2が終わります。

ドキュメント全体の構成

HTMLでは、まず<html>要素内に、<head>要素と<body>要素の2つが、入れ子で記述されます。

<html>要素内では、<head>要素、<body>要素の順に列記します。

<html>
<head>
</head>
<body>
</body>
</html>

<html>要素が、DOMツリーというドキュメントの家系図のようなものにおいて、根っこ(root)の部分になっているので、<html>要素を特別に、ルート要素(root element)と呼んだり、トップレベル要素と呼んだりします。

DOM(Document Object Model)は、様々なドキュメントとその要素をオブジェクト化したモデル(分身)です。
DOMツリーは、ドキュメント内の各要素の関係を上下逆さのツリー(根が上で枝葉が下)で表したものです。

DOMツリーの例

DOMツリーの例

ブラウザのコンテンツ表示領域に表示させたい要素は、全て<body>要素内に記述します。

ただし、各要素をブラウザのコンテンツ表示領域にどう表示させるか、という書式は、HTMLではなく、主にCSS(Cascading Style Sheets)という言語で記述します。

HTMLでは基本的に、ドキュメント内における各要素の、構成(目次) 上の意味付けだけを記述します。

例: 表題=<h1>、大見出し=<h2>、中見出し=<h3>、図表=<figure>、参照=<a>、引用=<blockquote>、…

要素と要素の相互作用

<body>要素内の各要素における、周辺要素との配置特性(display-outside)は、インライン(文字型)か、ブロック(段落型)か、に分けられます。

配置

HTMLで列記された要素は、インラインなら左から右へ、ブロックなら上から下へ、配置されます。

インライン
インライン

ブロック
ブロック

インラインブロックでは、ブロックが先でもブロックが後でも、上から下へ配置されます。(ブロックの方が強い)

ブロック→インライン

ブロックの次のインラインは、ブロックの下に配置されます

インライン→ブロック

インラインの次のブロックも、インラインの下に配置されます

なお、要素の外側には厚みのあるバリアを張ることができます。このバリアをマージン(margin)と言います。通常、隣接する要素同士は、マージンのバリアの分、はじかれ隔てられます。

マージン
他要素をはじくブロック2のマージン

ただし、隣り合うブロックマージン同士など、はじき合わずに、重なり合う場合があります。(マージンの相殺)

マージンの相殺
マージンの相殺

親子関係

HTMLで入れ子になった要素は、親と子の関係になります。(それぞれDOMツリーの上方と下方)

CSSの指定も、親要素から子要素へと、継承されます。

また、親要素が子要素の基準になったり、逆に子要素が親要素の基準になったりもします。(詳しくは次項で説明)

サイズ

サイズ指定された要素では、まずそれに従います。要素の中身(子要素・データ)が、指定された要素サイズに納まりきらない場合、その中身は要素からはみ出せます。

サイズ指定されていない要素では、その中身または親要素をサイズ基準にします。各要素のサイズ基準は、インラインブロックで異なり、縦と横でも異なります。

インライン
(文字型)
中身に合わせたCSSピクセル数になります。
  • 中身のマージン(margin)も含めて自身の幅を合わせます。
中身に合わせたCSSピクセル数になります。
  • 中身のマージン(margin)は無視します。
ブロック
(段落型)
要素に合わせたCSSピクセル数になります。
  • 自身のマージン(margin)も含めて親要素の幅に合わせます。
  • 中身の幅には合わせません。(中身ははみ出すこともできます)
インラインの中にインライン
インラインの中にインライン
ブロックの中にインライン
ブロックの中にインライン

インラインの中にブロック
インラインの中にブロック

インラインの中にブロックを入れた場合、中身のブロックは親のインラインに、親のインラインは中身のブロックに、お互いに合わせようとして、想定外の表示になる可能性があります。

ブロックの中にブロック
ブロックの中にブロック

<html>、<head>、<body> それぞれの扱い

ほぼ全てのHTMLドキュメントは、<html>をルート要素として、その中身を<head>と<body>に二分します。

<head>

<head>に入る中身は、目に見えるコンテンツではなく、ドキュメントの付帯情報になります。

このため、<head>とその中身は、コンテンツ表示領域には表示されません。

したがって、<head>とその中身は、インラインでもブロックでもなく、サイズもありません。(サイズ 0)

<body>

<body>に入る中身は、ドキュメントコンテンツです。

よって、<body>とその中身は、コンテンツ表示領域に表示される全てです。

<body>自身は通常、ブロック扱いになり、サイズもあります。

<body>へ直接サイズ指定をしてあれば、そのサイズになります。(その中身は<body>からはみ出せます)

<body>へ直接サイズ指定をしていなければ、<body>の高さはその中身に応じた高さとなり、<body>の幅は親要素である<html>の幅いっぱいになります。

<html>

<html>は、目に見えるコンテンツ(<body>)と、その付帯情報(<head>)とを合わせた、ドキュメント全体になります。

<html>の扱いとしては、通常、ブロック扱いになり、サイズがあります。

ただし、<html>自身は、<body>の中身ではないので、コンテンツ表示領域には表示されません。

よって、<html>に直接サイズ指定することは、通常ありえません。

<html>の高さ

直接サイズ指定されていない<html>の高さは、その中身である<body>の高さになります。

ただし、ルート要素である<html>には例外的に、全ての要素のマージンが、無視されずに含まれます。

<html>の幅

そして、<html>の幅には、ルート要素としての特別な意味があります。

<body>やその中身のブロックに、直接サイズ指定がされていない場合、ルート要素(つまり最終的な親要素)である<html>幅が基準となるからです。

この<html>の幅は、ブラウザのコンテンツ表示領域と深く関係し、レイアウトビューポートという概念になります。

ここからは、以下の記事をご参照ください。

  • このエントリーをはてなブックマークに追加

記事を検索

コメントを残す

*

CAPTCHA