| 1 |
|
| 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 |
|
Parent Directory
| 
Revision Log