ドキュメントとは
ドキュメント(document)とは「情報のまとまり」のことです。よく「文書」と日本語訳されます。
「文書」のイメージは人によって異なるかもしれませんが、フォームやボタン、動画、音声なども含めた、できるだけ広い範囲の「情報」をイメージしてください。
ウェブでのドキュメントは、ブラウザに映し出されるコンテンツ(contents)、およびそれに関係する情報＝メタデータ(metadata) を記述したウェブページのソース(HTMLファイル等)から伝わる、ひとまとまりの情報を意味します。(HTML: HyperText Markup Language)
ドキュメントは、1つのHTMLファイルにまとまっている場合もあれば、リンクした別ファイルからの内容が、メインのHTMLに埋め込まれて、一体のドキュメントとなっている場合もあったり、プログラムで自動的に生成されたHTMLデータでファイルがない場合も含まれたりします。
ここからは、このウェブでのドキュメントについての話になります。
HTML要素の記述
HTMLでは、いくつもの要素を列記したり、入れ子にしたりすることで、ドキュメント全体の構成を記述します。
列記
<要素１></要素１> <要素２></要素２> <要素３></要素３> ・ ・ ・ ・ ・
前の要素が終わってから、後の要素が始まります。
入れ子
<要素１> <要素２> <要素３> ・ ・ </要素３> </要素２> </要素１>
後の要素が終わってから、前の要素が終わります。
悪い例
<要素１> あ <要素２> い </要素１> う </要素２>
後の要素が始まってから、前の要素が終わります。
前の要素が終わってから、後の要素が終わります。
あるブラウザでは意図通りに表示されるかもしれませんが、
別のブラウザでは意図通りに表示されないかもしれません。
修正例
<要素１> あ </要素１> <要素２> <要素２１> い </要素２１> う </要素２>
前の要素１が終わってから、後の要素２が始まります。
後の要素２１が終わってから、前の要素２が終わります。
ドキュメント全体の構成
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ツリーの例
ブラウザのコンテンツ表示領域に表示させたい要素は、全て<body>要素内に記述します。
ただし、各要素をブラウザのコンテンツ表示領域にどう表示させるか、という書式は、HTMLではなく、主にCSS(Cascading Style Sheets)という言語で記述します。
HTMLでは基本的に、ドキュメント内における各要素の、構成(目次) 上の意味付けだけを記述します。
例: 表題＝<h1>、大見出し＝<h2>、中見出し＝<h3>、図表＝<figure>、参照＝<a>、引用＝<blockquote>、…
要素と要素の相互作用
<body>要素内の各要素における、周辺要素との配置特性(display-outside)は、インライン(文字型)か、ブロック(段落型)か、に分けられます。
配置
HTMLで列記された要素は、インラインなら左から右へ、ブロックなら上から下へ、配置されます。
インラインとブロックでは、ブロックが先でもブロックが後でも、上から下へ配置されます。(ブロックの方が強い)
ブロックの次のインラインは、ブロックの下に配置されます
インラインの次のブロックも、インラインの下に配置されます
なお、要素の外側には厚みのあるバリアを張ることができます。このバリアをマージン(margin)と言います。通常、隣接する要素同士は、マージンのバリアの分、はじかれ隔てられます。
ただし、隣り合うブロックのマージン同士など、はじき合わずに、重なり合う場合があります。（マージンの相殺）
親子関係
HTMLで入れ子になった要素は、親と子の関係になります。(それぞれDOMツリーの上方と下方)
CSSの指定も、親要素から子要素へと、継承されます。
また、親要素が子要素の基準になったり、逆に子要素が親要素の基準になったりもします。(詳しくは次項で説明)
サイズ
サイズ指定された要素では、まずそれに従います。要素の中身(子要素・データ)が、指定された要素サイズに納まりきらない場合、その中身は要素からはみ出せます。
サイズ指定されていない要素では、その中身または親要素をサイズ基準にします。各要素のサイズ基準は、インラインとブロックで異なり、縦と横でも異なります。
| 横 | 縦 | |
|---|---|---|
| インライン (文字型) | 中身に合わせたCSSピクセル数になります。
| 中身に合わせたCSSピクセル数になります。
|
| ブロック (段落型) | 親要素に合わせたCSSピクセル数になります。
|
インラインの中にブロックを入れた場合、中身のブロックは親のインラインに、親のインラインは中身のブロックに、お互いに合わせようとして、想定外の表示になる可能性があります。
<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>の幅は、ブラウザのコンテンツ表示領域と深く関係し、レイアウトビューポートという概念になります。
ここからは、以下の記事をご参照ください。