[1] WebTV で実装されています。 http://web.archive.org/web/20010425042729/http://developer.webtv.net/authoring/html/input.html#1061018
[2] どういう type 属性値に対して有効なのかはわかりませんが、
>>1 の記述から、少なくても text
, password
,
textarea
には有効だと思われます。
image
やボタン類にもかもしれません。
[77] type=image
の input
要素については、 HTML4 でも XHTML1 でも width
属性、 height
属性が定義されていませんでしたが、
HTML5 ではじめて次元属性として定義されました。
[3] pre
要素の width
属性は、
視覚UA にその要素を表示するときの望ましい幅についてのヒントを与えます。
UA は、この情報を適切な文字の大きさの選択や、
適当な字下げのために使うことができます。
この属性の値の型は
NUMBER
です。望ましい幅の文字数を表します。
この属性は非推奨です。代替として、 CSS なら width
属性を使うことができます。
[4] 「文字」なんて単位を幅の指定に使えるのは、 pre
要素がそもそも固定幅フォントで表示されることを期待しているからです。
そうはいっても、 HTML 4 は固定幅フォントで表示することを強制していませんし、
現実の UA でも固定幅で表示されるとは限りません。 (今のシステムだと固定幅のフォントが無いことだってあり得るし。)
また、「固定幅」そのものがラテン文字圏の事情しか考えていない概念で、 漢字圏で一般に固定幅と呼ばれているものは半角と全角の二種類の幅があって、全然固定じゃなかったりします。 東南亜細亜・南亜細亜・亜剌比亜で使われている文字体系だと、 そもそも幅を固定することなんて無茶すぎるでしょう。
そんなような事情ですから、たとえこの属性で「文字幅」単位の指定をしたところで、 たぶん、期待した結果は得られないでしょう。しかも、 HTML 4 仕様書によれば、 この属性はあまり実装されていません。
[16] table
要素の
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] この属性の値の型は %Length;
(SGML 的には CDATA
) です。
従って、無単位の画素数と百分率による割合のいずれかで指定できます。
百分率は利用可能な水平空間に対する割合と見なされます。
[27]
col
や colgroup
の幅が相対幅 (割合) で指定されているときには、
表自体の幅も指定しなければなりません。
IW:HTML4:"struct/tables.html#edef-TABLE"
(名無しさん)
[6] colgroup
要素の
width
属性は、
その列群に含まれる列の幅の既定値を表します。
(列群の幅ではないので注意。)
列群に含まれる列の幅は、 col
要素で別途指定されていればそれが使われます。
そうでない場合は colgroup
の値が使われます。
仕様書: HTML 4 IW:HTML4:"struct/tables.html#adef-width-COLGROUP"
[9] この属性は省略可能です。
HTML 4 では多くの要素型の width
属性は非推奨とされていますが、 colgroup
要素では非推奨ではありません。 (他の表系要素型と同じく、
表のレンダリングにかかわる特殊事情によるものだと思われます。)
[7] この値の型は %MultiLength;
(SGML 的には CDATA
) です。
通常の %MultiLength;
型で認められる画素単位の整数値
(%Pixels;
< %Length;
)、
百分率値 (%Length;
)、
相対長 (%MultiLength;
) の他に、
特別に、 0*
という指定ができます。
[8] 値 0*
は、列の内容に必要な最小の幅を表します。
この指定があると、表のレンダリングのために列の内容をすべて知らなければならないので、
徐々にレンダリングすることが難しくなります。
HTML 4 仕様書は著者に注意を促しています。
[10] col
要素の
width
属性には、
列の幅を指定します。
(列の集合の幅ではないことに注意してください。
span
属性が 2
以上であっても、適用されるのはそれぞれの列に対してです。)
仕様書: HTML 4 IW:HTML4:"struct/tables.html#adef-width-COL"
[11] この属性は省略可能です。
省略した場合で、親 colgroup
要素があって、
そこに width
属性が指定されていれば、
その値が使われます。
HTML 4 では多くの要素型の width
属性は非推奨とされていますが、 col
要素では非推奨ではありません。 (他の表系要素型と同じく、
表のレンダリングにかかわる特殊事情によるものだと思われます。)
[12] この値の型は %MultiLength;
(SGML 的には CDATA
) です。
HTML 4 仕様書には、 colgroup
で使える 0*
という指定が可能かどうか明記されていませんが、
width
属性の意味は colgroup
要素のものと同じと書かれていることや、
colgroup
の属性が col
の属性の既定値となることから考えても、
使えると取るのが自然でしょう。
[78] HTML5 のレンダリングの章では maps to the dimension property
とされており Web Applications 1.0、 HTML4 でいう %Length;
相当です。
[13] 仕様書: HTML 4 IW:HTML4:"struct/tables.html#column-width"
列幅の指定には 3 (+ 1) 通りの方法があります。
のような無単位数の指定がこれにあたります。 固定で指定されていれば、 表を最初の方から徐々に表示していくことができます。
width
="30%"
のような指定がこれに当たります。
この割合は表に利用できる空間
(左右の余白の間で、浮動を含む。)
に対するものです。
この場合も最初の方から徐々に表示していくことができます。table
要素に width
属性が指定されている時には徐々に表示していくことができますが、
そうで無い場合には表のすべてのデータを読み終わらないと幅を決定できません。UA は、表のレンダリング中にあるこまの表示に必要な幅が足りていない時には再描画してもかまいません。
<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>
たとえば、 HTML 4 仕様書にあるこの例では、
最初の2つの列の幅は何も考えずに決定できますが、
残りの列の幅はすべてのこまを読まないと決定できません。
3番目の列の幅は、 0*
ですから、
必要な最小の幅です。残りの4つは内容に必要な幅を
2 : 1 : 3
の割合で取ります。
<TABLE width="200"> <COLGROUP span="10" width="15"> <COLGROUP width="*"> <COL id="penultimate-column"> <COL id="last-column"> <THEAD> <TR><TD> ... ...rows... </TABLE>
同じく HTML 4 仕様書にあるこの例は、
table
要素に width
属性があるので、 *
の指定がありながらも表全体を読まずに列幅を決定できます。
この表には12個の列があって、最初の10列はそれぞれ15画素、 最後の2列は25画素ずつ使います。
[21] th
要素および td
要素の width
属性は、
視覚UA に対して推奨こま幅を指定します。
仕様書:
[23] この属性の値は %Length
です HTML 4.01。
(HTML 4.0 では %Pixels
でしたが、 minor typo
であるとして HTML 4.01 A.1.3、百分率値を認めるために HTML 4.01 で %Length
に改められました。)
SGML 的には CDATA
です。
[24] この属性は省略可能です。
[25] こまに一々幅なんて指定しても何の役に立つんだか。
<TD BACKGROUND="gradient.jpg" STYLE="background-repeat : repeat-x;" WIDTH="*" VALIGN="top">
(名無しさん)
[26]
表や列の幅が固定長であっても、 cellspacing
や cellpadding
のために必要であれば、 UA
は幅をその分ひろげてもかまいません
(が、そうする必要はありません。)
(IW:HTML4:"struct/tables.html#margins" を参照。)
[34] HTML の img
要素および
object
要素の width
属性は、
画像や物体の自然な幅を上書きする値を指定します。
[35] 仕様書: HTML 4 IW:HTML4:"struct/objects.html#img-wh"
[55]
HTML 4 の DTD の注釈 (参考)
には override width
と書かれています。
(名無しさん [sage])
[38] この属性は、 HTML 4 では個別の属性としては非推奨にされていませんが、 視覚表現に関わる属性はすべて非推奨と書かれている章 (13.7 Visual presentation of images, objects, and applets IW:HTML4:"struct/objects.html#visual") の中で規定されています。
[36] この属性の値は %Length
です。
SGML 的には CDATA
です。
百分率値で指定されたときには、利用可能な水平幅の対する割合として解釈します。 (自然な画像・物体の幅に対してではありません。) [HTML 4]
[37] この属性は省略可能です。
[40] 物体が画像であるときには、指定された幅に合わせて拡大・縮小されます。 UA は、
物体や画像が width
に一致するよう拡大・縮小に最善を尽くすべきです。
[HTML 4]
[41] width
属性が指定されていると、 UA
は物体を取寄せる前に必要な領域を予約して残りの部分をレンダリングすることができます。
物体が到着しても全体ないし物体以後の部分をレンダリングし直さずに済みます。
回線や計算機の能力が貧弱だった時代には、
この理由から width
や height
を img
要素に指定することが好ましいと言われていたこともありました。
[62] img
要素の width
属性は HTML 2.0 の拡張として Netscape Navigator
が実装しました。
この属性は主として文書のレンダリングの高速化のために追加されたと説明されています。 この属性が指定されていると、画像の到着を待たずにレンダリングができるとされています。
width
と
height
を指定汁みたいな話だったような。)
[42] width
属性が物理属性か論理属性か
(Strict な文書で使用するべきかどうか) の問題は height
属性の説明を見てください。
[57] XHTML-Print http://www.w3.org/TR/2006/PR-xhtml-print-20060131/#s.4.1.2
<img height="20 mm" width="20 mm" alt="Example Image" src="data:image/jpeg;base64,aGh67Fghsapa0Hji7dfGSweTa . . . " />
[28] HTML の applet
要素の
width
属性は、
applet の初期表示領域 (applet が作る窓や対話を除きます。)
の幅を指定します。
[29] 仕様書: HTML 4 IW:HTML4:"struct/objects.html#adef-width-APPLET"
[56]
HTML 4 DTD の注釈 (参考) には
initial width
と書かれています。
(名無しさん [sage])
[30] この属性は HTML 4 で要素型ごと非推奨とされています。
object
要素型とスタイル・シートで代替できます。
[31] この属性の値は %Length
です。
SGML 的には CDATA
です。
大文字・小文字は区別されません [HTML 4] 。
(区別しようにも大文字も小文字も使えないのですが。)
[32] この属性は必須です。省略できません。
[43] HTML の iframe
要素の
width
属性は、
行内フレームの幅を指定します。
[44] 仕様書:
[45] この属性の値は %Length
です。
SGML 的には CDATA
です。
[46] この属性は省略可能です。
[48] HTML の hr
要素の width
属性は、
水平線の幅を指定します。
[49] 仕様書:
[51] この属性の値は %Length
です。
SGML 的には CDATA
です。
HTML 3.2, HTML 4
[52] この属性は省略可能です。省略時の既定値は
100%
です。 (DTD 的には #IMPLIED
) です。
HTML 3.2, HTML 4
[61] hr
要素の size
属性は HTML 2.0 の拡張として Netscape Navigator
で実装されました。
width
属性は、
水平線を画素の数か文書の幅に対する百分率値で指定するものとされていました。
width
属性が指定されなかった場合、
頁の幅と同じだけの幅になるとされていました。
[53] この属性は HTML 3.2 で最初に公式な HTML 仕様に導入され、 HTML 4 で非推奨とされました。
[54]
HTML 2.0 では hr
は幅一杯に引かれると規定されており、
width
属性の既定値 (>>52) と一致します。
HTML 2.0 は
、 HTML 3.2
はhr
は 幅一杯百分率値は左右余白間の割合
、 HTML 4 は
と述べています。他の要素との関係で、 100%
であっても必ずしも画布一杯に線が引けるとは限りませんから、
HTML 4 の規定は不正確になっていると言えます。100%
はすなわち画布全体
[59] 公開メモ日記 - Webサイトの横幅を固定した時のピクセルサイズ http://knoa.jp/memo/?id=2006-10-19+12:48 (名無しさん 2006-10-19 14:51:48 +00:00)
[60]
div width - Google 検索 (2007-01-06 23:59:44 +09:00
版) http://www.google.co.jp/search?q=div+width
</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>
(名無しさん 2007-01-06 15:04:27 +00:00)
[63]
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 によれば width
の算出値は
width
が適用されない場合 auto
で、
非置換行内要素には適用されないのですが、
Firefox 2 でも WinIE 6 でも auto
にはなりません。
Opera 9 では 0px
になります。
(名無しさん)
[65]
>>63 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
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 は表や表群の場合使用値 (?) が返されるようです
(この例では 2px
)。
Opera 9 では 0px
です。
WinIE 6 では指定値と同じです (もっとも WinIE 6
では tr
も tbody
も 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 getComputedStyle
は display: inline
の時は指定値を、
それ以外の時は使用値を返すようです。
(名無しさん)
[70]
>>67 この4つは min-width
や max-width
でも使えますが、 height
系では使えないようです。
(名無しさん)
[71] IE5~IE7でも、RFC2397(Dataスキーム, DataURI)を使えるようにした! - uupaaの開発日記 ( 版) 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を勝手にバッテンアイコンのサイズに書き換えるのが原因です。
ClientRect
界面 width
属性、 height
属性[72] CSSOM View WD には ClientRect
に width
と height
がありますが、現時点でどの Webブラウザの getBoundingClientRect
が返す値もこれらの属性を持っていないみたいです。
document.width
, document.height
[74] Firefox3: 常に (モードに関わらず) body
の border box の幅と高さ。
[75] Safari3: 常に (モードに関わらず) 画布の幅と高さ。
[76] Opera 9.52、WinIE7: 未対応。
[79] [whatwg] question on @width and @height attributes on <video> ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-January/029742.html
[80] Document Structure – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SVGElementWidthAttribute
[81] Document Structure – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElementWidthAttribute
[82] Document Structure – SVG 1.1 (Second Edition) ( ( 版)) http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ImageElementWidthAttribute
[83] Web Applications 1.0 r6706 Compat with other browsers. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=6705&to=6706
[84] Packaged Web Apps (Widgets) - Packaging and XML Configuration (Second Edition) ( ( 版)) http://w3c.github.com/packed-webapps/packaging/#the-width-attribute
[85] [whatwg] [Rendering] zero width attributes on table, th, td should be ignored ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-January/038496.html
[86] Support `width="0"` except for table-related elements · whatwg/html@06b0238 ( 版) https://github.com/whatwg/html/commit/06b0238b34c7dfd2f74c4dee6ed8410e9d79b992
[73] Make OffscreenCanvas resizeable (junov著, ) https://github.com/whatwg/html/commit/1a4bed42e68e42db712bfcea6e7505b06a589104
[89] Remove <applet> (zcorpan著, ) https://github.com/whatwg/html/commit/b9b9d60f9451c05f8e8d542e4094f987ae1a5fb8
[90] [css-sizing] Import full propdef tables for all sizing properties, an… (tabatkins著, ) https://github.com/w3c/csswg-drafts/commit/aab263247a81dce2d2c4be5e6653d46ee63e261d
[91] Editorial: add a definition for canvas width/height numeric values (GloverDonovan著, ) https://github.com/whatwg/html/commit/822a7bd4097af8b9a5f65ae74c4a13dd9b33e976
[92] What happens when setting the canvas width/height to an invalid value? · Issue #2066 · whatwg/html () https://github.com/whatwg/html/issues/2066
[93] Add cross-reference for obtaining numeric values by GloverDonovan · Pull Request #3475 · whatwg/html () https://github.com/whatwg/html/pull/3475
[94] Map 0 for <col>'s width="" as well (gurjotsingh4398著, ) https://github.com/whatwg/html/commit/cc8ad89d84b84412a0e7856bcc876d2682c21e63
[95] Editorial: removed " (ignoring zero)" text by gurjotsingh4398 · Pull Request #4927 · whatwg/html () https://github.com/whatwg/html/pull/4927