| 1 |
wakaba |
1.2 |
|
| 2 |
|
|
[28]
|
| 3 |
|
|
[CITE[[WebKit] CSS3のborderとbackground(一部)をサポート]] <http://d.hatena.ne.jp/eccoHowling/20050828#p1>
|
| 4 |
|
|
([[名無しさん]] [WEAK[2005-08-29 01:43:15 +00:00]])
|
| 5 |
|
|
|
| 6 |
|
|
[31]
|
| 7 |
|
|
[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>
|
| 8 |
|
|
([[名無しさん]] [WEAK[2006-12-28 02:07:28 +00:00]])
|
| 9 |
|
|
|
| 10 |
|
|
[34]
|
| 11 |
|
|
[[WinIE 6]] では
|
| 12 |
|
|
[CODE(CSS)@en[[[border]]]]、[CODE(CSS)@en[[[border-top]]]]
|
| 13 |
|
|
などに
|
| 14 |
|
|
<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つ以上いくつでも指定できるようです。
|
| 15 |
|
|
[CODE(CSS)@en[[[border-color]]]]、[CODE(CSS)@en[[[border-style]]]]、
|
| 16 |
|
|
[CODE(CSS)@en[[[border-width]]]] それぞれで最後に指定された値が有効になります。指定されなかった種類はまったく設定されません
|
| 17 |
|
|
([[CSS 2.1]] によれば[[初期値]]が設定されなければなりません)。
|
| 18 |
|
|
[CODE(DOMa)@en[[[border]]]] や [CODE(DOMa)@en[[[borderTop]]]]
|
| 19 |
|
|
などに値が設定されるのは、構成する3種類 (または3種類×4辺)
|
| 20 |
|
|
のすべてに値が設定されている場合のみのようです。
|
| 21 |
|
|
([[名無しさん]])
|
| 22 |
|
|
|
| 23 |
|
|
[35]
|
| 24 |
|
|
[[Firefox]] 2 や [[Opera]] 9 には >>34 のような[[奇癖]]はなく、
|
| 25 |
|
|
[[CSS 2.1]] 通りに実装しているようです。
|
| 26 |
|
|
([[名無しさん]])
|
| 27 |
|
|
|
| 28 |
|
|
[36]
|
| 29 |
|
|
色の[[初期値]]の扱いについては [CODE(CSS)@en[[[border-color]]]] の項を参照。
|
| 30 |
|
|
|
| 31 |
|
|
([[名無しさん]])
|
| 32 |
|
|
|
| 33 |
|
|
[37]
|
| 34 |
|
|
<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>
|
| 35 |
|
|
↑ こんな感じのやつででてくる値を調べてみた
|
| 36 |
|
|
|
| 37 |
|
|
[[Firefox]] 2 [CODE(DOMm)@en[[[getComputedStyle]]]]: [[空文字列]]
|
| 38 |
|
|
|
| 39 |
|
|
[[WinIE 6]] [CODE(DOMa)@en[[[currentStyle]]]]:
|
| 40 |
|
|
[CODE(JS)@en[[[undefined]]]]
|
| 41 |
|
|
([CODE(DOMa)@en[[[currentStyle]]]] には [[shorthand]]
|
| 42 |
|
|
の[[DOM属性]]がないらしい)
|
| 43 |
|
|
|
| 44 |
|
|
[[Opera]] 9:
|
| 45 |
|
|
,指定した値 ,[CODE(DOMm)@en[[[getComputedStyle]]]] ,[CODE(DOMa)@en[[[currentStyle]]]]
|
| 46 |
|
|
,[CODE(CSS)@en[[[medium]]]] ,[CODE(CSS)[0[[px]] #000000]] ,[CODE(CSS)[3[[px]]]]
|
| 47 |
|
|
,[CODE(CSS)@en[[[medium]] [[solid]]]] ,[CODE(CSS)[3[[px]] [[solid]] #000000]] ,[CODE(CSS)[3[[px]] [[solid]]]]
|
| 48 |
|
|
,[CODE(CSS)@en[10[[px]] [[dotted]]]] ,[CODE(CSS)[10[[px]] [[dotted]] #000000]] ,[CODE(CSS)[10[[px]] [[dotted]]]]
|
| 49 |
|
|
,[CODE(CSS)[10[[mm]] [[inset]] [[blue]]]] ,[CODE(CSS)[38[[px]] [[inset]] #0000ff]] ,[CODE(CSS)[10[[mm]] [[inset]] #0000ff]]
|
| 50 |
|
|
|
| 51 |
|
|
([[名無しさん]])
|
| 52 |
|
|
|
| 53 |
|
|
[38]
|
| 54 |
|
|
[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>
|
| 55 |
|
|
([[名無しさん]])
|
| 56 |
|
|
|
| 57 |
|
|
[39]
|
| 58 |
|
|
[CITE@ja[テーブルのボーダーに余白がある場合のサンプル|CSS HappyLife]] ([TIME[2008-05-23 19:07:12 +09:00]] 版) <http://css-happylife.com/log/css-template/000356.shtml>
|
| 59 |
|
|
|
| 60 |
wakaba |
1.22 |
[61] [[Chrome]] も [[Firefox]] も [CODE(CSS)@en['[[border]]']] を指定すると
|
| 61 |
|
|
[CODE(CSS)@en['[[border-image]]']] が[[初期値]]になります。 [[Firefox]]
|
| 62 |
|
|
ではその他 [CODE(CSS)@en['[[-moz-border-top-colors]]']] なども[[初期値]]になります。 [TIME[2013-09-07T10:07:59.200Z]]
|
| 63 |
|
|
|
| 64 |
|
|
[62] [[Chrome]] は明示されていない[[プロパティー]]を [CODE(CSS)@en[[[initial]]]]
|
| 65 |
|
|
にしますが、 [[Firefox]] は実際の[[初期値]]にします。 [TIME[2013-09-07T10:08:38.000Z]]
|
| 66 |
|
|
|
| 67 |
|
|
;; [63] [[Firefox]] の [CODE(CSS)@en['[[border-color]]']] の[[初期値]]は
|
| 68 |
|
|
[CODE(CSS)@en['[[-moz-use-text-color]]']] です。
|
| 69 |
|
|
|
| 70 |
|
|
[64] [[直列化]]の際、 [[Chrome]] では [CODE(CSS)@en['[[border-width]]']]、
|
| 71 |
|
|
[CODE(CSS)@en['[[border-style]]']]、[CODE(CSS)@en['[[border-color]]']] の1つか2つが
|
| 72 |
|
|
[CODE(CSS)@en[[[initial]]]] なら、それが省略されます。3つが [CODE(CSS)@en[[[initial]]]]
|
| 73 |
|
|
なら[[プロパティー]]の[[宣言]]自体が [CODE(CSS)@en[[[cssText]]]] に現れません。 [TIME[2013-09-07T10:12:07.200Z]]
|
| 74 |
|
|
|
| 75 |
|
|
[65] [[直列化]]の際、 [[Firefox]] は [CODE(CSS)@en['[[border-color]]']]
|
| 76 |
|
|
が [CODE(CSS)@en['[[-moz-use-text-color]]']] ならそれを省略しますが、それ以外は省略しません。 [TIME[2013-09-07T10:12:57.300Z]]
|
| 77 |
|
|
|
| 78 |
wakaba |
1.23 |
[66] [CODE(CSS)@en['[[border]]']] を構文解析して [[CSSOM]] に[[宣言]]として追加する時の各 [[longhand sub-properties]]
|
| 79 |
|
|
の順序は [[Firefox]] と [[Chrome]] で違っています。 [TIME[2013-09-07T10:31:56.300Z]]
|
| 80 |
|
|
|
| 81 |
|
|
[67] [CODE(CSS)@en['[[border]]']] にまとめきれないときにどの[[プロパティー]]を使って表現するかは [[Chrome]]
|
| 82 |
|
|
と [[Firefox]] で異なるようです。 >>66 の順序の違いによるものか、それ以外にも違うのかはよくわかりません。 [TIME[2013-09-07T10:33:15.500Z]]
|
| 83 |
|
|
|
| 84 |
wakaba |
1.2 |
* 境界領域
|
| 85 |
|
|
|
| 86 |
|
|
[40] [[箱]]の[[余白領域]]と[[詰め領域]]の間の[[領域]]を[DFN[[RUBYB[境界領域]@en[border area]]]]といいます。
|
| 87 |
|
|
|
| 88 |
wakaba |
1.4 |
[42] [[CSS 2.1]] には「optional」と書いてあるので、幅 0 の時は厳密に言えば[[境界領域]]は存在しないということになります。
|
| 89 |
wakaba |
1.3 |
|
| 90 |
wakaba |
1.4 |
[43] [[境界領域]]の外周を[DFN[[RUBYB[境界辺]@en[border edge]]]]と呼びます。
|
| 91 |
|
|
[[境界領域]]が存在しない時は[[詰め辺]]と同じです。
|
| 92 |
|
|
[SRC@en[[[CSS 2.1]] 8.1]]
|
| 93 |
wakaba |
1.2 |
|
| 94 |
wakaba |
1.4 |
[44] [[境界辺]]に囲まれる領域を[DFN[[RUBYB[境界箱]@en[border box]]]]と呼びます。
|
| 95 |
|
|
[SRC@en[[[CSS 2.1]] 8.1]]
|
| 96 |
wakaba |
1.2 |
|
| 97 |
wakaba |
1.7 |
[47] [[詰め領域]]と[[境界領域]]の間に[[スクロール・バー]]が挿入されることがあります。
|
| 98 |
|
|
|
| 99 |
|
|
** 仕様書
|
| 100 |
wakaba |
1.4 |
|
| 101 |
wakaba |
1.5 |
[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>
|
| 102 |
|
|
|
| 103 |
wakaba |
1.7 |
** 背景
|
| 104 |
wakaba |
1.5 |
|
| 105 |
|
|
[45] [[境界領域]]の[[背景]]は [CODE(CSS)@en[[[background]]]] に拠ります
|
| 106 |
|
|
[SRC@en[[[CSS 2.1]] 8.1]]。
|
| 107 |
wakaba |
1.6 |
|
| 108 |
wakaba |
1.7 |
** Viewport の境界箱
|
| 109 |
wakaba |
1.6 |
|
| 110 |
wakaba |
1.13 |
[46] [[Viewport境界箱]]の項を参照してください。
|
| 111 |
|
|
|
| 112 |
|
|
[48] [CITE@ja[小粋空間: CSS で table に斜線を引く方法]]
|
| 113 |
|
|
([TIME[2009-10-26 00:34:58 +09:00]] 版)
|
| 114 |
|
|
<http://www.koikikukan.com/archives/2009/10/26-000300.php>
|
| 115 |
|
|
|
| 116 |
|
|
[49] [CITE[Bug 452915 – Linked images have a blue border in default style sheet]]
|
| 117 |
|
|
([TIME[2010-03-02 15:08:24 +09:00]] 版)
|
| 118 |
|
|
<https://bugzilla.mozilla.org/show_bug.cgi?id=452915>
|
| 119 |
|
|
|
| 120 |
|
|
[50] [CITE['''['''whatwg''']''' borders on images inside links]]
|
| 121 |
|
|
([TIME[2010-04-08 08:58:43 +09:00]] 版)
|
| 122 |
|
|
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-April/025871.html>
|
| 123 |
|
|
|
| 124 |
|
|
[51] [CITE['''['''whatwg''']''' borders on images inside links]]
|
| 125 |
|
|
([TIME[2010-04-08 08:58:43 +09:00]] 版)
|
| 126 |
|
|
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-April/025871.html>
|
| 127 |
|
|
|
| 128 |
|
|
[52] [CITE['''['''whatwg''']''' borders on images inside links]]
|
| 129 |
|
|
([TIME[2010-07-29 07:27:58 +09:00]] 版)
|
| 130 |
wakaba |
1.22 |
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-July/027409.html>
|
| 131 |
|
|
|
| 132 |
|
|
[53] [CITE@en[Web Applications 1.0 r6008 7468]]
|
| 133 |
|
|
( ([TIME[2011-04-15 08:46:00 +09:00]] 版))
|
| 134 |
|
|
<http://html5.org/tools/web-apps-tracker?from=6007&to=6008>
|
| 135 |
|
|
|
| 136 |
|
|
[54] [CITE[IRC logs: freenode / #whatwg / 20110414]]
|
| 137 |
|
|
( ([TIME[2011-04-16 20:30:22 +09:00]] 版))
|
| 138 |
|
|
<http://krijnhoetmer.nl/irc-logs/whatwg/20110414#l-461>
|
| 139 |
|
|
|
| 140 |
|
|
[55] [CITE[IRC logs: freenode / #whatwg / 20110415]]
|
| 141 |
|
|
( ([TIME[2011-04-17 15:26:56 +09:00]] 版))
|
| 142 |
|
|
<http://krijnhoetmer.nl/irc-logs/whatwg/20110415#l-139>
|
| 143 |
|
|
|
| 144 |
|
|
[56] [CITE@en[HTML5 Tracker]]
|
| 145 |
|
|
([TIME[2011-10-14 12:11:06 +09:00]] 版)
|
| 146 |
|
|
<http://html5.org/tools/web-apps-tracker?from=6680&to=6681>
|
| 147 |
|
|
|
| 148 |
|
|
[57] [CITE@en[HTML5 Tracker]]
|
| 149 |
|
|
([TIME[2011-10-15 08:06:18 +09:00]] 版)
|
| 150 |
|
|
<http://html5.org/tools/web-apps-tracker?from=6683&to=6684>
|
| 151 |
|
|
|
| 152 |
|
|
[58] [CITE[NOTE-css-potential-19970819]]
|
| 153 |
|
|
( ([TIME[2000-03-13 23:37:56 +09:00]] 版))
|
| 154 |
|
|
<http://www.w3.org/TR/NOTE-css-potential-19970819#pgfId=1028243>
|
| 155 |
|
|
|
| 156 |
|
|
[59] [CITE@en[Web Applications 1.0 r7189 Revert the parts of r6008 that made <table border> conforming again. See http://lists.w3.org/Archives/Public/public-html/2011Apr/0419.html for the reasoning.]]
|
| 157 |
|
|
( ([TIME[2012-07-20 12:48:00 +09:00]] 版))
|
| 158 |
|
|
<http://html5.org/tools/web-apps-tracker?from=7188&to=7189>
|
| 159 |
|
|
|
| 160 |
|
|
[60] [CITE@en[Web Applications 1.0 r7623 Not sure why this was limited to hyperlinks only.]]
|
| 161 |
|
|
( ([TIME[2012-12-31 13:53:00 +09:00]] 版))
|
| 162 |
wakaba |
1.21 |
<http://html5.org/tools/web-apps-tracker?from=7622&to=7623> |
Parent Directory
| 
Revision Log