表系要素 height 属性

th 要素・td 要素 height 属性 (HTML, XHTML 1)

[21] th 要素および td 要素の height 属性は、 視覚UA に対して推奨こま高を指定します。

仕様書:

スタイル・シート代替

[22] この属性は非推奨です。スタイル・シートで代わりに指定できます。

属性値

[23] この属性の値は %Length です。 (HTML 4.0 では %Pixels でしたが、 minor typo として HTML 4.01 A.1.3、百分率値を認めるために HTML 4.01 で %Length になりました。) SGML 的には CDATA です。

[24] この属性は省略可能です。

メモ

[25] こまに一々高さなんて指定しても何の役に立つんだか。

メモ

img 要素・object 要素 height 属性 (HTML, XHTML 1)

[34] HTML の img 要素および object 要素の height 属性は、 画像や物体の自然な高さを上書きする値を指定します。

[35] 仕様書: HTML 4 IW:HTML4:"struct/objects.html#img-wh"

[48] HTML 4 DTD の注釈 (参考) には override height と書かれています。 (名無しさん [sage])

代替

[38] この属性は、 HTML 4 では個別の属性としては非推奨にされていませんが、 視覚表現に関わる属性はすべて非推奨と書かれている章 (13.7 Visual presentation of images, objects, and applets IW:HTML4:"struct/objects.html#visual") の中で規定されています。

[39] 画像や物体の高さはスタイル・シートで代替できます。 CSS では height 特性がこれにあたります。

属性値

[36] この属性の値は %Length です。 SGML 的には CDATA です。

百分率値で指定されたときには、利用可能な領域の高さに対する割合として解釈します。 (画像・物体の自然な高さに対してではありません。) [HTML 4]

[37] この属性は省略可能です。

応用

[40] 物体が画像であるときには、指定された高さに合わせて拡大・縮小されます。 UA は、 物体や画像が height に一致するよう拡大・縮小に最善を尽くすべきです。 [HTML 4]

[41] height 属性が指定されていると、 UA は物体を取寄せる前に必要な領域を予約して残りの部分をレンダリングすることができます。 物体が到着しても全体ないし物体以後の部分をレンダリングし直さずに済みます。

回線や計算機の能力が貧弱だった時代には、 この理由から height や width を img 要素に指定することが好ましいと言われていたこともありました。

width 属性・height 属性は物理属性か?

[15] 特に Stricter の間では、 IMG 要素の width, height 両属性が論理属性なのか物理属性 (表現属性) なのかが議論となることがあります。たとえば:

なお、以降において、具体的な仕様や実装を念頭に置くときはそれを明記し、明記しない場合は現実の使われ方を無視した、理想的なあり方を考えることとします。

[16] 論理属性として意識している場合:

物理属性として意識している場合:

[17] でも実際のところ、 WIDTH 属性, HEIGHT 属性には表示上の大きさを示す以上の使い方は出来ない気がする。 (大きさを知ってから取り寄せる、という使い方は、 (ブラウザでなく) 画像取り出し器が使うみたいな場合以外つかわなそうだ。) 廃止しても良いのじゃないかな。もしどうしても必要なら、 content feature の埋め込み (CC/PP かなにか?) でも使って表現するのがいいのでは。 (Image map は、別の方法を考えるとして。)

[18] 今まで両属性の strict DTD における存在について判断しかねていたんですけど、 agenda のそふぃあさんの文章を読んで、あってもいいかなあと思うようになりました。でも想定される用途の幅と誤用の危険性を考えれば、なくてもいいかなあとも思います。個人的意見ですが。

[44] width も height も、 HTML 4 仕様書では 13.7 Visual presentation of images, objects, and applets のところに解説があるんだから、物理属性以外の何者でもない。 論理的意味があるようなことは一言も書いてないし。

しかも、属性そのものこそ非推奨ではないけど、 attributes that concern visual alignment and presentation have been deprecated in favor of style sheets と前置きされた章の中にあるのだからあまりおすすめされているものでもなさそう。

[50] 百分率が画像自体ではなく領域に対するものである (>>36) 辺り、やはり物理属性だよなーと思った。 (名無しさん)

[65] img tag に height、width 属性は書くべきではない。 (RobaQ 著, 2002-05-22 21:55:09 +09:00 版) http://web.archive.org/web/20020528070539/http://www.netlaputa.ne.jp/~robaq/img_size.html (名無しさん)

[71] Re: require img dimensions to be correct? (Ian Hickson <ian@...> 著, 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/13682 (名無しさん)

歴史

[62] img 要素の height 属性は HTML 2.0 の拡張として Netscape Navigator が実装しました。

この属性は主として文書のレンダリングの高速化のために追加されたと説明されています。 この属性が指定されていると、画像の到着を待たずにレンダリングができるとされています。

Netscape Navigator Extensions to HTML http://web.archive.org/web/20000415023954/http://www.netscape.com/home/services_docs/html-extensions.html [62] 指定されていないと画像が到着されるまでまったくレンダリングが停止するように書かれていますが、 当時の Netscape Navigator はそうだったのでしょうか? Netscape Navigator 2.0 は到着しなくてもレンダリングを開始し、 画像が到着した時点で挿入される (ので、 それ以後が再描画される) ようになっていた記憶があります。 (だから再描画いくないから width と height を指定汁みたいな話だったような。)

メモ

[63] FCafe IMGタグのsize指定 (2007-08-06 20:47:52 +09:00 版) http://pcafe.blog3.fc2.com/blog-entry-486.html (名無しさん 2007-08-06 11:54:29 +00:00)

[64] >>63 こういう定量的な調査はもっとされてていいと思うんだが。。。 (名無しさん)

applet 要素 height 属性 (HTML, XHTML 1)

[28] HTML の applet 要素の height 属性は、 applet の初期表示領域 (applet が作る窓や対話を除きます。) の高さを指定します。

[29] 仕様書: HTML 4 IW:HTML4:"struct/objects.html#adef-height-APPLET"

[49] HTML 4 DTD の注釈 (参考) には initial height と書かれています。 (名無しさん [sage])

代替

[30] この属性は HTML 4 で要素型ごと非推奨とされています。 object 要素型とスタイル・シートで代替できます。

属性値

[31] この属性の値は %Length です。 SGML 的には CDATA です。 大文字・小文字は区別されません [HTML 4] 。 (区別しようにも大文字も小文字も使えないのですが。)

[32] この属性は必須です。省略できません。

他との関係

[33] 姉妹属性 width (高さ) があります。

メモ

iframe 要素 width 属性 (HTML, XHTML 1)

[3] HTML の iframe 要素の height 属性は、 行内フレームの高さを指定します。

[4] 仕様書:

属性値

[45] この属性の値は %Length です。 SGML 的には CDATA です。

[46] この属性は省略可能です。

他との関係

[47] 姉妹属性 width があります。

メモ

メモ

[66] height の算出値確認用

display: inline (非置換行内要素) http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20display%3A%20inline%3B%0A%20%20height%3A%2010em%3B%0A%7D;h=%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0A%20%20var%20sd%20%3D%20getComputedStyle%20(el%2C%20null)%3B%0A%20%20w%20('getComputedStyle%3A%3A%20display%3A%20'%2Bsd.display%2B'%2C%20height%3A%20'%2Bsd.height)%0A%22%20value%3DgetComputedStyle%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0A%20%20var%20sd%20%3D%20el.currentStyle%3B%0A%20%20w%20('currentStyle%3A%3A%20display%3A%20'%2Bsd.display%2B'%2C%20height%3A%20'%2Bsd.height)%0A%22%20value%3DcurrentStyle%3E%0A%3Cp%3E;p=n;x=style-element

display: table-column http://suika.fam.cx/gate/2007/cssom/viewer?c=col%20%7B%0A%20%20height%3A%2010em%3B%0A%7D;h=%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('col')%5B0%5D%3B%0A%20%20var%20sd%20%3D%20getComputedStyle%20(el%2C%20null)%3B%0A%20%20w%20('getComputedStyle%3A%3A%20display%3A%20'%2Bsd.display%2B'%2C%20height%3A%20'%2Bsd.height)%0A%22%20value%3DgetComputedStyle%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('col')%5B0%5D%3B%0A%20%20var%20sd%20%3D%20el.currentStyle%3B%0A%20%20w%20('currentStyle%3A%3A%20display%3A%20'%2Bsd.display%2B'%2C%20height%3A%20'%2Bsd.height)%0A%22%20value%3DcurrentStyle%3E%0A%3Ctable%3E%3Ccolgroup%3E%3Ccol%3E%3Ctbody%3E%3Ctr%3E%3Ctd%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftbody%3E%3C%2Ftable%3E;p=n;x=style-element

display: table-column-group http://suika.fam.cx/gate/2007/cssom/viewer?c=colgroup%20%7B%0A%20%20height%3A%2010em%3B%0A%7D;h=%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('colgroup')%5B0%5D%3B%0A%20%20var%20sd%20%3D%20getComputedStyle%20(el%2C%20null)%3B%0A%20%20w%20('getComputedStyle%3A%3A%20display%3A%20'%2Bsd.display%2B'%2C%20height%3A%20'%2Bsd.height)%0A%22%20value%3DgetComputedStyle%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('colgroup')%5B0%5D%3B%0A%20%20var%20sd%20%3D%20el.currentStyle%3B%0A%20%20w%20('currentStyle%3A%3A%20display%3A%20'%2Bsd.display%2B'%2C%20height%3A%20'%2Bsd.height)%0A%22%20value%3DcurrentStyle%3E%0A%3Ctable%3E%3Ccolgroup%3E%3Ccol%3E%3Ctbody%3E%3Ctr%3E%3Ctd%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftbody%3E%3C%2Ftable%3E;p=n;x=style-element

(名無しさん)

[67] >>66 width の場合と同様、 WinIE 6 は指定値、Firefox 2 は使用値を返すようです。

一方 Opera 9 は、 getComputedStyle は 0px、 currentStyle] は指定値を返すようです。

CSS 2.1 によればこれらの場合は auto が算出値のはずです。

(名無しさん)

[68] Firefox 2 は常に使用値 (もしかしたら実際値) を返すようです。 (名無しさん)

[69] 包含ブロックの高さが内容高に依存し、かつその要素は絶対位置指定されていないので、百分率値の算出値が auto となる場合 http://suika.fam.cx/gate/2007/cssom/viewer?c=div%20%7B%0A%20%20height%3A%20auto%3B%0A%7D%0Ap%20%7B%0A%20%20position%3A%20static%3B%0A%20%20display%3A%20block%3B%0A%20%20height%3A%2010%25%3B%0A%7D;h=%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0A%20%20var%20sd%20%3D%20getComputedStyle%20(el%2C%20null)%3B%0A%20%20w%20('getComputedStyle%3A%3A%20display%3A%20'%2Bsd.display%2B'%2C%20height%3A%20'%2Bsd.height)%0A%22%20value%3DgetComputedStyle%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0A%20%20var%20sd%20%3D%20el.currentStyle%3B%0A%20%20w%20('currentStyle%3A%3A%20display%3A%20'%2Bsd.display%2B'%2C%20height%3A%20'%2Bsd.height)%0A%22%20value%3DcurrentStyle%3E%0A%3Cdiv%3E%3Cp%3Exxx%3C%2Fdiv%3E;p=n;x=style-element

(名無しさん)

[70] >>69 Firefox 2 は >>68。WinIE 6 は指定値。Opera 9 getComputedStyle は使用値 (あるいは実際値?)。 currentStyle は指定値。 (名無しさん)

[72] Document Structure – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SVGElementHeightAttribute

[73] Document Structure – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElementHeightAttribute

[74] Document Structure – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ImageElementHeightAttribute

[75] Packaged Web Apps (Widgets) - Packaging and XML Configuration (Second Edition) ( ( 版)) http://w3c.github.com/packed-webapps/packaging/#the-height-attribute

[1] OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema ( 版) http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a19_238fo_max-height

[2] RFC 7749 - The "xml2rfc" Version 2 Vocabulary ( 版) https://tools.ietf.org/html/rfc7749#section-2.5.3

The suggested height of the graphics (when it was included using the

"src" attribute).

This attribute is format dependent and ought to be avoided.

When generating HTML output [HTML], current implementations copy the

attribute "as is", thus effectively treating it as CSS (Cascading

Style Sheets) pixels (see Section 4.3.2 of [CSS]). For other output

formats, it is usually ignored.

[5] Make OffscreenCanvas resizeable (junov著, ) https://github.com/whatwg/html/commit/1a4bed42e68e42db712bfcea6e7505b06a589104

[6] Aice5 () http://king-cr.jp/artist/aice5/

<img src="images/spacer.gif" height="25px">

[7] [css-tables] Clarified percent heights in table-cells (FremyCompany著, ) https://github.com/w3c/csswg-drafts/commit/c90f12ec9bd43f25a9d65dd645df8a79655fdb02

[8] Remove <applet> (zcorpan著, ) https://github.com/whatwg/html/commit/b9b9d60f9451c05f8e8d542e4094f987ae1a5fb8

[9] [css-sizing] Import full propdef tables for all sizing properties, an… (tabatkins著, ) https://github.com/w3c/csswg-drafts/commit/aab263247a81dce2d2c4be5e6653d46ee63e261d

[10] Editorial: add a definition for canvas width/height numeric values (GloverDonovan著, ) https://github.com/whatwg/html/commit/822a7bd4097af8b9a5f65ae74c4a13dd9b33e976

[11] What happens when setting the canvas width/height to an invalid value? · Issue #2066 · whatwg/html () https://github.com/whatwg/html/issues/2066

[12] Add cross-reference for obtaining numeric values by GloverDonovan · Pull Request #3475 · whatwg/html () https://github.com/whatwg/html/pull/3475