/[pub]/suikawiki/sw4data/ids/2/180.txt
Suika

Contents of /suikawiki/sw4data/ids/2/180.txt

Parent Directory Parent Directory | Revision Log Revision Log


Revision 1.4 - (hide annotations) (download)
Sat Jan 3 07:31:13 2009 UTC (15 years, 11 months ago) by wakaba
Branch: MAIN
Changes since 1.3: +9 -4 lines
File MIME type: text/plain
updated by (anon)

1 wakaba 1.2
2    
3     * table 要素 border 属性 (HTML, XHTML 1)
4    
5     [1] [[HTML]] の [CODE(HTMLe)[[[table]]]] 要素の
6     [DFN[[CODE(HTMLa)[border]] 属性]]は、表の外側の枠線の幅を指定します。
7    
8     仕様書: [[HTML 4]]
9     <IW:HTML4:"struct/tables.html#adef-border-TABLE">
10    
11     [26]
12     HTML 4 DTD の[[注釈]] (参考) には
13     [Q[The BORDER attribute sets the thickness of the frame around the table. The default units are screen pixels.]]
14     という説明があります。単位についての記述は [[HTML 3]] の名残でしょうか。
15     ([[名無しさん]] [sage])
16    
17     [[#comment]]
18    
19    
20     ** スタイル・シート代替
21    
22     [2] この属性は HTML 4 では'''非推奨'''とされているわけではありませんが、
23     視覚的指定に過ぎないことから、代わりに[[スタイル・シート]]で指定することが望ましいと考えられます。
24    
25     [3] [[CSS]] や [[XSL]] では、
26     [SAMP(CSS)[[[border-width]]]] 系[[特性]]・[[属性]]で代用できます。
27    
28     [[#comment]]
29    
30    
31     ** 属性値
32    
33     [4] この属性の値は [CODE[%[[Pixels]]]] です。
34     幅を[[画素]]単位で指定します。
35    
36     (HTML 4 仕様書は、 [CODE(HTMLe)[[[img]]]]
37     要素などの同名属性との型の違いに注意を促しています。)
38    
39     [[SGML]] 的には [CODE(SGML)[[[CDATA]]]] です。
40     ([CODE(SGML)[[[NUMBER]]]] でもよかったのにと思いますが。)
41    
42     [5] この属性は省略可能です。
43    
44     [6] この属性は [SAMP(HTML)[border="2"]] のように記述しますが、
45     [[属性値指定]]を省略したような [SAMP(HTML)[border]]
46     という指定も使われてきました。この指定は [[SGML]]
47     的立場が微妙でしたが、最終的に[[列挙型]]の [CODE(HTMLa)[[[frame]]]]
48     属性の一属性値に収まりました。 >>7 を参照。
49    
50     [[#comment]]
51    
52    
53     ** 他の属性への影響
54    
55     [8] HTML 4 仕様書は、後方互換性のため、 [[UA]]
56     は次のように解釈するべき (should) としています。
57    
58     - [CODE(HTML)[border="0"]] は [CODE(HTML)[frame="void"]]
59     を暗示し、また、別途指定がない限り、 [CODE(HTML)[rules="none"]] を暗示する
60     - [CODE(HTMLa)[border]] の他の値は [CODE(HTML)[frame="border"]]
61     を暗示し、また、別途指定がない限り、 [CODE(HTML)[rules="all"]] を暗示する
62     - [CODE(HTMLe)[table]] 要素の[[開始タグ]]中の値 [CODE(HTML)[border]]
63     は [CODE(HTMLa)[frame]] 属性の値と解釈するべきである。
64     これは [CODE(HTMLa)[rules="all"]] を暗示し、
65     [CODE(HTMLa)[border]] 属性になんらかの (零でない) 既定値を暗示する。
66    
67     [CODE(HTMLa)[[[rules]]]] には[Q[別途指定がない限り]]が係っているのに、
68     [CODE(HTMLa)[[[frame]]]] はそうでないのは、
69     [CODE(HTMLa)[frame]] に陽に指定があっても上書きされるということでしょうか?
70     最後の場合の [CODE(HTMLa)[rules]] にも修飾がありませんが、
71     これはどうでしょうか? (SGML 的には2つ目と [CODE(HTMLa)[border]]
72     属性の存在以外区別できないはずですが。)
73    
74     [11]
75     そういえば [CODE(HTMLa)[border]] 属性の既定値の規定はありませんが、
76     他の属性を見て UA が勝手に決めてよいのでしょうか
77     (よくないと困るか)。
78    
79     [15]
80     >>8 の3つ目 [Q[[CODE(HTMLa)[frame]] 属性の値と解釈するべき]]って、
81     それ以外の解釈は明らかに SGML
82     違反なのですから、 SGML 応用たる HTML
83     の仕様書が認めちゃいかんと思うのですがねぇ。
84     ([[名無しさん]])
85    
86     [27]
87     HTML 4 DTD の[[注釈]] (参考) には
88    
89     > The value "border" is included for backwards compatibility with
90     <TABLE BORDER> which yields frame=border and border=implied
91     For <TABLE BORDER=1> you get border=1 and frame=implied. In this
92     case, it is appropriate to treat this as frame=border for backwards
93     compatibility with deployed browsers.
94    
95     と書かれています。
96     ([[名無しさん]] [sage])
97    
98     [[#comment]]
99    
100    
101     ** 例
102    
103     - [9] [SAMP(HTML)[<TABLE border="2">]] == [SAMP(HTML)[<TABLE border="2" frame="border" rules="all">]]
104     (HTML 4 仕様書より)
105     - [10] [SAMP(HTML)[<TABLE border>]] == [SAMP(HTML)[<TABLE frame="border" rules="all">]]
106     (HTML 4 仕様書より)
107    
108     [14]
109     [PRE(HTML)[
110     <TABLE border="1"
111     summary="This table charts the number of cups
112     of coffee consumed by each senator, the type
113     of coffee (decaf or regular), and whether
114     taken with sugar.">
115     <CAPTION>Cups of coffee consumed by each senator</CAPTION>
116     <TR>
117     <TH>Name</TH>
118     <TH>Cups</TH>
119     <TH>Type of Coffee</TH>
120     <TH>Sugar?</TH>
121     <TR>
122     <TD>T. Sexton</TD>
123     <TD>10</TD>
124     <TD>Espresso</TD>
125     <TD>No</TD>
126     <TR>
127     <TD>J. Dinnen</TD>
128     <TD>5</TD>
129     <TD>Decaf</TD>
130     <TD>Yes</TD>
131     </TABLE>
132     ]PRE]
133    
134     (HTML 4 仕様書より)
135    
136     [13]
137     [PRE(HTML)[
138     <TABLE border="5" frame="vsides" rules="cols">
139     <TR> <TD>1 <TD>2 <TD>3
140     <TR> <TD>4 <TD>5 <TD>6
141     <TR> <TD>7 <TD>8 <TD>9
142     </TABLE>
143     ]PRE]
144    
145     (HTML 4 仕様書より)
146    
147     レンダリング例:
148     [PRE[
149     # 1 | 2 | 3 #
150     # 4 | 5 | 6 #
151     # 7 | 8 | 9 #
152     ]PRE]
153    
154     [[#comment]]
155    
156    
157     * table 要素の開始タグの値 border (HTML, XHTML 1)
158    
159     [7] [[HTML]] の [CODE(HTMLe)[[[table]]]] 要素の[[開始タグ]]には、
160     [DFN[[CODE(HTML)[border]]]] という値を指定できます。
161    
162     これは、 [CODE(HTMLa)[border]] 属性の属性値の省略と解釈されてい
163     (ることもあり) ました。
164     しかし、 [[SGML]] 的にはありえないので、
165     最終的には[[列挙型]]の [CODE(HTMLa)[[[frame]]]] 属性の値 [CODE(HTML)[border]]
166     と別の属性 [CODE(HTMLa)[border]] として再定義されるに至りました。
167    
168     [12] 未調査:
169     - [CODE(HTML)[border]] と [CODE(HTML)[border=[VAR[n]]]]
170     はどちらが先か、同時か。
171     - [[DTD]] での表現の変遷。
172    
173     [24]
174     [CODE(HTMLa)[border]] (元)真偽値属性はなんと
175     HTML 仕様案に一番最初に表が入った時
176     (当時はまだ要素型名が
177     [CODE(HTMLe)[table]] じゃなくて
178     [CODE(HTMLe)[[[tbl]]]] だった。)
179     からずっとあります。
180    
181     [CODE(HTMLa)[border]] なしが default
182     なのだから [CODE(HTMLe)[table]] は元々レイアウト用だったのだろ、とか勝手に思い込んでいる人もいるようですが、
183     ただ単に、線を引かないという指定よりも線を引くという指定の方が分かりやすいからとかそんなような理由でしょう。
184     参考になった [[LaTeX]] などの表モデルも[Q[どこに線を引かないか]]ではなく[Q[どこに線を引くか]]の指定ですし。
185     ([[名無しさん]])
186    
187     [30]
188     [[WinIE]], [[Firefox 1.5]], [[Opera 8]]で確認してみましたが、
189     [PRE(HTML example code)[
190     <table border>
191     ]PRE]
192    
193    
194     [PRE(HTML example code)[
195     <table border="1">
196     ]PRE]
197    
198     と内部的に扱われているようです。
199    
200     [[HTML 5]]でもそうするつもりだと前にIanが書いていた気もします。
201     ([[名無しさん]])
202    
203     [[#comment]]
204    
205    
206     * object 要素・img 要素 border 属性 (HTML, XHTML 1)
207    
208     [16] [[HTML]] の [CODE(HTMLe)[[[object]]]] 要素および
209     [CODE(HTMLe)[[[img]]]] 要素の [DFN[[CODE(HTMLa)[border]] 属性]]は、
210     [[物体]]や[[画像]]を囲む[[枠]]の太さを指定します。
211    
212     [17] 仕様書:
213     - [[HTML 4]]
214     -- [CODE(HTMLa)[border]] 属性 <IW:HTML4:"struct/objects.html#idx-border">
215     -- [CITE[HTML 4 Changes]]
216     <IW:HTML4:"appendix/changes.html#h-A.1.1.9">
217    
218     [25]
219     HTML 4 DTD の[[注釈]] (参考) には
220     [Q[link border width]] と書かれています。
221     ([[名無しさん]] [sage])
222    
223     [[#comment]]
224    
225    
226     ** 代替
227    
228     [18] この属性は HTML 4 で'''非推奨'''とされています。
229     [[スタイル・シート]]で代替できます。
230    
231     [19] [[CSS]] の場合、 [SAMP(CSS)[[[border]]]]
232     系特性群で HTML よりも遥かに詳細な指定ができます。
233    
234     [[#comment]]
235    
236    
237     ** 属性値
238    
239     [20] この属性の値は [CODE(SGML)[%[[Pixels]]]] です [SRC[HTML 4.01 13.7.3]]
240     [WEAK[(以前は [CODE(SGML)[%[[Length]]]] とされていました [SRC[HTML 4.0 13.7.3]])]]。
241     [[SGML]] 的には [CODE(SGML)[[[CDATA]]]] です。
242    
243     [29]
244     [CODE(HTMLe)@en[[[img]]]] [[要素]]では、''非標準''の値
245     [CODE(HTML)@en[[[noborder]]]] が観測されています。
246    
247     [21] この属性は省略可能です。省略した場合の既定値は UA 依存です。 [SRC[HTML 4 13.7.3]]
248    
249     [[#comment]]
250    
251    
252     ** レンダリング
253    
254     [22] [[mosaic]] 以来の視覚ブラウザの典型既定レンダリングは、
255     画像が ([CODE(HTMLe)[[[a]]]] の子孫で)
256     [[始点アンカー]]であるときにはリンク前景色で四辺を枠線で囲み、
257     それ以外のときには枠線なしです。
258    
259     [[#comment]]
260    
261    
262     ** 不思議解釈
263    
264     [23] >>22 の既定レンダリングはえらく不評らしく、
265     [CODE(HTMLe)[a]] 内の [CODE(HTMLe)[img]] には
266     [CODE(HTML)[[CODE(HTMLa)[border]]="0"]]
267     を指定するという[Q[技]]が[[タグ講座]]でよく紹介されていましたし、
268     実際にもよく使われていました。
269    
270     それに対してリンクであることがわかりにくくなるから好ましくないとの意見もありました。
271    
272     [[#comment]]
273    
274    
275     ** 歴史
276    
277     [32] [CODE(HTMLe)@en[[[img]]]] [[要素]]の
278     [CODE(HTMLa)@en[[[border]]]] [[属性]]は [[HTML 2.0]] の拡張として
279     [[Netscape Navigator]] が実装しました。
280    
281     [[画像]]の周りの[[枠線]]の[[太さ]]が指定できるとされていました。
282     [[リンク]]の一部たる[[画像]]の [CODE(HTMLa)@en[[[border]]]]
283     を [CODE(HTML)[[[0]]]] にすると[[利用者]]が混乱する虞があると警告されていました。
284    
285     ;; [CITE[Netscape Navigator Extensions to HTML]]
286     <http://web.archive.org/web/20000415023954/http://www.netscape.com/home/services_docs/html-extensions.html>
287    
288     [[#comment]]
289    
290    
291     ** メモ
292    
293     [33]
294     [CITE@ja[入力フォームとマルチメディアを活用する]] ([CODE[2007-06-10 21:04:18 +09:00]] 版) <http://www.atmarkit.co.jp/fmobile/rensai/xhtml04/xhtml04.html>
295    
296     > HTMLの<img>タグとまったく同様。ただしモバイル向けの場合、リンクを張ったときには「border="1"」にして、利用者にリンクを張っている画像であることを告知するのが暗黙の了解となっている。ピクチャー広告(通常のWebでいうバナー広告のこと。モバイルではこのように呼ぶことが多い)などの扱いに気を付けたい。
297    
298     この連載は妄想が多いので本当かどうか知りませんが。
299     ([[名無しさん]])
300    
301     [[#comment]]
302    
303    
304     * メモ
305    
306     [28]
307     [CITE[[WebKit] CSS3のborderとbackground(一部)をサポート]] <http://d.hatena.ne.jp/eccoHowling/20050828#p1>
308     ([[名無しさん]] [WEAK[2005-08-29 01:43:15 +00:00]])
309    
310     [31]
311     [CITE@ja[Bug 4355 px以外の単位を使うとborderの太さが一定にならない - WebStudio]] ([CODE[2006-11-28 11:04:46 +09:00]] 版) <http://www.d-toybox.com/studio/weblog/show.php?mode=single&id=2006122802>
312     ([[名無しさん]] [WEAK[2006-12-28 02:07:28 +00:00]])
313    
314     [34]
315     [[WinIE 6]] では
316     [CODE(CSS)@en[[[border]]]]、[CODE(CSS)@en[[[border-top]]]]
317     などに
318     <http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20border%3A%20thin%200%20thick%20thin%200%200%200%200%200%200%201px%202em%2010mm%20red%20blue%200%20thick%20%23C0C0C0%20orange%20dashed%20none%20dotted%20inset%3B%0D%0A%7D%0D%0A;h=;p=n;x=style-element> のように値を1つ以上いくつでも指定できるようです。
319     [CODE(CSS)@en[[[border-color]]]]、[CODE(CSS)@en[[[border-style]]]]、
320     [CODE(CSS)@en[[[border-width]]]] それぞれで最後に指定された値が有効になります。指定されなかった種類はまったく設定されません
321     ([[CSS 2.1]] によれば[[初期値]]が設定されなければなりません)。
322     [CODE(DOMa)@en[[[border]]]] や [CODE(DOMa)@en[[[borderTop]]]]
323     などに値が設定されるのは、構成する3種類 (または3種類×4辺)
324     のすべてに値が設定されている場合のみのようです。
325     ([[名無しさん]])
326    
327     [35]
328     [[Firefox]] 2 や [[Opera]] 9 には >>34 のような[[奇癖]]はなく、
329     [[CSS 2.1]] 通りに実装しているようです。
330     ([[名無しさん]])
331    
332     [36]
333     色の[[初期値]]の扱いについては [CODE(CSS)@en[[[border-color]]]] の項を参照。
334    
335     ([[名無しさん]])
336    
337     [37]
338     <http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20border-top%3A%20medium%20dotted%3B%0D%0A%7D%0D%0A;h=%3Cp%3E%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0D%0A%20%20var%20sd%20%3D%20getComputedStyle%20(el%2C%20null)%3B%0D%0A%20%20w%20(sd.borderTop)%3B%0D%0A%22%3E%3Ccode%3EgetComputedStyle%3C%2Fcode%3E%3C%2Fbutton%3E%0D%0A%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20var%20el%20%3D%20document.getElementsByTagName%20('p')%5B0%5D%3B%0D%0A%20%20var%20sd%20%3D%20el.currentStyle%3B%0D%0A%20%20w%20(sd.borderTop)%3B%0D%0A%22%3E%3Ccode%3EcurrentStyle%3C%2Fcode%3E%3C%2Fbutton%3E%0D%0A;p=n;x=style-element>
339     ↑ こんな感じのやつででてくる値を調べてみた
340    
341     [[Firefox]] 2 [CODE(DOMm)@en[[[getComputedStyle]]]]: [[空文字列]]
342    
343     [[WinIE 6]] [CODE(DOMa)@en[[[currentStyle]]]]:
344     [CODE(JS)@en[[[undefined]]]]
345     ([CODE(DOMa)@en[[[currentStyle]]]] には [[shorthand]]
346     の[[DOM属性]]がないらしい)
347    
348     [[Opera]] 9:
349     ,指定した値 ,[CODE(DOMm)@en[[[getComputedStyle]]]] ,[CODE(DOMa)@en[[[currentStyle]]]]
350     ,[CODE(CSS)@en[[[medium]]]] ,[CODE(CSS)[0[[px]] #000000]] ,[CODE(CSS)[3[[px]]]]
351     ,[CODE(CSS)@en[[[medium]] [[solid]]]] ,[CODE(CSS)[3[[px]] [[solid]] #000000]] ,[CODE(CSS)[3[[px]] [[solid]]]]
352     ,[CODE(CSS)@en[10[[px]] [[dotted]]]] ,[CODE(CSS)[10[[px]] [[dotted]] #000000]] ,[CODE(CSS)[10[[px]] [[dotted]]]]
353     ,[CODE(CSS)[10[[mm]] [[inset]] [[blue]]]] ,[CODE(CSS)[38[[px]] [[inset]] #0000ff]] ,[CODE(CSS)[10[[mm]] [[inset]] #0000ff]]
354    
355     ([[名無しさん]])
356    
357     [38]
358     [CITE@en[border model - onderhond blog - onderhond.com]] ([CODE[2008-05-05 20:43:42 +09:00]] 版) <http://www.onderhond.com/blog/onderhond/border-model-inconsistencies>
359     ([[名無しさん]])
360    
361     [39]
362     [CITE@ja[テーブルのボーダーに余白がある場合のサンプル|CSS HappyLife]] ([TIME[2008-05-23 19:07:12 +09:00]] 版) <http://css-happylife.com/log/css-template/000356.shtml>
363    
364     * 境界領域
365    
366     [40] [[箱]]の[[余白領域]]と[[詰め領域]]の間の[[領域]]を[DFN[[RUBYB[境界領域]@en[border area]]]]といいます。
367    
368 wakaba 1.4 [42] [[CSS 2.1]] には「optional」と書いてあるので、幅 0 の時は厳密に言えば[[境界領域]]は存在しないということになります。
369 wakaba 1.3
370 wakaba 1.4 [43] [[境界領域]]の外周を[DFN[[RUBYB[境界辺]@en[border edge]]]]と呼びます。
371     [[境界領域]]が存在しない時は[[詰め辺]]と同じです。
372     [SRC@en[[[CSS 2.1]] 8.1]]
373 wakaba 1.2
374 wakaba 1.4 [44] [[境界辺]]に囲まれる領域を[DFN[[RUBYB[境界箱]@en[border box]]]]と呼びます。
375     [SRC@en[[[CSS 2.1]] 8.1]]
376 wakaba 1.2
377 wakaba 1.4 * 仕様書
378    
379     [41] [CITE@en[Box model]] ([TIME[2007-07-18 02:08:55 +09:00]] 版) <http://www.w3.org/TR/2007/CR-CSS21-20070719/box.html#box-dimensions>

admin@suikawiki.org
ViewVC Help
Powered by ViewVC 1.1.24