Edit

Page

Page title:

Page body:

* INPUT 要素 WIDTH 属性 (HTML)

[1] [[WebTV]] で実装されています。
<http://web.archive.org/web/20010425042729/http://developer.webtv.net/authoring/html/input.html#1061018>

[2] どういう [[type]] 属性値に対して有効なのかはわかりませんが、
>>1 の記述から、少なくても [CODE(HTML)[text]], [CODE(HTML)[password]],
[CODE(HTML)[textarea]] には有効だと思われます。
[CODE(HTML)[image]] やボタン類にもかもしれません。

[77] [CODE(HTML)@en[[[type]]=[[image]]]] の [CODE(HTMLe)@en[[[input]]]]
[[要素]]については、 [[HTML4]] でも [[XHTML1]] でも [CODE(HTMLa)@en[[[width]]]]
[[属性]]、 [CODE(HTMLa)@en[[[height]]]] [[属性]]が定義されていませんでしたが、
[[HTML5]] ではじめて[[次元属性]]として定義されました。

;; [CITE@en[(X)HTML5 Tracking]] ([TIME[2009-08-02 12:38:49 +09:00]] 版) <http://html5.org/tools/web-apps-tracker?from=2560&to=2561>

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

[3] [CODE(HTMLe)[[[pre]]]] [[要素]]の [DFN[[CODE(HTMLa)[width]] [[属性]]]]は、
[[視覚UA]] にその要素を表示するときの望ましい幅についてのヒントを与えます。
[[UA]] は、この情報を適切な文字の[[大きさ]]の選択や、
適当な[[字下げ]]のために使うことができます。

この属性の値の型は
[CODE(SGML)[[[NUMBER]]]] です。望ましい幅の文字数を表します。

この属性は[[非推奨]]です。代替として、 [[CSS]] なら [CODE(CSS)[width]]
属性を使うことができます。

[4] 「文字」なんて単位を幅の指定に使えるのは、 [CODE(HTMLe)[pre]]
要素がそもそも[[固定幅フォント]]で表示されることを期待しているからです。
そうはいっても、 HTML 4 は固定幅フォントで表示することを強制していませんし、
現実の UA でも固定幅で表示されるとは限りません。 (今のシステムだと固定幅のフォントが無いことだってあり得るし。)

また、「固定幅」そのものが[[ラテン文字]]圏の事情しか考えていない概念で、
漢字圏で一般に固定幅と呼ばれているものは[[半角]]と[[全角]]の二種類の幅があって、全然固定じゃなかったりします。
[[東南亜細亜]]・[[南亜細亜]]・[[亜剌比亜]]で使われている文字体系だと、
そもそも幅を固定することなんて無茶すぎるでしょう。

そんなような事情ですから、たとえこの属性で「文字幅」単位の指定をしたところで、
たぶん、期待した結果は得られないでしょう。しかも、 HTML 4 仕様書によれば、
この属性はあまり実装されていません。

[5] 
仕様書: [[HTML 4]] <IW:HTML4:"struct/text.html#adef-width-PRE">

[[#comment]]

* 表の幅

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

[16] [CODE(HTMLe)[[[table]]]] 要素の 
[DFN[[CODE(HTMLa)[width]] 属性]]は、
[[表]]の幅を表します。この属性は[[視覚UA]]
を想定しています。

仕様書: [[HTML 4]]
<IW:HTML4:"struct/tables.html#adef-width-TABLE">

[17] この属性は省略可能です。
省略されている場合には幅は UA が決定します。

[18]
この属性は、 HTML 4 では非推奨ではありません
([[Strict]] [[DTD]] でも使えます)。 
しかし、[[スタイル・シート]]を使って指定することがすすめられています
(encouraged)。
(<IW:HTML4:"struct/tables.html#column-width">)

[20]
Strict 思想的には視覚 UA
のレンダリングのためだけのこの属性を HTML 
で使うのは望ましくないのですが、表のレンダリングの特殊性から、
回線の事情や UA の性能のためにやむを得ないと考えられたこともありました。
(現在ではそのような問題はほぼ解消していますから、
もはや必要ないかもしれませんが。)

[19] この属性の値の型は [CODE(SGML)[%[[Length]];]]
([[SGML]] 的には [CODE(SGML)[[[CDATA]]]]) です。
従って、無単位の画素数と百分率による割合のいずれかで指定できます。

百分率は利用可能な水平空間に対する割合と見なされます。

[27]
[CODE(HTMLe)[col]] や [CODE(HTMLe)[colgroup]] の幅が相対幅 (割合) で指定されているときには、
表自体の幅も指定しなければなりません。

<IW:HTML4:"struct/tables.html#edef-TABLE">

([[名無しさん]])

[[#comment]]

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

[6] [CODE(HTMLe)[[[colgroup]]]] 要素の
[DFN[[CODE(HTMLa)[width]] 属性]]は、
その[[列群]]に含まれる列の幅の既定値を表します。
(列群の幅ではないので注意。)

列群に含まれる列の幅は、 [CODE(HTMLe)[[[col]]]]
要素で別途指定されていればそれが使われます。
そうでない場合は [CODE(HTMLe)[colgroup]] の値が使われます。

仕様書: [[HTML 4]]
<IW:HTML4:"struct/tables.html#adef-width-COLGROUP">

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

HTML 4 では多くの要素型の [CODE(HTMLa)[width]]
属性は[[非推奨]]とされていますが、 [CODE(HTMLe)[colgroup]]
要素では非推奨ではありません。 (他の表系要素型と同じく、
表のレンダリングにかかわる特殊事情によるものだと思われます。)

[7] この値の型は [CODE(SGML)[%[[MultiLength]];]] 
([[SGML]] 的には [CODE(SGML)[[[CDATA]]]]) です。

通常の [CODE(SGML)[%MultiLength;]] 
型で認められる[[画素]]単位の整数値
([CODE(SGML)[%[[Pixels]];]] < [CODE(SGML)[%[[Length]];]])、
百分率値 ([CODE(SGML)[%Length;]])、
相対長 ([CODE(SGML)[%MultiLength;]]) の他に、
特別に、 [CODE(HTML)[0*]] という指定ができます。

[8] 値 [CODE(HTML)[0*]] は、列の内容に必要な最小の幅を表します。
この指定があると、表のレンダリングのために列の内容をすべて知らなければならないので、
徐々にレンダリングすることが難しくなります。
HTML 4 仕様書は著者に注意を促しています。

[[#comment]]

** col 要素 width 属性

[10] [CODE(HTMLe)[[[col]]]] 要素の
[DFN[[CODE(HTMLa)[width]] 属性]]には、
[[列]]の幅を指定します。
(列の集合の幅ではないことに注意してください。
[CODE(HTMLa)[[[span]]]] 属性が [CODE(HTML)[2]]
以上であっても、適用されるのはそれぞれの列に対してです。)

仕様書: [[HTML 4]]
<IW:HTML4:"struct/tables.html#adef-width-COL">

[11] この属性は省略可能です。
省略した場合で、親 [CODE(HTMLe)[[[colgroup]]]] 要素があって、
そこに [CODE(HTMLa)[width]] 属性が指定されていれば、
その値が使われます。

HTML 4 では多くの要素型の [CODE(HTMLa)[width]]
属性は[[非推奨]]とされていますが、 [CODE(HTMLe)[col]]
要素では非推奨ではありません。 (他の表系要素型と同じく、
表のレンダリングにかかわる特殊事情によるものだと思われます。)

*** 属性型

[12] この値の型は [CODE(SGML)[%[[MultiLength]];]] 
([[SGML]] 的には [CODE(SGML)[[[CDATA]]]]) です。

HTML 4 仕様書には、 [CODE(HTMLe)[colgroup]]
で使える [CODE(HTML)[0*]] 
という指定が可能かどうか明記されていませんが、
[CODE(HTMLa)[width]] 属性の意味は [CODE(HTMLe)[colgroup]]
要素のものと同じと書かれていることや、
[CODE(HTMLe)[colgroup]] の属性が [CODE(HTMLa)[col]]
の属性の既定値となることから考えても、
使えると取るのが自然でしょう。

[78] [[HTML5]] の[[レンダリング]]の章では [[maps to the dimension property]]
とされており [SRC[[[Web Applications 1.0]]]]、 [[HTML4]] でいう [CODE(SGML)@en[[[%Length;]]]] 相当です。

** 列幅

[13] 仕様書: HTML 4
<IW:HTML4:"struct/tables.html#column-width">

列幅の指定には 3 (+ 1) 通りの方法があります。
:固定:[[画素]]単位による固定幅の指定。
[SAMP(HTML)[[CODE(HTMLa)[width]]="30"]]

のような無単位数の指定がこれにあたります。
固定で指定されていれば、
表を最初の方から徐々に表示していくことができます。
:百分率指定:百分率 (%) 単位による幅の指定。
[SAMP(HTML)[[CODE(HTMLa)[width]]="30%"]] 
のような指定がこれに当たります。
この割合は表に利用できる空間 
(左右の余白の間で、[RUBYB[浮動] [float]]を含む。)
に対するものです。
この場合も最初の方から徐々に表示していくことができます。
:可変幅:[SAMP(HTML)[3*]] のような星印のついた指定です。
これは表に必要な空間に対するものです。
[CODE(HTMLe)[[[table]]]] 要素に [CODE(HTMLa)[width]]
属性が指定されている時には徐々に表示していくことができますが、
そうで無い場合には表のすべてのデータを読み終わらないと幅を決定できません。
:無指定:列の幅の指定が無い場合、
表のすべてのデータが到着しないと適当な幅を決定できませんから、
徐々に表示することはできません。

UA は、表のレンダリング中にある[[こま]]の表示に必要な幅が足りていない時には再描画してもかまいません。

[14]
[PRE(HTML)[
<TABLE>
<COLGROUP>
   <COL width="30">
<COLGROUP>
   <COL width="30">
   <COL width="0*">
   <COL width="2*">
<COLGROUP align="center">
   <COL width="1*">
   <COL width="3*" align="char" char=":">
<THEAD>
<TR><TD> ...
...rows...
</TABLE>
]PRE]

たとえば、 HTML 4 仕様書にあるこの例では、
最初の2つの列の幅は何も考えずに決定できますが、
残りの列の幅はすべてのこまを読まないと決定できません。
3番目の列の幅は、 [CODE(HTML)[0*]] ですから、
必要な最小の幅です。残りの4つは内容に必要な幅を 
[CODE(math)[2 : 1 : 3]] の割合で取ります。

[15]
[PRE(HTML)[
<TABLE width="200">
<COLGROUP span="10" width="15">
<COLGROUP width="*">
   <COL id="penultimate-column">
   <COL id="last-column">
<THEAD>
<TR><TD> ...
...rows...
</TABLE>
]PRE]

同じく HTML 4 仕様書にあるこの例は、
[CODE(HTMLe)[table]] 要素に [CODE(HTMLa)[width]]
属性があるので、 [CODE(HTML)[*]] 
の指定がありながらも表全体を読まずに列幅を決定できます。

この表には12個の列があって、最初の10列はそれぞれ15画素、
最後の2列は25画素ずつ使います。

(ちなみに、この例の [CODE(HTMLe)[col]] 要素は [CODE(HTMLa)[id]]
を与えるためだけに存在しています。)

[[#comment]]

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

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

仕様書:
- [[HTML 4]]
-- [CODE(HTMLe)[th]] 要素 [CODE(HTMLa)[width]] 属性
<IW:HTML4:"struct/tables.html#adef-width-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]]]] です [SRC[HTML 4.01]]。
[WEAK[(HTML 4.0 では [CODE[%[[Pixels]]]] でしたが、 [Q[minor typo]] であるとして [SRC[HTML 4.01 A.1.3]]、百分率値を認めるために HTML 4.01 で [CODE[%Length]] に改められました。)]]
[[SGML]] 的には [CODE(SGML)[[[CDATA]]]] です。

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

[[#comment]]

*** メモ

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

[58]

[PRE(HTML invalid example code)[
<TD BACKGROUND="gradient.jpg" STYLE="background-repeat : repeat-x;" WIDTH="*" VALIGN="top">
]PRE]

;; 出典: [[Windows XP]] [[日本語版]]の
[CODE(file)@en[C:\windows\help\Tours\htmlTour\connected_multiple.htm]]

([[名無しさん]])

[[#comment]]

** メモ

[26]
表や列の幅が固定長であっても、 [CODE(HTMLa)[[[cellspacing]]]] や [CODE(HTMLa)[[[cellpadding]]]]
のために必要であれば、 [[UA]]
は幅をその分ひろげてもかまいません 
(が、そうする必要はありません。)
(<IW:HTML4:"struct/tables.html#margins"> を参照。)

[[#comment]]

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

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

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

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

[[#comment]]

** 代替

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

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

[[#comment]]

** 属性値

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

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

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

[[#comment]]

** 応用

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

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

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

[[#comment]]

** 歴史

[62] [CODE(HTMLe)@en[[[img]]]] [[要素]]の [CODE(HTMLa)@en[[[width]]]]
[[属性]]は [[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]]

** メモ

[42] [CODE(HTMLa)[width]] 属性が物理属性か論理属性か
([[Strict]] な文書で使用するべきかどうか) の問題は [CODE(HTMLa)[[[height]]]]
属性の説明を見てください。

[57]
[CITE[XHTML-Print]] <http://www.w3.org/TR/2006/PR-xhtml-print-20060131/#s.4.1.2>

>
[PRE(HTML example code)[
<img height="20 mm" width="20 mm" alt="Example Image"
   src="data:image/jpeg;base64,aGh67Fghsapa0Hji7dfGSweTa . . . " />
]PRE]

いつから[[単位]]OKになったのでしょう?
([[名無しさん]] [WEAK[2006-03-28 02:47:11 +00:00]])

[[#comment]]

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

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

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

[56]
HTML 4 DTD の[[注釈]] (参考) には
[Q[initial width]] と書かれています。
([[名無しさん]] [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)[[[height]]]] (高さ) があります。

[[#comment]]

** メモ

[[#comment]]

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

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

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

[[#comment]]

** 属性値

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

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

[[#comment]]

** 他との関係

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

[[#comment]]

** メモ

[[#comment]]

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

[48] [[HTML]] の [CODE(HTMLe)[[[hr]]]] 要素の [DFN[[CODE(HTMLa)[width]] 属性]]は、
水平線の幅を指定します。

[49] 仕様書:
- [[HTML 3.2]] 
-- [CODE(HTMLe)[hr]] 要素 [CODE(HTMLa)[width]] 属性
<http://www.w3.org/TR/REC-html32#hr>
- [[HTML 4]]
-- [CODE(HTMLe)[hr]] 要素 [CODE(HTMLa)[width]] 属性
<IW:HTML4:"present/graphics.html#adef-width-HR">

[[#comment]]

** 代替

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

[[#comment]]

** 属性値

[51] この属性の値は [CODE(SGML)[%[[Length]]]] です。
[[SGML]] 的には [CODE(SGML)[[[CDATA]]]] です。
[SRC[HTML 3.2, HTML 4]]

[52] この属性は省略可能です。省略時の既定値は
[CODE(HTML)[100%]] です。 ([[DTD]] 的には [CODE(SGML)[#[[IMPLIED]]]]) です。
[SRC[HTML 3.2, HTML 4]]

[[#comment]]

** 歴史

[61] [CODE(HTMLe)@en[[[hr]]]] [[要素]]の [CODE(HTMLa)@en[[[size]]]]
[[属性]]は [[HTML 2.0]] の拡張として [[Netscape Navigator]]
で実装されました。

[CODE(HTMLa)@en[[[width]]]] [[属性]]は、
[[水平線]]を[[画素]]の[[数]]か[[文書]]の[[幅]]に対する[[百分率値]]で指定するものとされていました。
[CODE(HTMLa)@en[[[width]]]] [[属性]]が指定されなかった場合、
[[頁]]の幅と同じだけの幅になるとされていました。

;; [CITE[Netscape Navigator Extensions to HTML]]
<http://web.archive.org/web/20000415023954/http://www.netscape.com/home/services_docs/html-extensions.html>

[53] この属性は HTML 3.2 で最初に公式な HTML 仕様に導入され、
HTML 4 で非推奨とされました。

[54]
HTML 2.0 では [CODE(HTMLe)[hr]] は幅一杯に引かれると規定されており、
[CODE(HTMLa)[width]] 属性の既定値 (>>52) と一致します。

HTML 2.0 は [Q[[CODE(HTMLe)[hr]] は [RUBYB[幅一杯] [full width]]]]、 HTML 3.2
は[Q[百分率値は左右余白間の割合]]、 HTML 4 は
[Q[[CODE(HTML)[100%]] はすなわち[RUBY[画布] [キャンバス]]全体]]
と述べています。他の要素との関係で、 100% 
であっても必ずしも画布一杯に線が引けるとは限りませんから、
HTML 4 の規定は不正確になっていると言えます。

[[#comment]]

** メモ

[[#comment]]

* メモ

[59]
[CITE[公開メモ日記 - Webサイトの横幅を固定した時のピクセルサイズ]] <http://knoa.jp/memo/?id=2006-10-19+12:48>
([[名無しさん]] [WEAK[2006-10-19 14:51:48 +00:00]])

[60]
[CITE[div width - Google 検索]] ([CODE[2007-01-06 23:59:44 +09:00]] 版) <http://www.google.co.jp/search?q=div+width>

>
[PRE(HTML invalid example)[
</head><body bgcolor=#ffffff onload="document.gs.reset();" topmargin=3 marginheight=3><noscript></noscript><div align=right nowrap style="padding-bottom:4px" width=100%><font size=-1><a href="https://www.google.com/accounts/Login?continue=http://www.google.co.jp/search%3Fq%3Ddiv%2Bwidth&hl=ja">ログイン</a></font></div>
]PRE]

([[名無しさん]] [WEAK[2007-01-06 15:04:27 +00:00]])

[63]
[CODE(CSS)@en[[[width]]]] の[[算出値]]確認用
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20display%3A%20inline%3B%0A%20%20width%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'%20width%3A%20'%2Bsd.width)%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%20width%3A%20'%2Bsd.width)%0A%22%20value%3DcurrentStyle%3E%0A%3Cp%3E;p=n;x=style-element>
([[名無しさん]])

[64]
>>63 [[CSS 2.1]] によれば [CODE(CSS)@en[[[width]]]] の[[算出値]]は
[CODE(CSS)@en[[[width]]]] が[[適用]]されない場合 [CODE(CSS)@en[[[auto]]]] で、
[[非置換行内要素]]には[[適用]]されないのですが、
[[Firefox]] 2 でも [[WinIE 6]] でも [CODE(CSS)@en[[[auto]]]] にはなりません。
[[Opera]] 9 では [CODE(CSS)[0[[px]]]] になります。
([[名無しさん]])

[65]
>>63 [CODE(CSS)@en[[[table-row]]]] 用
<http://suika.fam.cx/gate/2007/cssom/viewer?c=tr%20%7B%0A%20%20width%3A%2010em%3B%0A%7D;h=%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('tr')%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%20width%3A%20'%2Bsd.width)%0A%22%20value%3DgetComputedStyle%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('tr')%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%20width%3A%20'%2Bsd.width)%0A%22%20value%3DcurrentStyle%3E%0A%3Ctable%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[[[table-row-group]]]] 用
<http://suika.fam.cx/gate/2007/cssom/viewer?c=tbody%20%7B%0A%20%20width%3A%2010em%3B%0A%7D;h=%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('tr')%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%20width%3A%20'%2Bsd.width)%0A%22%20value%3DgetComputedStyle%3E%0A%3Cinput%20type%3Dbutton%20onclick%3D%22%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('tr')%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%20width%3A%20'%2Bsd.width)%0A%22%20value%3DcurrentStyle%3E%0A%3Ctable%3E%3Ctbody%3E%3Ctr%3E%3Ctd%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftbody%3E%3C%2Ftable%3E;p=n;x=style-element>

([[名無しさん]])

[66]
>>65 [[Firefox]] 2 は[[表]]や[[表群]]の場合[[使用値]] (?) が返されるようです
(この例では [CODE(CSS)[2[[px]]]])。
[[Opera]] 9 では [CODE(CSS)[0[[px]]]] です。
[[WinIE 6]] では[[指定値]]と同じです (もっとも [[WinIE 6]]
では [CODE(HTMLe)@en[[[tr]]]] も [CODE(HTMLe)@en[[[tbody]]]]
も [CODE(CSS)@en[[[display]]: [[block]]]] ですが)。
([[名無しさん]])

[67]
[[Firefox]] 3 で追加された4つの[[鍵語]]のテスト用:
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20width%3A%20auto%3B%0A%20%20background-color%3A%20blue%3B%0A%7D%0A%0A%23fit-content%20%7B%0A%20%20width%3A%20-moz-fit-content%3B%0A%7D%0A%23min-content%20%7B%0A%20%20width%3A%20-moz-min-content%3B%0A%7D%0A%23max-content%20%7B%0A%20%20width%3A%20-moz-max-content%3B%0A%7D%0A%23available%20%7B%0A%20%20width%3A%20-moz-available%3B%0A%7D%0A;h=%3Cbutton%20type%3Dbutton%20onclick%3D%22%0A%20%20for%20(var%20i%20%3D%200%3B%20i%20%3C%205%3B%20i%2B%2B)%20%7B%0A%20%20%20%20var%20pel%20%3D%20document.getElementsByTagName%20(%27p%27)%5Bi%5D%3B%0A%20%20%20%20w%20(pel.textContent%20%2B%20%27%3A%20%27%20%2B%20getComputedStyle%20(pel%2C%20null).width)%3B%0A%20%20%7D%0A%22%3EgetComputedStyle%3C%2Fbutton%3E%0A%0A%3Cp%20id%3Dauto%3Eauto%3C%2Fp%3E%0A%3Cp%20id%3Davailable%3E-moz-available%3C%2Fp%3E%0A%3Cp%20id%3Dmax-content%3E-moz-max-content%3C%2Fp%3E%0A%3Cp%20id%3Dmin-content%3E-moz-min-content%3C%2Fp%3E%0A%3Cp%20id%3Dfit-content%3E-moz-fit-content%3C%2Fp%3E;p=n;x=style-element;i=html-div>
([[名無しさん]])

[68]
>>64 や >>66 については、 [[DOM水準2 CSS]] のいうところの[[算出値]]というのが [[CSS 2.0]]
の意味、すなわち [[CSS 2.1]] の[[使用値]]を指しているので、むしろ [[Opera]]
の値がおかしい。
([[名無しさん]])

[69]
>>67 [CODE(DOMm)@en[[[getComputedStyle]]]]
は [CODE(CSS)@en[[[display]]: [[inline]]]] の時は[[指定値]]を、
それ以外の時は[[使用値]]を返すようです。

([[名無しさん]])

[70]
>>67 この4つは [CODE(CSS)@en[[[min-width]]]] や [CODE(CSS)@en[[[max-width]]]]
でも使えますが、 [CODE(CSS)@en[[[height]]]] 系では使えないようです。
([[名無しさん]])

[71] [CITE[IE5~IE7でも、RFC2397(Dataスキーム, DataURI)を使えるようにした! - uupaaの開発日記]] ([TIME[2008-12-27 15:42:29 +09:00]] 版) <http://d.hatena.ne.jp/uupaa/20080904/1220462674>

>img style="width:100px;height:100px" width="50" height="50" は、width=100px, height=100pxと解釈されるのが正しい仕様ですが、今回の実装では50px,50pxになります。理由はIEがimg.width, img.heightを勝手にバッテンアイコンのサイズに書き換えるのが原因です。

* [CODE(DOMi)@en[ClientRect]] 界面 [CODE(DOMa)@en[width]] 属性、 [CODE(DOMa)@en[height]] 属性

[72] [[CSSOM View]] [[WD]] には [CODE(DOMi)@en[[[ClientRect]]]]
に [CODE(DOMa)@en[[[width]]]] と [CODE(DOMa)@en[[[height]]]]
がありますが、現時点でどの [[Webブラウザ]]の [CODE(DOMm)@en[[[getBoundingClientRect]]]]
が返す値もこれらの[[属性]]を持っていないみたいです。

* [CODE(JS)@en[document.width]], [CODE(JS)@en[document.height]]

[74] [[Firefox3]]: 常に (モードに関わらず) [CODE(HTMLe)@en[[[body]]]]
の [[border box]] の幅と高さ。

[75] [[Safari3]]: 常に (モードに関わらず) [[画布]]の幅と高さ。

[76] [[Opera 9.52]]、[[WinIE7]]: 未対応。

[79] [CITE[''''''[''''''whatwg'''''']'''''' question on @width and @height attributes on <video>]]
( ([TIME[2011-01-09 13:49:39 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-January/029742.html>

[80] [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#SVGElementWidthAttribute>

[81] [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#UseElementWidthAttribute>

[82] [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#ImageElementWidthAttribute>

[83] [CITE@en[Web Applications 1.0 r6706  Compat with other browsers.]]
( ([TIME[2011-10-20 08:03:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=6705&to=6706>

[84] [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-width-attribute>

[85] [CITE[''''''[''''''whatwg'''''']'''''' '''['''Rendering''']''' zero width attributes on table, th, td should be ignored]]
( ([TIME[2013-01-03 14:10:11 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-January/038496.html>

[86] [CITE@en[Support `width="0"` except for table-related elements · whatwg/html@06b0238]]
([TIME[2015-10-10 14:52:18 +09:00]] 版)
<https://github.com/whatwg/html/commit/06b0238b34c7dfd2f74c4dee6ed8410e9d79b992>

[FIG(quote)[
[FIGCAPTION[
[87] [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.7>
]FIGCAPTION]

> The suggested width 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 pixels (see
>    Section 4.3.2 of '''['''CSS''']''').  For other output formats, it is usually
>    ignored.

]FIG]

[FIG(quote)[
[FIGCAPTION[
[88] [CITE@ja[川の防災情報 :地域選択]]
( ([TIME[2016-07-15 13:28:56 +09:00]]))
<http://www.river.go.jp/kawabou/ipXAreaMap.do?gamenId=01-0204&fldCtlParty=no>
]FIGCAPTION]

> <td width="*">&nbsp;</td>

]FIG]

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

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

[90] [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>

[91] [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>

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

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

[94] [CITE@en[Map 0 for <col>'s width="" as well]]
([[gurjotsingh4398]]著, [TIME[2019-09-24 12:21:36 +09:00]])
<https://github.com/whatwg/html/commit/cc8ad89d84b84412a0e7856bcc876d2682c21e63>

[95] [CITE@en[Editorial: removed " (ignoring zero)" text by gurjotsingh4398 · Pull Request #4927 · whatwg/html]]
([TIME[2020-05-14 13:37:36 +09:00]])
<https://github.com/whatwg/html/pull/4927>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)