仕様
BODY要素は、
HTML文書の
内容(コンテンツ)を
表します。
body | HTML文書の |
---|---|
カテゴリ | セクショニング |
種類 | 通常要素 |
この要素を 使用できる 状態 | html要素の2番目の要素として。 |
許可されて いる内容 | フロー |
属性 | グローバル onafterprint, |
text / html での タグの省略 | 開始タグは、要素が空の場合は省略してもよいし、body要素内の先頭がmeta要素, link要素, style要素, script要素でない場合なら省略できます。
終了タグは、body要素の直後にコメントがない場合は、省略できます。 |
許可されて いるARIA | なし [既定値 : document] |
DOM インター フェイス | HTMLBodyElement
|
レンダリング | ページ
CSS を大雑把に読むと、 フローレイアウトに配置されたときにブロックレベルのボックスを生成します。 などになります。 |
参加 コンテキスト | ブロック |
確立 コンテキスト | ブロック |
body要素は、文書の内容(コンテンツ)を表します。適合ドキュメントでは、body要素は1つだけです。 body要素は、イベントハンドラのコンテンツ属性として、Windowオブジェクトの多数のイベントハンドラを公開します。 また、イベントハンドラーのIDL属性もミラーリングします。
| |
使用可能な箇所
html要素の
2番目の要素として
配置できます。
body要素は、html要素の2番目の要素として配置できます。
と言うより html要素の2番目以外には配置できないという事です。head要素は空でもタグが省略できるので、html要素の最初にあるものとして処理されます。body要素もタグが省略できるので、html要素の2番目にあるものとして処理されます。
<!DOCTYPE html>
<html lang=
"ja" ><head>
<meta charset=
"UTF-8" ><title>離珠のHTMLでしぃ!</title>
</head>
<body>
- ここに文章を書く
</body>
</html>
html要素の2番目の要素として、body要素を配置できます。(1番目は head要素です)
配置できるコンテンツ
フローコンテンツを
配置できます。
body要素は、フロー
<body>
<p>フローコンテンツ</p>
</body>
body要素のコンテンツの一部として、フロー
属性
onafterprint,
設定できます。
下書き中
oncanplay - ユーザーエージェントがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには充分なデータが読み込まれていないとみられる場合
oncanplaythrough - ユーザーエージェントがメディアを再生可能なときに発生し、コンテンツをさらにバッファリングするために再生を停止することなく、メディアを最後まで再生するのに十分なデータが読み込まれたと推定します。
onclose - ダイアログ要素が閉じている時
oncuechange - 字幕や副音声のテキストが別のテキストに変更した時
---
onkeydown - キーボードの何れかのキーを押した時
onkeypress - キーボードの何れかの文字キーを押した時
onkeyup - キーボードの何れかのキーを放した時
---
onfocus - フォーカスを得た時*
onblur - フォーカスを失った時*
onmouseenter - カーソルが入った時
onmouseleave - カーソルが外れた時
---
onclick - 左クリック
oncontextmenu - 右クリック
ondblclick - ダブルクリック
onauxclick - マウスホイールクリック
oncancel - [キャンセル] をクリックするか,Esc キーを押した時
---
ondrag - ドラッグ項目 (要素や選択テキスト) がドラッグされた場合
ondragend - ドラッグ操作を終了した時
ondragenter - ドラッグ項目が有効なドロップ対象に入った時
ondragexit - 要素がドラッグ操作の選択対象でなくなった
ondragleave - ドラッグ項目が有効なドロップ対象を離れた時
ondragover - ドラッグ項目が有効なドロップ対象にドラッグされた場合、数百ミリ秒ごとに
ondragstart - ユーザーが項目をドラッグ開始した時
ondrop - ドロップした時
---
oncopy - コピーされた時
oncut - テキストをカットした時
onchange - フォーム部品の内容が変更された時
---
ondurationchange - 演奏時間のデータが更新された時
onemptied - 動画・音声バッファを空にした時
onended - 動画や音声の再生が終わった時
onerror - ドキュメントや画像を読み込めず、エラーになった時*
onformdata - エントリリストを作成しているときにフォーム要素で発生します。
oninput - ユーザーが値を変更したときにコントロールで発生します。
oninvalid - 制約を満たさない場合、フォームの検証中にコントロールで発生します。
onload - ドキュメントの読み込みが完了したときにウィンドウで発生します。*
onloadeddata - メディアプレーヤーで、最初のフレームの読み込みが完了した時
onloadedmetadata - メタデータが読み込まれたとき時
onloadstart - データの読み込みを開始した時
onmousedown -
onmousemove -
onmouseout -
onmouseover -
onmouseup -
onpaste -
onpause -
onplay -
onplaying -
onprogress -
onratechange -
onreset -
onresize* -
onscroll* -
onsecuritypolicyviolation -
onseeked -
onseeking -
onselect -
onslotchange -
onstalled -
onsubmit -
onsuspend -
ontimeupdate -
ontoggle -
onvolumechange -
onwaiting -
onwheel -
onafterprint - 印刷後のイベント
onbeforeprint - 印刷前のイベント
onbeforeunload - 画面遷移への要求が発生し、Windowページページがアンロードされる前。
onhashchange - ドキュメントのURLのフラグメント部分(#xxx)が変更されたときに発生します。
onlanguagechange - ユーザーの優先言語が変更されたときにグローバルスコープオブジェクトで発生します。
onmessage - オブジェクトがメッセージを受信したときに発生します。
onmessageerror - 逆シリアル化できないメッセージを受信したときにオブジェクトで発生します。
onoffline - ネットワーク接続が失敗したときにグローバルスコープオブジェクトで発生します。
ononline - ネットワーク接続が戻ったときにグローバルスコープオブジェクトで発生します。
onpagehide - ページが隠れた時のイベント
onpageshow - ページが見えた時のイベント
onpopstate - Windowユーザーがセッション履歴をナビゲートするときに発生します。
onrejectionhandled - 未処理のpromiseの拒否が処理されたときにグローバルスコープオブジェクトで発生します。
onstorage - Window対応する領域localStorageまたはsessionStorageストレージ領域が変更されたときにイベントで発生します。
onunhandledrejection - promiseの拒否が処理されなくなったときにグローバルスコープオブジェクトで発生します。
onunload - 文書からの離脱時のイベント
気を付ける点
タグの省略
body要素のタグは省略できます。開始タグは、要素が空の場合は省略してもよいし、body要素内の先頭がmeta要素, link要素, style要素, script要素でない場合なら省略できます。
終了タグは、body要素の直後にコメントがない場合は、省略できます。
<!DOCTYPE html>
<html lang=
"ja" ><head>
<meta charset=
"UTF-8" ><title>離珠のHTMLでしぃ!</title>
</head>
<h1>タグの省略</h1>
<p>body要素のタグを省略した例です。</p>
</html>
body要素はタグの省略ができるので、html要素のコンテンツとしての記述に フロー
しかし、body要素は存在しています。h1要素は html要素の子要素ではなく孫要素です。その為、CSS で指定する時などには子孫関係を間違えない様に気を付ける必要があります。
CSSリセット
body {
margin: 0;
}
normalize.css というリセットCSS の一部で、すべてのブラウザで body要素のマージンを削除します。
詳細は理解していないのですが、いろいろとバグ等の対応も含んでいる様なので、リセットCSSを利用する事をお勧めします。