

* 表系要素 height 属性


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

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

仕様書: 
- [[HTML 4]]
-- [CODE(HTMLe)[th]] 要素 [CODE(HTMLa)[height]] 属性
<IW:HTML4:"struct/tables.html#adef-height-TH">
-- [CITE[A.1.3 Minor typographical errors that were corrected]]
<IW:HTML4:"appendix/changes.html#h-A.1.3">

[[#comment]]


*** スタイル・シート代替

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

[[#comment]]


*** 属性値

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

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

[[#comment]]


*** メモ

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

[[#comment]]


** メモ

[[#comment]]


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

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

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

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

[[#comment]]


** 代替

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

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

[[#comment]]


** 属性値

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

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

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

[[#comment]]


** 応用

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

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

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

[[#comment]]


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

[15] 特に [[Stricter]] の間では、 [CODE(HTML)[IMG]]
要素の [[width]], [[height]] 両属性が論理属性なのか物理属性
(表現属性) なのかが議論となることがあります。たとえば:
- ''agenda - 2002/5/16〜31 - Personnel'' <http://members.jcom.home.ne.jp/jintrick/Personal/d20025l.html>
- ''agenda - 2002/6/1〜15 - Personnel'' <http://members.jcom.home.ne.jp/jintrick/Personal/d20026f.html>

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

[16] 論理属性として意識している場合:
- 画像の実際の大きさを表す参考情報。
-- 画像 (= 別資源) に内在している情報を持つことにやや抵抗がありますが、 [[type]] 属性の同類と考えればすっきりします。
無視していいのです。
- 関連付けられた image map の座標系 (というか単位長) の確定のための情報

物理属性として意識している場合:
- 画像の拡大・縮小を狙って実際の大きさと異なる値を指定
- 画像非表示状態の場合に、代替内容の大きさを無視してこの属性の値で表示
- 画像到着前の仮表示における大きさの推定

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

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

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

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

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

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


[71]
[CITE[Re: require img dimensions to be correct?]] ([[Ian Hickson <ian@...>]] 著, [TIME[2008-04-11 07:02:20 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/13682>
([[名無しさん]])


[[#comment]]


** 歴史

[62] [CODE(HTMLe)@en[[[img]]]] [[要素]]の [CODE(HTMLa)@en[[[height]]]]
[[属性]]は [[HTML 2.0]] の拡張として [[Netscape Navigator]]
が実装しました。

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

;; [CITE[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 は到着しなくても[[レンダリング]]を開始し、
[[画像]]が到着した時点で挿入される (ので、
それ以後が再描画される) ようになっていた記憶があります。
(だから再描画いくないから [CODE(HTMLa)@en[[[width]]]] と
[CODE(HTMLa)@en[[[height]]]] を指定汁みたいな話だったような。)
[[#comment]]


** メモ

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

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

[[#comment]]


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

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

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

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

[[#comment]]


** 代替

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

[[#comment]]


** 属性値

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

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

[[#comment]]


** 他との関係

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

[[#comment]]


** メモ

[[#comment]]


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

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

[4] 仕様書:
- [[HTML 4]]
-- [CODE(HTMLe)[iframe]] 要素 [CODE(HTMLa)[height]] 属性
<IW:HTML4:"present/frames.html#adef-height-IFRAME">

[[#comment]]


** 属性値

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

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

[[#comment]]


** 他との関係

[47] 姉妹属性 [CODE(HTMLa)[[[width]]]] があります。

[[#comment]]


** メモ

[[#comment]]


* メモ

[66]
[CODE(CSS)@en[[[height]]]] の[[算出値]]確認用

[CODE(CSS)@en[[[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>

[CODE(CSS)@en[[[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>

[CODE(CSS)@en[[[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 [CODE(CSS)@en[[[width]]]] の場合と同様、
[[WinIE 6]] は[[指定値]]、[[Firefox]] 2 は[[使用値]]を返すようです。

一方 [[Opera]] 9 は、
[CODE(DOMm)@en[[[getComputedStyle]]]] は [CODE(CSS)@en[0[[px]]]]、
[CODE(DOMa)@en[[[currentStyle]]]]] は[[指定値]]を返すようです。

[[CSS 2.1]] によればこれらの場合は [CODE(CSS)@an[[[auto]]]]
が[[算出値]]のはずです。

([[名無しさん]])

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

[69]
[[包含ブロック]]の[[高さ]]が[[内容高]]に依存し、かつその[[要素]]は[[絶対位置指定]]されていないので、[[百分率値]]の[[算出値]]が [CODE(CSS)@en[[[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 
[CODE(DOMm)@en[[[getComputedStyle]]]] は[[使用値]] (あるいは[[実際値]]?)。
[CODE(DOMa)@en[[[currentStyle]]]] は[[指定値]]。
([[名無しさん]])

[72] [CITE[Document Structure – SVG 1.1 (Second Edition)]]
( ([TIME[2011-08-10 12:35:27 +09:00]] 版))
<http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SVGElementHeightAttribute>

[73] [CITE[Document Structure – SVG 1.1 (Second Edition)]]
( ([TIME[2011-08-10 12:35:27 +09:00]] 版))
<http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElementHeightAttribute>

[74] [CITE[Document Structure – SVG 1.1 (Second Edition)]]
( ([TIME[2011-08-10 12:35:27 +09:00]] 版))
<http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ImageElementHeightAttribute>

[75] [CITE[Packaged Web Apps (Widgets) - Packaging and XML Configuration (Second Edition)]]
( ([TIME[2012-11-22 21:22:20 +09:00]] 版))
<http://w3c.github.com/packed-webapps/packaging/#the-height-attribute>

[1] [CITE[OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema]]
([TIME[2011-09-29 13:00:00 +09:00]] 版)
<http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a19_238fo_max-height>

[FIG(quote)[
[FIGCAPTION[
[2] [CITE@en[RFC 7749 - The "xml2rfc" Version 2 Vocabulary]]
([TIME[2016-02-04 22:54:51 +09:00]] 版)
<https://tools.ietf.org/html/rfc7749#section-2.5.3>
]FIGCAPTION]

> 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.
> 

]FIG]


[5] [CITE@en[Make OffscreenCanvas resizeable]]
([[junov]]著, [TIME[2016-12-06 07:06:13 +09:00]])
<https://github.com/whatwg/html/commit/1a4bed42e68e42db712bfcea6e7505b06a589104>

[FIG(quote)[
[FIGCAPTION[
[6] [CITE@ja[Aice5]]
([TIME[2017-01-01 23:55:28 +09:00]])
<http://king-cr.jp/artist/aice5/>
]FIGCAPTION]

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

]FIG]


[7] [CITE@en['''['''css-tables''']''' Clarified percent heights in table-cells]]
([[FremyCompany]]著, [TIME[2017-01-10 07:14:20 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/c90f12ec9bd43f25a9d65dd645df8a79655fdb02>

[8] [CITE@en[Remove <applet>]]
([[zcorpan]]著, [TIME[2017-08-21 22:19:30 +09:00]])
<https://github.com/whatwg/html/commit/b9b9d60f9451c05f8e8d542e4094f987ae1a5fb8>

[9] [CITE@en['''['''css-sizing''']''' Import full propdef tables for all sizing properties, an…]]
([[tabatkins]]著, [TIME[2017-12-05 09:40:50 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/aab263247a81dce2d2c4be5e6653d46ee63e261d>

[10] [CITE@en[Editorial: add a definition for canvas width/height numeric values]]
([[GloverDonovan]]著, [TIME[2018-02-22 05:41:43 +09:00]])
<https://github.com/whatwg/html/commit/822a7bd4097af8b9a5f65ae74c4a13dd9b33e976>

[11] [CITE@en[What happens when setting the canvas width/height to an invalid value? · Issue #2066 · whatwg/html]]
([TIME[2018-02-22 15:54:34 +09:00]])
<https://github.com/whatwg/html/issues/2066>

[12] [CITE@en[Add cross-reference for obtaining numeric values by GloverDonovan · Pull Request #3475 · whatwg/html]]
([TIME[2018-02-22 15:56:01 +09:00]])
<https://github.com/whatwg/html/pull/3475>