1.仕様
BODY要素
は、
HTML文書の
内容(コンテンツ)を
表します。
- body
-
HTML文書のコンテンツ (document Body)
- 種類
-
通常要素
- カテゴリ
-
なし (セクショニング
ルート は廃止されました) - 使用できるコンテキスト
-
html
要素 の 2番目html
要素 の 2番目のコンテンツとして、使用できます。ただし HTML4.01 Frameset の場合は、html要素には使用できず、noframes要素に 1つのコンテンツとして、使用できます。
- コンテンツモデル
-
0個以上のフロー
コンテンツ 0個以上のフロー
コンテンツ が配置できます。フロー
コンテンツ に分類される要素は、header要素 , footer要素 , main要素 , address要素 , ol要素 , ul要素 , menu要素 , dl要素 , table要素 , form要素 , fieldset要素 , search要素 , hr要素 , p要素 , pre要素 , blockquote要素 , figure要素 , div要素 , dialog要素 , section要素 , nav要素 , aside要素 , article要素 , h1要素 , h2要素 , h3要素 , h4要素 , h5要素 , h6要素 , hgroup要素 , script要素 , noscript要素 , template要素 , input要素 , textarea要素 , select要素 , label要素 , button要素 , output要素 , progress要素 , meter要素 , datalist要素 , picture要素 , object要素 , img要素 , iframe要素 , embed要素 , video要素 , audio要素 , canvas要素 , map要素 , area要素 , a要素 , details要素 , ins要素 , del要素 , abbr要素 , b要素 , bdi要素 , bdo要素 , cite要素 , code要素 , data要素 , dfn要素 , em要素 , i要素 , kbd要素 , mark要素 , q要素 , s要素 , samp要素 , small要素 , span要素 , strong要素 , sub要素 , sup要素 , u要素 , var要素 , time要素 , ruby要素 , br要素 , wbr要素 , slot要素 , テキスト です。 - タグの省略
-
どちらのタグも省略できます。
開始タグは、要素が空の場合は省略してもよいし、body要素内の先頭が meta要素, link要素, style要素, script要素, template要素でない場合なら省略できます。
終了タグは、body要素の直後にコメントがない場合は、省略できます。
- コンテンツ属性
-
グローバル属性 他
- onafterprint
属性 - 印刷後に発生
- onbeforeprint
属性 - 印刷前に発生
- onbeforeunload
属性 - ページがアンロードされようとしている時に発生
- onhashchange
属性 - ドキュメントのURLのフラグメント部分が変更された時に発生
- onlanguagechange
属性 - ユーザーの優先言語が変更された時に発生
- onmessage
属性 - サーバーからメッセージを受信した時に発生
- onmessageerror
属性 - デシリアライズできないメッセージを受信した時に発生
- onoffline
属性 - ネットワーク接続に障害が発生した時に発生
- ononline
属性 - ネットワーク接続が戻った時に発生
- onpagehide
属性 - セッション履歴内のページのエントリが現在のエントリでなくなった時に発生
- onpageshow
属性 - セッション履歴内のページのエントリが現在のエントリになった時に発生
- onpopstate
属性 - ユーザーがセッション履歴をナビゲートした時に発生
- onrejectionhandled
属性 - promise拒否がreject関数で処理される時に発生
- onstorage
属性 - 対応するlocalStorageまたはsessionStorageストレージ領域が変更された時に発生
- onunhandledrejection
属性 - promise拒否がreject関数で処理されなかった時に発生
- onunload
属性 - ウィンドウがコンテンツとリソースをアンロードする時に発生
alink属性, background属性, bgcolor属性, bottommargin属性, leftmargin属性, link属性, marginheight属性, marginwidth属性, rightmargin属性, text属性, topmargin属性, vlink属性がありましたが、廃止されました。代わりに CSS を使用してください。
- onafterprint
- DOM インターフェイス
-
HTMLBodyElement
[Exposed=Window]
interface HTMLBodyElement : HTMLElement {
[HTMLConstructor] constructor();
// also has obsolete members
};
HTMLBodyElement includes WindowEventHandlers;
HTMLElement
[Exposed=Window]
interface HTMLElement : Element {
[HTMLConstructor] constructor();
// metadata attributes
[CEReactions] attribute DOMString title;
[CEReactions] attribute DOMString lang;
[CEReactions] attribute boolean translate;
[CEReactions] attribute DOMString dir;
// user interaction
[CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
[CEReactions] attribute DOMString inert;
undefined click();
[CEReactions] attribute DOMString accessKey;
readonly attribute DOMString accessKeyLabel;
[CEReactions] attribute boolean draggable;
[CEReactions] attribute boolean spellcheck;
[CEReactions] attribute DOMString writingSuggestions;
[CEReactions] attribute DOMString autocapitalize;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
ElementInternals attachInternals();
// The popover API
undefined showPopover();
undefined hidePopover();
boolean togglePopover(optional boolean force);
[CEReactions] attribute DOMString? popover;
};
HTMLElement includes GlobalEventHandlers;
HTMLElement includes ElementContentEditable;
HTMLElement includes HTMLOrSVGElement;
Element
[Exposed=Window]
interface Element : Node {
readonly attribute DOMString? namespaceURI;
readonly attribute DOMString? prefix;
readonly attribute DOMString localName;
readonly attribute DOMString tagName;
[CEReactions] attribute DOMString id;
[CEReactions] attribute DOMString className;
[SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
[CEReactions, Unscopable] attribute DOMString slot;
boolean hasAttributes();
[SameObject] readonly attribute NamedNodeMap attributes;
sequence<DOMString> getAttributeNames();
DOMString? getAttribute(DOMString qualifiedName);
DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
[CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
[CEReactions] undefined removeAttribute(DOMString qualifiedName);
[CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
boolean hasAttribute(DOMString qualifiedName);
boolean hasAttributeNS(DOMString? namespace, DOMString localName);
Attr? getAttributeNode(DOMString qualifiedName);
Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
[CEReactions] Attr? setAttributeNode(Attr attr);
[CEReactions] Attr? setAttributeNodeNS(Attr attr);
[CEReactions] Attr removeAttributeNode(Attr attr);
ShadowRoot attachShadow(ShadowRootInit init);
readonly attribute ShadowRoot? shadowRoot;
Element? closest(DOMString selectors);
boolean matches(DOMString selectors);
boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
HTMLCollection getElementsByTagName(DOMString qualifiedName);
HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
HTMLCollection getElementsByClassName(DOMString classNames);
[CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
undefined insertAdjacentText(DOMString where, DOMString data); // legacy
};
GlobalEventHandlers
interface mixin GlobalEventHandlers {
attribute EventHandler onabort;
attribute EventHandler onauxclick;
attribute EventHandler onbeforeinput;
attribute EventHandler onbeforematch;
attribute EventHandler onbeforetoggle;
attribute EventHandler onblur;
attribute EventHandler oncancel;
attribute EventHandler oncanplay;
attribute EventHandler oncanplaythrough;
attribute EventHandler onchange;
attribute EventHandler onclick;
attribute EventHandler onclose;
attribute EventHandler oncontextlost;
attribute EventHandler oncontextmenu;
attribute EventHandler oncontextrestored;
attribute EventHandler oncopy;
attribute EventHandler oncuechange;
attribute EventHandler oncut;
attribute EventHandler ondblclick;
attribute EventHandler ondrag;
attribute EventHandler ondragend;
attribute EventHandler ondragenter;
attribute EventHandler ondragleave;
attribute EventHandler ondragover;
attribute EventHandler ondragstart;
attribute EventHandler ondrop;
attribute EventHandler ondurationchange;
attribute EventHandler onemptied;
attribute EventHandler onended;
attribute OnErrorEventHandler onerror;
attribute EventHandler onfocus;
attribute EventHandler onformdata;
attribute EventHandler oninput;
attribute EventHandler oninvalid;
attribute EventHandler onkeydown;
attribute EventHandler onkeypress;
attribute EventHandler onkeyup;
attribute EventHandler onload;
attribute EventHandler onloadeddata;
attribute EventHandler onloadedmetadata;
attribute EventHandler onloadstart;
attribute EventHandler onmousedown;
[LegacyLenientThis] attribute EventHandler onmouseenter;
[LegacyLenientThis] attribute EventHandler onmouseleave;
attribute EventHandler onmousemove;
attribute EventHandler onmouseout;
attribute EventHandler onmouseover;
attribute EventHandler onmouseup;
attribute EventHandler onpaste;
attribute EventHandler onpause;
attribute EventHandler onplay;
attribute EventHandler onplaying;
attribute EventHandler onprogress;
attribute EventHandler onratechange;
attribute EventHandler onreset;
attribute EventHandler onresize;
attribute EventHandler onscroll;
attribute EventHandler onscrollend;
attribute EventHandler onsecuritypolicyviolation;
attribute EventHandler onseeked;
attribute EventHandler onseeking;
attribute EventHandler onselect;
attribute EventHandler onslotchange;
attribute EventHandler onstalled;
attribute EventHandler onsubmit;
attribute EventHandler onsuspend;
attribute EventHandler ontimeupdate;
attribute EventHandler ontoggle;
attribute EventHandler onvolumechange;
attribute EventHandler onwaiting;
attribute EventHandler onwebkitanimationend;
attribute EventHandler onwebkitanimationiteration;
attribute EventHandler onwebkitanimationstart;
attribute EventHandler onwebkittransitionend;
attribute EventHandler onwheel;
};
ElementContentEditable
interface mixin ElementContentEditable {
[CEReactions] attribute DOMString contentEditable;
[CEReactions] attribute DOMString enterKeyHint;
readonly attribute boolean isContentEditable;
[CEReactions] attribute DOMString inputMode;
};
HTMLOrSVGElement
interface mixin HTMLOrSVGElement {
[SameObject] readonly attribute DOMStringMap dataset;
attribute DOMString nonce; // intentionally no [CEReactions]
[CEReactions] attribute boolean autofocus;
[CEReactions] attribute long tabIndex;
undefined focus(optional FocusOptions options = {});
undefined blur();
};
WindowEventHandlers
interface mixin WindowEventHandlers {
attribute EventHandler onafterprint;
attribute EventHandler onbeforeprint;
attribute OnBeforeUnloadEventHandler onbeforeunload;
attribute EventHandler onhashchange;
attribute EventHandler onlanguagechange;
attribute EventHandler onmessage;
attribute EventHandler onmessageerror;
attribute EventHandler onoffline;
attribute EventHandler ononline;
attribute EventHandler onpagehide;
attribute EventHandler onpagereveal;
attribute EventHandler onpageshow;
attribute EventHandler onpageswap;
attribute EventHandler onpopstate;
attribute EventHandler onrejectionhandled;
attribute EventHandler onstorage;
attribute EventHandler onunhandledrejection;
attribute EventHandler onunload;
};
- ARIA in HTML
-
暗黙的="
generic
" ARIAロール="No
" aria-* 属性="GlobalAny
"暗黙的な ARIAセマンティクスは、
role=generic
です。作成者は、暗黙的な ARIAセマンティクス, または HTML要素のネイティブセマンティクスを上書きしてはいけません。
命名禁止グローバル aria-* 属性と、許可されたロールに適用される任意の aria-* 属性が記述できます。
aria-hidden=true を指定してはなりません。 - レンダリング
- ブロック
ボックス ページ
body {
display: block;
margin: 8px;
}
CSS を大雑把に読むと、 ブロックレベルのブロックコンテナボックス(ブロックボックス)を生成します。 などになります。
- 説明
-
body
要素 は、文書の内容(コンテンツ・content)を表します。body
要素 は、適合ドキュメントでは、body要素は1つだけです。body要素は、イベントハンドラのコンテンツ属性として、Windowオブジェクトの多数のイベントハンドラを公開します。また、イベントハンドラーのIDL属性もミラーリングします。<!DOCTYPE html>
<html lang=
"ja"> <head>
<meta charset=
"utf-8"> <title>body要素の例 - (Example of body element) | 離珠のHTMLでしぃ!</title>
</head>
<body>
<h1>body要素の例</h1>
<p>この例の body要素は、文書の内容を表しています。</p>
</body>
</html>
このサンプルへのリンクです。
(./exbody.htm) - 参照元
-
参照元
- HTML Living Standard. 4.3.1 The body element (Last Updated 27 August 2024)
- HTML Living Standard. 15 Rendering 15.3.2 The page (Last Updated 27 August 2024)
- HTML 5.2 W3C 勧告. 4.3.1 The body element (W3C勧告、2017年12月14日)
- HTML 5.2 W3C 勧告. 10.3.2. The page (W3C勧告、2017年12月14日)
- HTML 5.1 W3C 勧告. 4.3.1 The body element (W3C勧告、2016年11月1日)
- HTML 5.1 W3C 勧告. 10.3.2. The page (W3C勧告、2016年11月1日)
- HTML 5 W3C 勧告. 4.3.1 The body element (W3C勧告、2014年10月28日)
- HTML 5 W3C 勧告. 10.3.2. The page (W3C勧告、2014年10月28日)
- HTML 4.01 Specification W3C 勧告. 7.5.1 The BODY element (W3C勧告1999年12月24日)
- HTML 3.2 Reference Specification. The BODY element (W3C勧告1997年1月14日)
- Hypertext Markup Language - 2.0 (November 1995)
- Hypertext Markup Language (HTML) (June 1993)
- MDN Web Docs. HTML <body>: 文書本体要素
- JSONデータ
-
JSON形式での、データのイメージです。
{
"body": {
"check": "2024-09-01",
"group": "Page",
"element": "O O (%Flow)* -- document body. (Normal elements.) [Sectioningroots] --",
"attlist": {
"%Global;": "",
"%Eventhandler;": "",
},
"comment": "HTML文書のコンテンツ (document Body)",
"point": "文書の内容(コンテンツ・content)を表します。",
"description": "適合ドキュメントでは、body要素は1つだけです。body要素は、イベントハンドラのコンテンツ属性として、Windowオブジェクトの多数のイベントハンドラを公開します。また、イベントハンドラーのIDL属性もミラーリングします。",
"kind": "Normal",
"categories": "Sectioningroots",
"used": "HTML (HEAD,BODY)",
"usedsupplement": "ただし HTML4.01 Frameset の場合は、html要素には使用できず、noframes要素に 1つのコンテンツとして、使用できます。",
"contentmodel": "BODY (%Flow)*",
"tag": [
"O",
"O",
],
"tagsupplement": [
"開始タグは、要素が空の場合は省略してもよいし、body要素内の先頭が meta要素, link要素, style要素, script要素, template要素でない場合なら省略できます。",
"終了タグは、body要素の直後にコメントがない場合は、省略できます。",
],
"attributes": {
"onafterprint": "印刷後に発生",
"onbeforeprint": "印刷前に発生",
"onbeforeunload": "ページがアンロードされようとしている時に発生",
"onhashchange": "ドキュメントのURLのフラグメント部分が変更された時に発生",
"onlanguagechange": "ユーザーの優先言語が変更された時に発生",
"onmessage": "サーバーからメッセージを受信した時に発生",
"onmessageerror": "デシリアライズできないメッセージを受信した時に発生",
"onoffline": "ネットワーク接続に障害が発生した時に発生",
"ononline": "ネットワーク接続が戻った時に発生",
"onpagehide": "セッション履歴内のページのエントリが現在のエントリでなくなった時に発生",
"onpageshow": "セッション履歴内のページのエントリが現在のエントリになった時に発生",
"onpopstate": "ユーザーがセッション履歴をナビゲートした時に発生",
"onrejectionhandled": "promise拒否がreject関数で処理される時に発生",
"onstorage": "対応するlocalStorageまたはsessionStorageストレージ領域が変更された時に発生",
"onunhandledrejection": "promise拒否がreject関数で処理されなかった時に発生",
"onunload": "ウィンドウがコンテンツとリソースをアンロードする時に発生",
},
"attributessupplement": [
"alink属性, background属性, bgcolor属性, bottommargin属性, leftmargin属性, link属性, marginheight属性, marginwidth属性, rightmargin属性, text属性, topmargin属性, vlink属性がありましたが、廃止されました。代わりに CSS を使用してください。",
],
"dominterface": "HTMLBodyElement",
"rendering": "Page",
"reference": [
{
"title": "HTML Living Standard. 4.3.1 The body element.",
"href": "https://html.spec.whatwg.org/multipage/sections.html#the-body-element",
"heading": "HTML Living Standard. 4.3.1 The body element",
"sub": "Last Updated 27 August 2024",
},
{
"title": "HTML Living Standard. 15 Rendering 15.3.2 The page.",
"href": "https://html.spec.whatwg.org/multipage/rendering.html#the-page",
"heading": "HTML Living Standard. 15 Rendering 15.3.2 The page",
"sub": "Last Updated 27 August 2024",
},
{
"title": "HTML 5.2 W3C Recommendation. 4.3.1 The body element. W3C Recommendation, 14 December 2017.",
"href": "https://www.w3.org/TR/2017/REC-html52-20171214/sections.html#the-body-element",
"heading": "HTML 5.2 W3C 勧告. 4.3.1 The body element",
"sub": "W3C勧告、2017年12月14日",
},
{
"title": "HTML 5.2 W3C Recommendation. 10.3.2. The page. W3C Recommendation, 14 December 2017.",
"href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#the-page",
"heading": "HTML 5.2 W3C 勧告. 10.3.2. The page",
"sub": "W3C勧告、2017年12月14日",
},
{
"title": "HTML 5.1 W3C Recommendation. 4.3.1 The body element. W3C Recommendation, 1 November 2016.",
"href": "https://www.w3.org/TR/2016/REC-html51-20161101/sections.html#the-body-element",
"heading": "HTML 5.1 W3C 勧告. 4.3.1 The body element",
"sub": "W3C勧告、2016年11月1日",
},
{
"title": "HTML 5.1 W3C Recommendation. 10.3.2. The page. W3C Recommendation, 1 November 2016.",
"href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#the-page",
"heading": "HTML 5.1 W3C 勧告. 10.3.2. The page",
"sub": "W3C勧告、2016年11月1日",
},
{
"title": "HTML 5 W3C Recommendation. 4.3.1 The body element. W3C Recommendation, 28 October 2014.",
"href": "https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-body-element",
"heading": "HTML 5 W3C 勧告. 4.3.1 The body element",
"sub": "W3C勧告、2014年10月28日",
},
{
"title": "HTML 5 W3C Recommendation. 10.3.2. The page. W3C Recommendation, 28 October 2014.",
"href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#the-page",
"heading": "HTML 5 W3C 勧告. 10.3.2. The page",
"sub": "W3C勧告、2014年10月28日",
},
{
"title": "HTML 4.01 Specification W3C Recommendation. 7.5.1 The BODY element. W3C Recommendation 24 December 1999.",
"href": "https://www.w3.org/TR/html401/struct/global.html#h-7.5.1",
"heading": "HTML 4.01 Specification W3C 勧告. 7.5.1 The BODY element",
"sub": "W3C勧告1999年12月24日",
},
{
"title": "HTML 3.2 Reference Specification. The BODY element. W3C Recommendation 14-Jan-1997.",
"href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/#body",
"heading": "HTML 3.2 Reference Specification. The BODY element",
"sub": "W3C勧告1997年1月14日",
},
{
"title": "Hypertext Markup Language - 2.0. November 1995.",
"href": "https://www.ietf.org/rfc/rfc1866.txt",
"heading": "Hypertext Markup Language - 2.0",
"sub": "November 1995",
},
{
"title": "Hypertext Markup Language (HTML). June 1993.",
"href": "https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt",
"heading": "Hypertext Markup Language (HTML)",
"sub": "June 1993",
},
{
"title": "MDN Web Docs. HTML <body>: The Document Body element.",
"href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/body",
"heading": "MDN Web Docs. HTML <body>: 文書本体要素",
},
],
"version": {
"first": "HTML",
"latest": "HTML Living Standard",
},
}
}
注意: 簡易に描画する為に、各項目の後ろに
,
を付与しています。JSON の形式では、末尾の項目の後には,
は付けません。 - 最終確認日
-
2024-09-01
2.使用できるコンテキスト
body要素
は、
html要素の
2番目の要素として
使用できます。
body
と言うよりhtml
尚、HTML4.01 Frameset は例外です。HTML4.01 Frameset ではhtml
<!DOCTYPE html>
<html lang=
"ja"> <head>
<meta charset=
"UTF-8"> <title>サンプル</title>
</head>
<body>
HTMLを用いると、テキストデータの表示等ができます。
</body>
</html
html
ただし、HTML4.01 Frameset を除きます。
<!DOCTYPE
HTML PUBLIC "-//W3C// DTD HTML 4.01 Frameset//EN" "http://www.w3.org/ TR/ html4/ frameset.dtd" > <html lang=
"ja"> <head>
<meta charset=
"UTF-8"> <title>サンプル</title>
</head>
<frameset cols=
"50%, 50%"> <frame src=
"./menu.htm"> <frame src=
"./header.htm"> <noframes>
<body>
フレームに関しての、テキストデータの表示等の例示です。
</body>
</noframes>
</frameset>
</html
HTML4.01 Frameset でnoframes
3.コンテンツモデル
body要素
は、
フローコンテンツを
配置できます。
body
フロー
- header
要素 - footer
要素 - main
要素 - address
要素 - ol
要素 - ul
要素 - menu
要素 - dl
要素 - table
要素 - form
要素 - fieldset
要素 - search
要素 - hr
要素 - p
要素 - pre
要素 - blockquote
要素 - figure
要素 - div
要素 - dialog
要素 - section
要素 - nav
要素 - aside
要素 - article
要素 - h1
要素 - h2
要素 - h3
要素 - h4
要素 - h5
要素 - h6
要素 - hgroup
要素 - script
要素 - noscript
要素 - template
要素 - input
要素 - textarea
要素 - select
要素 - label
要素 - button
要素 - output
要素 - progress
要素 - meter
要素 - datalist
要素 - picture
要素 - object
要素 - img
要素 - iframe
要素 - embed
要素 - video
要素 - audio
要素 - canvas
要素 - map
要素 - area
要素 - a
要素 - details
要素 - ins
要素 - del
要素 - abbr
要素 - b
要素 - bdi
要素 - bdo
要素 - cite
要素 - code
要素 - data
要素 - dfn
要素 - em
要素 - i
要素 - kbd
要素 - mark
要素 - q
要素 - s
要素 - samp
要素 - small
要素 - span
要素 - strong
要素 - sub
要素 - sup
要素 - u
要素 - var
要素 - time
要素 - ruby
要素 - br
要素 - wbr
要素 - slot
要素 - テキスト
content
<body>
<p>フローコンテンツ</p>
</body>
body
4.コンテンツ属性
body要素
は、
グローバル属性と、
イベントハンドラー
コンテンツ属性を
設定できます。
body
alink
5.DOM インターフェイス
documentの
プロパティである
bodyは、
body要素または
frameset要素を
返します。
bodydocument
のプロパティであるbody
を用います。これは、要素であるbody
document
の querySelector()メソッド等を用いる事も考えられますが、このプロパティで充分でしょう。
body要素のclassは、
"〇〇
"です。
<p>body要素のclassは、
"<code id=
"icdJs501">〇〇</code>"です。</p> <script>
document
.addEventListener( "DOMContentLoaded", function() { document
.getElementById( "icdJs501") .textContent = document .body ;.className });
</script>
body
6.レンダリング
body {
display: block;
margin: 8px;
}
bodyblock
であり、ブロック
body
bodyauto
であり、min-height: 100vh
と指定する事により画面いっぱいの高さを最小値にする事ができます。その上でフッターなどを画面の下側に置きたい場合は、displayflex
を指定して、フレックスflex-direction: column;
)各アイテムを配置コンテナの中で主軸方向に均等に配置するように指定します。(justify-content: space-between;
)
コンテキスト
フォーマット
コンテキスト
(継続)
<!DOCTYPE html>
<html lang=
"ja"> <head>
<meta charset=
"UTF-8"> <title>サンプル</title>
</head>
<body>
<div>ブロックレベルのボックスのみの例。</div>
</body>
</html
html
html
body
尚、この説明は各要素のレンダリングに関する指定が既定値での話で、個々にスタイルを指定した場合はこの限りではありません。
コンテキスト
フォーマット
コンテキスト
<!DOCTYPE html>
<html lang=
"ja"> <head>
<meta charset=
"UTF-8"> <title>サンプル</title>
</head>
<body>
<span>インラインレベルのボックスのみの例。</span>
</body>
</html
html
html
body
尚、この説明は各要素のレンダリングに関する指定が既定値での話で、個々にスタイルを指定した場合はこの限りではありません。
コンテキスト
フォーマット
コンテキスト
(継続)
フォーマット
コンテキスト
<!DOCTYPE html>
<html lang=
"ja"> <head>
<meta charset=
"UTF-8"> <title>サンプル</title>
</head>
<body>
<div>ブロックレベルのボックスとインラインレベルのボックスの混在の例。</div>
<span>ブロックレベルのボックスとインラインレベルのボックスの混在の例。</span>
</body>
</html
html
html
body
匿名の
尚、この説明は各要素のレンダリングに関する指定が既定値での話で、個々にスタイルを指定した場合はこの限りではありません。
コンテキスト
フォーマット
コンテキスト
<!DOCTYPE html>
<html lang=
"ja"> <head>
<meta charset=
"UTF-8"> <title>サンプル</title>
</head>
<body>
ブロックコンテナに直接含まれるテキストと
<span>インラインレベルのボックスの混在の例。</span>
</body>
</html
html
html
body
尚、この説明は各要素のレンダリングに関する指定が既定値での話で、個々にスタイルを指定した場合はこの限りではありません。
リセットCSS
body {
margin: 0;
}
これは、リセットCSSのnormalize.cssのbody
すべてのブラウザでマージンを 0 にします。
小さいページ
.cdvSample601 {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 8em;
border: dotted 1px;
}
.cdvSample601 > *:last-child {
margin-top: auto;
}
.cdvSample601 > * {
margin: 3px;
border: solid 1px #0000ff;
}
6行目と11行目以降は、見やすくする為の装飾です。包含ブロックを画面いっぱいにするには、min-height: 100vh
と指定する事でできます。min-heightauto
で、max-heightnone
の既定値のままという想定です。例示では、提示の都合でmin-height: 8em
(高さの最小値が8文字分)と指定しています。その上でdisplay: flex
, flex-direction: column
, justify-content: space-between
を指定します。フレックスコンテナの最後のアイテムにmargin-top: auto
と指定する事で、最後のアイテムを画面の下側に置くことができます。.cdvSample601
が body で、フッターがbody
属性をCSSで置き換える
body {
color: #000000; // text attributes.
background-color: #ffffff; // bgcolor attributes.
background-image: url("../Img/G00/demo.gif"); // background attributes.
margin-top: 8px; // topmargin attributes. marginheight attributes.
margin-bottom: 8px; // bottommargin attributes. marginheight attributes.
margin-right: 8px; // rightmargin attributes. marginwidth attributes.
margin-left: 8px; // leftmargin attributes. marginwidth attributes.
}
:link {
color: #0000ee; // link attributes.
}
:visited {
color: #551abb; // vlink attributes.
}
:link:active, :visited:active {
color: #ff0000; // alink attributes.
}
これは廃止された属性の、CSS での代用例です。
7.気を付ける点
タグの省略の扱い
body
終了タグは、body
包含ブロック
bodyauto
だったりして思うように効果が表れない事があるので注意が必要です。
また、body
<!DOCTYPE html>
<html lang=
"ja"> <head>
<meta charset=
"UTF-8"> <title>html要素の高さ - [離珠のHTMLでしぃ!]</title>
<style>
html { border: solid 1px #ff0000; box-sizing: border-box; }
html { border: solid 1px #0000ff; box-sizing: border-box; }
</style>
</head>
<body>
<a href=
"" target= "_parent">html要素</a>のページに戻るリンクです。 <h1 title=
"Height of html element.">html要素の高さ</h1> <p>Height of html element.</p>
<hr>
<form onchange=
"document .documentElement .style .height = document .getElementById( 'iseJs001') .value;"> このhtml要素の高さは、<select id=
"iseJs001"> <option value=
"auto"> auto </option> <option value=
"100%"> 100% </option> <option value=
"100vh"> 100vh </option> </select>です。
</form>
<form onchange=
"document .body .style .height = document .getElementById( 'iseJs002') .value;"> このbody要素の高さは、<select id=
"iseJs002"> <option value=
"auto"> auto </option> <option value=
"100%"> 100% </option> <option value=
"100vh"> 100vh </option> <option value=
"calc(100% - 16px)"> calc(100% - 16px) </option> <option value=
"calc(100vh - 18px)"> calc(100vh - 18px) </option> </select>です。
</form>
<form onchange=
"document .documentElement .style .fontSize = document .getElementById( 'iseJs003') .value + 'em';"> この文字の大きさは、<input id=
"iseJs003" type= "number" max= "5.0" min= "0.5" step= "0.5" value= "1.0">emです。 </form>
</body>
</html>
この例では、<iframe src=
html
使用している外部ファイルへのリンクは、「./heighthtml.htm」です。
CSSリセット
body {
margin: 0;
}
normalize.css というリセットCSS の一部です。すべてのブラウザでマージンを 0 にします。
詳細は理解していないのですが、いろいろとバグ等の対応も含んでいる様なので、リセットCSSを利用する事をお勧めします。