å§ããåã«ã CSSã®ã¿ã䜿çšããŠèšç®æ©ãäœæããåççãªçç±ã¯ãªãããšã«æ³šæããŠãã ããã æ¥œãã¿ã®ããã ãã«ãã£ãã
å®å®çã¯Firefox 4ããã³IE 9ã§ã®ã¿åäœããŸã
é»åã®éèŠãªã³ã³ããŒãã³ãã®1ã€ã¯ãå ¥åã倿ããæ©èœã§ãã CSSã®ã¿ã䜿çšããå Žåãå ¥åãä¿®æ£ããããã®ãªãã·ã§ã³ã¯éåžžã«éãããŠããŸãã ãããã£ãŠããã§ãã¯ããã¯ã¹ã¯ãã¹ãŠã®ãšã³ããªãç»é²ããããã«äœ¿çšãããŸãã ä»ã®èŠçŽ ã«å€æŽãé©çšããã«ã¯ããïŒãã§ãã¯ãç¶æ ãšãããã»ã¬ã¯ã¿ãŒã䜿çšã§ããŸãããããã¯éåžžã«åçŽãªã®ã§ã詳现ã«ã¯è§Šããã代ããã«å€ã®èšç®ããžãã¯ã«çŠç¹ãåœãŠãŸãã
æåã®ããŒã®ç»é²ã¯å®éã«ã¯åé¡ã§ã¯ãããŸããã9ã®ãã§ãã¯ããã¯ã¹ãã¯ãªãã¯ãããšã9ã®å ¥åãç»é²ãããããã§ãããŠãŒã¶ãŒã95ïŒ9ãš5ïŒãå ¥åããå Žåãæåã®åé¡ãçºçããŸãã ãã§ã«9ãç»é²ããŠããå Žåã¯ã5ã远å ããããšã¯ã§ããŸããïŒ14ã§ããããïŒã 10ãæããããšãã§ããŸããã90ãåŸãããŸãã10ãæããŠ5ãè¶³ãå¿ èŠããããŸãããããã£ãŠãcounterïŒïŒã¯ãŸã åå ããŠããªãããã§ãã
ãããå®çŸãã1ã€ã®æ¹æ³ã¯ããã©ã³ããµã€ãºã䜿çšããããšã§ãã ãã©ã³ããµã€ãºã®å©ç¹ã¯ãåèŠçŽ ã芪èŠçŽ ã®å€ãç¶æ¿ããããŒã»ã³ããŒãžãšãã¯ã»ã«ã®äž¡æ¹ã§å€ãèšå®ã§ããããšã§ãã
次ã®HTMLæ§é ãæ³åããŠãã ããã
#div1 > #div2 > #div3 > #div4 > #div5
æåã®æ°å€ïŒãã®å Žåã¯9ïŒãéžæãããšããcontentããããã£ã䜿çšããŠã1ãã¯ã»ã«ã®ãã©ã³ããµã€ãºã§div5ã«9æåã远å ããŸãïŒã€ãŸããdiv5ã®å¹ ã¯9ãã¯ã»ã«ã«ãªããŸãïŒã ããã§ããŠãŒã¶ãŒãä»ã®æ°ãéžæãããšããã©ã³ããµã€ãºïŒïŒïŒ div5ã®å®éã®å€ã«1000ïŒ ãé©çšããŸãïŒ9æåããã¹ãŠ1ãã¯ã»ã«ã®ç¬èªã®ãã©ã³ããµã€ãºãæã£ãŠããããšã«æ³šæããŠãã ããïŒãããã§ãå¹ ã90ãã¯ã»ã«ã«ãªããŸãã ããã«ã2çªç®ã®æ°å€ã¯ããã©ã³ããµã€ãºã1ãã¯ã»ã«ã®ïŒdiv5ãšåãæ¹æ³ã§ïŒdiv4ã®ã³ã³ãã³ããšããŠè¿œå ãããŸããã€ãŸããïŒdiv4ã®ããã¹ãã®ã³ã³ãã³ãã¯5ãã¯ã»ã«ã«ãªããŸãããåèŠçŽ ïŒdiv5ãåèšããŸããå¹ ã¯95ãã¯ã»ã«ã«çãããªããŸãïŒ
3çªç®ã®æ°å€ã«ã€ããŠãåæ§ã«è¡ããèŠçŽ ïŒdiv4ãªã©ã«1000ïŒ ã®ãã©ã³ããµã€ãºãé©çšããŸããããã¯ãã¹ãŠè¯ãããšã§ãããåé¡ã¯æå€§ãã©ã³ããµã€ãºãæ¯èŒçå°ããããšã§ãã æ¬¡ã®æ¹æ³ãšæ¯èŒããŠãçžå¯ŸçããšèšããŸãããã®æ¹æ³ã¯100,000æªæºã®æ°å€ã«ã®ã¿é©ããŠãããšããäºå®ã«ã€ãªãããŸãïŒFF / Chromeã®å¶éãæ£ç¢ºã«èŠããŠããŸããããããªãäœãããã«æããŸãããããã®ã¢ã€ãã¢ãæŸæ£ããïŒã
å°æ°ã®å Žåããã®æ¹æ³ã¯éåžžã«é©ããŠããŸãïŒããšãã°ããã®ãã©ãã¯ãžã£ãã¯ã§è¡ãããããã«ãCSS3ã®ã¿ã§äœæãããŠããŸãïŒChromeã§ã®ã¿åäœããŸãïŒã
ãããã£ãŠããã©ã³ããµã€ãºãå ¥åã³ã³ãããŒãšããŠäœ¿çšããããšã«ã€ããŠã¯èª¬æããŸããã§ããã calcïŒïŒèŠçŽ ã詊ãããšã«ããŸããã æ®å¿µãªãããwebkitã¯ãŸã ãµããŒãããŠããŸãããäŸãšããŠãIE9ããã³Firefox 4以éã§ã®ã¿åäœããŸãã ãã©ã³ããµã€ãºã®æ¹æ³ãšåæ§ã«ãdivèŠçŽ ã1ã€ã«é 眮ããåãHTMLæ§é ã䜿çšããŸãããä»åã¯èŠªèŠçŽ ããå§ããŸãã
æåã®æ°å€ãéžæãããšããå¹ ïŒdiv1ã®åœ¢åŒã§å€ãæå®ããŸãã 2çªç®ã®æ°å€ãéžæãããšããïŒdiv2ã®å¹ ãcalcïŒ1000ïŒ + number2ïŒã®åœ¢åŒã§èšå®ããŸãã åã®äŸã®ããã«ãïŒdiv1ã®å¹ ã¯9ãã¯ã»ã«ã«ãªããïŒdiv2ã®å¹ ã¯calcïŒ1000ïŒ + 5pxïŒã«ãªããå¹ ã95ãã¯ã»ã«ã«ãªããŸãã åæ§ã«ããŠãŒã¶ãŒãæå€§5æåãå ¥åãããšä»®å®ããŠãïŒdiv3 ...ïŒdiv5ãç¶è¡ã§ããŸãã
ããŠããŠãŒã¶ãŒãå ¥åããå€ãæ£åžžã«ä¿åããŸããïŒãŠãŒã¶ãŒãå®è¡ãããèšç®ããŸã å®è¡ããŠããŸããïŒã ãŠãŒã¶ãŒã9146ãå ¥åãããšãdivèŠçŽ ã®å¹ ã¯æ¬¡ã®ããã«ãªããŸãã
ïŒdiv1 9px
ïŒdiv2 91px
ïŒdiv3 914px
ïŒdiv4 9146px
ïŒdiv5 9146pxïŒããã©ã«ãã¯100ïŒ ïŒ
ãã®æç¹ã§ããŠãŒã¶ãŒã¯ä¹ç®ããããšã«ããŸããïŒçŸåšä¹ç®äžã®ã¢ã¯ã·ã§ã³ãå®è¡ããåã«ãŠãŒã¶ãŒãæ°ããæ°åãå ¥åããæ©èœãåé€ããŸããïŒã
次ã«ãæåã®å€ïŒå¹ ïŒdiv5ïŒãããŠãŒã¶ãŒãéžæããä»»æã®æ°ã§ä¹ç®ããŠèª¿æŽããå¿ èŠããããŸãã æåã«æ³å®ã§ããããšã¯ãæåã®äŸãšåãæ¹æ³ã䜿çšãç¶ããããšã§ãã æ§é ã倿Žãã
ïŒdiv1>ïŒdiv2>ïŒdiv3>ïŒdiv4>ïŒdiv5>ïŒdiv6>ïŒdiv7>ïŒdiv8>ïŒdiv9ãªã©
次ã«ããŠãŒã¶ãŒãéžæããå€ã䜿çšããŠå¹ ã倿ŽããŸãã æ®å¿µãªãããããã§ã¯ãããŸããã åãäŸã§ããŠãŒã¶ãŒã9146 * 25ãæããããšããŸãã
ã€ãŸãããŠãŒã¶ãŒãä¹ç®ããæ°å€ã®æåã®æåãå ¥åããåŸãã€ãŸã ã2ããïŒdiv6ã®å¹ ã¯200ïŒ ã«çãããªãã18,292ã«ãªããŸããïŒ ããã¯ããªãè¯ããŠæ£ããããã«èŠããŸãããããŠããã¯ããã§ãã
ãã ãã2çªç®ã®æšèã«ç§»åãããšããããããã®ã¢ããªã±ãŒã·ã§ã³å šäœã§æå€§ã®åé¡ã«çŽé¢ããŸãã 5ãæããããšã¯ã§ããŸããã 18,292ã®500ïŒ ã¯91,460ã§ããããã500ïŒ ã§ããããã¯ã25 * 9146ã228,650ãšåãã§ã¯ãããŸãããcalcïŒïŒã§ä¹ç®ãå ç®ããŠããå®éã®åé¡ã¯è§£æ±ºããŸãããåãå€ãæ°åä¹ç®ã§ããªããšããäºå®ã«ãããŸãã æŽæ°ïŒ25ïŒãå¿ èŠã§ãããããã䜿çšããŠå ã®æ°ïŒ9146ïŒãä¹ç®ããå¿ èŠããããŸãã
ãã1ã€ã®åé¡ã¯ãïŒdiv1ãåèŠçŽ ã®å¹ ãåºå®ããªããããåèŠçŽ ïŒdiv5ã®å¹ ã9146pxã®å ŽåãïŒdiv5ãïŒdiv5ã®äžã«ãã£ãŠãïŒdiv1ã¯ãŸã 9pxã§ãã ãã©ã³ããµã€ãºã®å Žåãããã¯éèŠã§ã¯ãããŸããã§ããã
ïŒdiv1ãå®éã®å¹ ãåæ ããŠããå Žåã5ã€ã®divã5åè€è£œããæ¬¡ã®æ§é ã圢æããŠæ¬¡ã ã«é 眮ã§ããŸãã
#container> {
ïŒparent1>ïŒdiv1>ïŒdiv2>ïŒdiv3>ïŒdiv4>ïŒdiv5
ïŒparent2>ïŒdiv1>ïŒdiv2>ïŒdiv3>ïŒdiv4>ïŒdiv5
ïŒparent3>ïŒdiv1>ïŒdiv2>ïŒdiv3>ïŒdiv4>ïŒdiv5
ïŒparent4>ïŒdiv1>ïŒdiv2>ïŒdiv3>ïŒdiv4>ïŒdiv5
ïŒparent5>ïŒdiv1>ïŒdiv2>ïŒdiv3>ïŒdiv4>ïŒdiv5
}
ãŸãã1ã€ã®divèŠçŽ ã®ã¿ã衚瀺ããïŒïŒparent1ïŒãæåã®æ°å€ãä¹ç®ã®ããã«éžæããããšããã«ãdivã®å¹ ã«2ãä¹ç®ããŸããããã«ãããã³ã³ããã®å¹ ã¯2x9146ã«ãªããŸãã 2çªç®ã®æ°å€ãéžæãããšãåã³ïŒparent1ã«1000ïŒ ãä¹ç®ããŸãããã®çµæãã³ã³ãããŒã®å¹ ã¯20x9146ã«ãªãããã®åŸïŒparent2ã衚瀺ãã500ïŒ ã«ä¹ç®ããŸãããã®çµæãæåŸã®#containerã®å¹ ã¯20x9146 + 5x9146ã«ãªããŸããã€ãŸã25x9146ãªã©ã以éã®ãã¹ãŠã®çªå·ã§ã ãã ããããã¯ãã©ã³ããµã€ãºã¡ãœãããªãã§ã¯å®è¡ã§ããŸããã
ããŒãã«ãä»ã®ãã¹ããããèŠçŽ ã§èšå€§ãªæ°ã®ãªãã·ã§ã³ã詊ããåŸãã»ã¬ã¯ã¿ã䜿çšããŠãã®æ°ãä¿®æ£ããŸããã ããã§ããããšããã»ãŒãã¹ãŠã®ç®çã«éåããŠããããããã®ã¢ã€ãã¢ãæåŠãç¶ããŠããŸãïŒæ°åã®åã ã®çµã¿åããã«å¯ŸããŠæ°åã®ç°ãªãCSSã»ã¬ã¯ã¿ãŒãäœæããå Žåã¯ãããã¯å¿ èŠãããŸããïŒã
ã€ãŸããæ¬¡ã®ããšã倿ããŸãã
-ãŠãŒã¶ãŒã2ãéžæãããšãïŒdiv5ã®å¹ ã«200ïŒ ãä¹ç®ãããŸãã
-ãŠãŒã¶ãŒãå¥ã®æ°åïŒ5ãªã©ïŒãéžæãããšããdigit1number2ïŒcheckedãããdigit2number5ïŒcheckedãã«ç§»åãããã®åŸå¹ ã2500ïŒ ã§ããããšãç»é²ããã»ã¬ã¯ã¿ãŒãååŸãããŸãã
æããã«ãããã«ãããåã ã®çªå·ããšã«ã»ã¬ã¯ã¿ãŒãå¿ èŠã«ãªããŸãã ãããã£ãŠã0ãã99ãŸã§ã®ä»»æã®æ°ã§ä¹ç®ã§ããããã«ããå Žåãåã ã®çµã¿åããããšã«100åã®ç°ãªãã»ã¬ã¯ã¿ãŒãå¿ èŠã§ãã åæ§ã«ã0ã999ãå¿ èŠãªå Žåã¯1,000åã®ã»ã¬ã¯ã¿ãŒãå¿ èŠã§ããã0ã9999ã®å Žåã¯10,000åã®ã»ã¬ã¯ã¿ãŒãå¿ èŠã§ãããããã£ãŠããã®ã¡ãœããã䜿çšããŠèšç®æ©ãå®è¡ããã®ã¯åçŽã§ãã ç§ã¯ã¢ã€ãã¢ã䜿ãæããããšããäºå®ãšãå¶éïŒåŸã§èª¬æããŸãïŒã®ããã«ãããã¯å¿ ããã倧ããªæå€±ã§ã¯ãããŸããã ãšã«ãããããã€ãã®ã»ã¬ã¯ã¿ãŒã䜿çšããŠãæè¡çã«æåã®æ°åã®é·ããæå®ã§ããŸããã2çªç®ã®æ°åã¯0ã99ã«å¶éãããŸãã
ããã§ããŠãŒã¶ãŒãå ¥åããå€ã«åºã¥ããŠdivã®å¹ ãæçµçã«èšç®ããããšãã§ããŸããã ãããä»ãããŠãŒã¶ãŒã«æç€ºããæ¹æ³ã¯ïŒ attrïŒïŒèŠçŽ ã«ãã£ãŠã¹ã¿ã€ã«ã·ãŒãã§æå®ãããcsså€ã衚瀺ã§ããããã«ãªãããšãæåŸ ããŠãããããããŸããããæ®å¿µãªããããã§ã¯ãããŸããã åã«èª¬æããããã«ãcounterïŒïŒèŠçŽ ã䜿çšããŠããç¹ã«ä¹ç®ãšé€ç®ã«é¢ããŠå®éã®çµæã¯åŸãããŸããããæç€ºããæ¹ãã¯ããã«ç°¡åã§ãã
ããã§ã¯å¹ ãã©ã®ããã«è¡šç€ºããŸããïŒ divèŠçŽ ã®å¹ ã調æŽããããã«åè¿°ã®ãã¹ãŠã®äŸãã©ã®ããã«äœ¿çšããããèŠããŠããŸããïŒ ãã®å¹ ããå¹ ã100ïŒ ã®ãããŒãã£ã³ã°ãã¬ãŒã ãšè€æ°ã®ã¡ãã£ã¢ã¯ãšãªãšçµã¿åãããŸãã ããŠãä»ã§ã¯divèŠçŽ å ã«228,650ãã¯ã»ã«ã®ãããŒãã£ã³ã°ãã¬ãŒã ããããããã¥ã¡ã³ãã®å¹ ã«åºã¥ããŠåã ã®æ°å€ã衚ãããã«228,650ã®ç°ãªãã¡ãã£ã¢ã¯ãšãªãäœæããå¿ èŠããããŸããïŒ ç¹°ãè¿ããŸãããããã¯ãã¡ããå®è¡ã§ããŸãããæå³ããããŸããã
ãããã代ããã«ãæ°åã®åæåã«1ã€ãã€ããããŒãã£ã³ã°ãã¬ãŒã ã®æ°ã䜿çšããŸãã ã€ãŸãã6æåã®éã衚çŸãããå Žåã衚çŸããããã¬ãŒã å ã«6ã€ã®ãããŒãã£ã³ã°ãã¬ãŒã ãå¿ èŠã§ãã æåã®ãã¬ãŒã ã§æåæ°ãæ±ºãŸããŸããã€ãŸããæ¬¡ã®ããã«ãªããŸãã
0 <å¹ <100ïŒ1-2æå
100 <å¹ <1000ïŒ3æå
1000 <å¹ <10000ïŒ4æå
10000 <å¹ <100000ïŒ5æå
100,000 <å¹ <1,000,000ïŒ6æå
ãªã©
ãã®åŸãç®çã®ãã¬ãŒã ã衚瀺ãããŸãããã®å Žåã¯6æ¡ã®ãã¬ãŒã ã§ãã
ãã®åŸããã®ãã¬ãŒã ã«ã¯ãæ°åã®æåã®æåãæ¬¡ã®ãããªãã®ã§ããããšã確èªãã10åã®ã¡ãã£ã¢ã¯ãšãªãå«ãŸããŸãã
@media(min-width: 100px) and (max-width: 100099px) -> 0 @media(min-width: 100100px) and (max-width: 200099px) -> 1 @media(min-width: 200100px) and (max-width: 300099px) -> 2
ãããŠããã®åŸã®åã¡ãã£ã¢ã¯ãšãªã¯ãã®æ°ã远å ãããããŒãã£ã³ã°ãã¬ãŒã ã®å¹ ãå¿ èŠãªæ°åäžããã®å Žåã¯200,000ãã€æžãããŸãããã®çµæã次ã®ãµããã¬ãŒã ã¯digit5.htmlã«çããããã®å¹ ã¯28,650ã§ãïŒ200,000ãåé€ããããïŒãã®100ïŒ ããïŒã ãã®åŸãåãæ¹æ³ã䜿çšããŠ5çªç®ã®æåã確èªãããã®æåã衚瀺ããŠã次ã®ãã¬ãŒã ã®å¹ ãç®çã®æ°äžã®åã ãæžãããŠãæåŸã®æåãŸã§ç¶ããŸãã
æå°å¹ ã¯å®éã«ã¯0ã§ã¯ãªã100ã§ãããæå€§å¹ ã¯äºæ³ããã100倧ããããšã«æ°ã¥ãããããããŸããã ããã¯ãå¹ ã0ã®ãããŒãã£ã³ã°ãã¬ãŒã ã«ã¯ã³ã³ãã³ãã衚瀺ãããªãããã§ãïŒå¹ ã0ãã¯ã»ã«ã ããã§ãïŒïŒããããã£ãŠãæ°åã衚瀺ããç¹å®ã®ã¹ããŒã¹ãå²ãåœãŠãå¿ èŠããããŸãã
ããã«ãããäžå®ã®æ°ã®ãã¬ãŒã ã衚瀺ãããããã¥ã¡ã³ãã®å¹ ã衚瀺ãããŸãã ããã§ãã¹ãã§ããŸã ã ãŠã£ã³ããŠã®å¹ ããã100ãã¯ã»ã«å°ãããããcalcïŒïŒïŒããµããŒããããã©ãŠã¶ãŒã§ã®ã¿æ©èœããããšã«æ³šæããŠãã ããã
ãããïŒ ããã§æ©èœããèšç®æ©ãã§ããŸããïŒ ç§ã¯ä»ã®å¶éããããšè¿°ã¹ãŸããã åœç¶ã®ããšãªãããããã¥ã¡ã³ã/ cssããããã£ã®å¹ ã«ã¯æå€§å€ããããèšç®ã§ããæå€§å€ã¯æ¬¡ã®ãšããã§ãã
-Firefox 17895698
-Internet Explorer 1533816
ãããã£ãŠããã®ã¡ãœãããä¹ç®ã«äœ¿çšããŠã2çªç®ã®æ°åã«3ã€ä»¥äžã®æåãæ¿å ¥ããæ©äŒããã£ããšããŠããããããã£ã®ãã®å¶éå€ã«ããã«å°éããŸãã
ããã«ãäºæ³ã©ãããããã§ã¯å°æ°éšåã¯åãå ¥ãããããããã«è¡šç€ºãããŸããïŒåå²ããå Žåãåã«äžžããããŸãïŒãè² ã®å€ãå ¥åããããšã¯ã§ããŸããïŒãããä¿®æ£ããŠãåé¡ã¯ãããŸããïŒã
ãã®åé¡ã®äœæ¥äžã«ããããŒãã£ã³ã°ãã¬ãŒã ãšã¡ãã£ã¢ã¯ãšãªã䜿çšãããšãIEã§è峿·±ãã¡ã¢ãªãªãŒã¯ãçºçããŸãããããã«ãããCSSãšHTMLã®æ°è¡ã§ãã©ãŠã¶ãããªãŒãºããŸãã
Habréèªè
åãã®äŸ¿å©ãªPaystoãœãªã¥ãŒã·ã§ã³ïŒ
â ä»ããã¯ã¬ãžããã«ãŒãã§æ¯æããåããŸãããã ãµã€ããIPããã³LLCãªãã
â ãªã³ã©ã€ã³äŒæ¥ããã®æ¯æããåãå ¥ããŸãã ãµã€ããIPããã³LLCãªãã
â ãµã€ãã®äŒç€Ÿããã®æ¯æããåãå ¥ããŸãã ããã¥ã¡ã³ã管çãšãªãªãžãã«ã®äº€æã
â æ³äººãšã®è²©å£²ããã³ãµãŒãã¹ååŒã®èªååã èšç®ã®ä»²ä»ãªãã
â ãªã³ã©ã€ã³äŒæ¥ããã®æ¯æããåãå ¥ããŸãã ãµã€ããIPããã³LLCãªãã
â ãµã€ãã®äŒç€Ÿããã®æ¯æããåãå ¥ããŸãã ããã¥ã¡ã³ã管çãšãªãªãžãã«ã®äº€æã
â æ³äººãšã®è²©å£²ããã³ãµãŒãã¹ååŒã®èªååã èšç®ã®ä»²ä»ãªãã