height

height

表系要素 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] HTMLimg 要素および 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 は物体を取寄せる前に必要な領域を予約して残りの部分をレンダリングすることができます。 物体が到着しても全体ないし物体以後の部分をレンダリングし直さずに済みます。

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

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

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

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

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

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

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

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

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

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

[44] widthheight も、 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 が実装しました。

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

[62] 指定されていないと画像が到着されるまでまったくレンダリングが停止するように書かれていますが、 当時の Netscape Navigator はそうだったのでしょうか? Netscape Navigator 2.0 は到着しなくてもレンダリングを開始し、 画像が到着した時点で挿入される (ので、 それ以後が再描画される) ようになっていた記憶があります。 (だから再描画いくないから widthheight を指定汁みたいな話だったような。)

メモ

[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] HTMLapplet 要素の 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] HTMLiframe 要素の 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 は、 getComputedStyle0pxcurrentStyle] は指定値を返すようです。

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 は >>68WinIE 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>