ãã®æ¬ã¯ãProã®CSSãšåŒã°ããŠããŸãããå æ¬çãªæ¬ã§ããããŸãã ããã€ãã®æŠå¿µãååãé£ããå ŽåããŸãã¯ååãšããŠèª€ã£ãŠè§£éãããå Žåãèè ã¯ããããäœãæå³ããã®ããã©ã®ããã«æ©èœããã®ãããããŠãã®çç±ã詳现ã«èª¬æããŸãã ä»ã®ç« ã¯ããã»ã©å æ¬çã§ã¯ãªããããããŸããããKeith Grantã¯ååãªæ å ±ãæäŸããŠããã®ã§ãç¥èãåºãããå Žåã¯å¹æçã«äœæ¥ããæ£ããæ¹åã«é²ãããšãã§ããŸãã äžè¬çã«ããã®æ¬ã¯ããªãã®çè«çç¥èã®ã®ã£ãããåããŸãã
ããã€ãã®ãããã¯ïŒã¢ãã¡ãŒã·ã§ã³ãã¿ã€ãã°ã©ãã£ããã¬ãã·ãã«ã³ã³ãããããã«ã¯CSSã¹ã¿ãã¯ããå¥ã®æ¬ã«å€ããŸãã èè ã®ç®æšã¯ãç¥èãå ·äœåãããã®ã®ã£ãããåããCSSãæããããã«ããããšã§ãã
æç² 4.1ã ãããŒãã£ã³ã°èŠçŽ ã®ç®ç
ãããŒãã£ã³ã°èŠçŽ ã¯ããŒãžã¬ã€ã¢ãŠããèšèšããããã«èšèšãããŠããªããšããäºå®ã«ããããããã圌ãã¯ãããããŸããã£ãŠããŸããã ãã ãããããŒãã£ã³ã°èŠçŽ ã®æå³ãç解ããã«ã¯ãå ã®ç®çãç解ããå¿ èŠããããŸãã
ãããŒãã£ã³ã°èŠçŽ ã¯ãã³ã³ããã®åŽé¢ã®1ã€ã«é 眮ããããªããžã§ã¯ãïŒå€ãã®å Žåãç»åïŒã§ãããããã¥ã¡ã³ãã®æµãããã®åšããæµããããã«ããŸãïŒå³4.1ïŒã ãã®é 眮ã¯ãæ°èãéèªã§ããèŠãããã®ã§ãèšèŒãããŠããå¹æãéæããããã«ããããŒãã£ã³ã°èŠçŽ ãCSSã«è¿œå ãããŸããã
ãã®å³ã§ã¯ãèŠçŽ ã¯å·Šæãã§ãããå³ç«¯ã«ãé 眮ã§ããŸãã ãããŒãã£ã³ã°èŠçŽ ã¯éåžžã®ããã¥ã¡ã³ããããŒããåé€ãããã³ã³ããã®çåŽã«é 眮ãããŸãããã®åŸãããã¥ã¡ã³ããããŒã¯ãã®èŠçŽ ãé 眮ãããŠããé åã®åšããæµããŸãã çåŽã«2ã€ã®ãããŒãã£ã³ã°èŠçŽ ãé 眮ãããšããããã¯æ¬¡ã ã«æŽåããŸãïŒå³4.2ïŒã
ãã°ããCSSã³ãŒããæžããŠããå Žåããã®åäœã¯æ°ãããã®ã§ã¯ãããŸããããæµ®åèŠçŽ ã¯æ¬æ¥ã®ç®çã§ããã«ããããããããã®æ¹æ³ã§åžžã«é©çšãããããã§ã¯ãªãããšã«æ³šæããŠãã ããã
CSSã®åæã®é ãéçºè ã¯ããã®åçŽãªããŒã«ã䜿çšããŠããã¹ãŠã®ã¿ã€ãã®ã¬ã€ã¢ãŠããçµçãããšãã«ããŒãžã®ã»ã¯ã·ã§ã³ã移åã§ããããšã«æ°ä»ããŸããã ãããŒãã£ã³ã°èŠçŽ ã¯ããŒãžã¬ã€ã¢ãŠãããŒã«ã§ã¯ãããŸããã§ããããã»ãŒ20幎éããããã®ç®çã«æ£ç¢ºã«äœ¿çšããŠããŸããã
ãããå¯äžã®éžæè¢ã ã£ãã®ã§ãç§ãã¡ã¯ãããããŸããã æçµçã«ãdisplayïŒinline-blockãŸãã¯displayïŒtableããããã£ã䜿çšããããšãå¯èœã«ãªããŸãã-éåžžã«å¶éãããŠããŸããã æè¿ãŸã§ããã¬ãã¯ã¹ã³ã³ãããšCSSã°ãªãããè¿œå ããããŸã§ãããŒãžã¬ã€ã¢ãŠãã®ã¬ã€ã¢ãŠãã§ã¯ãããŒãã£ã³ã°èŠçŽ ãåãæã§ããã ããããã©ã®ããã«æ©èœããããèŠãŠã¿ãŸãããã ããšãã°ãå³ã«ç€ºãããŒãžãäœæããŸãã 4.3ã
ãã®ç« ã®äŸã§ã¯ããããŒãã£ã³ã°èŠçŽ ã䜿çšããŠã4ã€ã®ç°è²ã®åãã£ãŒã«ããé 眮ããŸãã ãŸãããã£ãŒã«ãå ã§ãããã¹ãã®æšªã«ãããŒãã£ã³ã°ç»åãé 眮ããŸãã 空çœã®ããŒãžãäœæããåã«äœæããã¹ã¿ã€ã«ã·ãŒãã«æ¥ç¶ããŠããããªã¹ã4.1ã®ã³ãŒããããŒãžã«è¿œå ããŸãã
ãã®ãªã¹ãã¯ãããŒãžã®æ§é ã瀺ããŠããŸããããããŒãšããã¹ãŠã®ããŒãžçŽ æãå«ãã¡ã€ã³èŠçŽ ã§ãã ã¡ã€ã³èŠçŽ ã®å éšã«ã¯ãããŒãžåãšãå¿åã®divã³ã³ãããã€ãŸããã¯ã©ã¹ãŸãã¯èå¥åãæããªãdivèŠçŽ ããããŸãã ããã«ããã4ã€ã®ç°è²ã®ã¡ãã£ã¢ãªããžã§ã¯ããã°ã«ãŒãåã§ããããããã®bodyèŠçŽ ã«ç»åããããŸãã
ãããŒãã£ã³ã°èŠçŽ ã®æäœãéå§ããåã«ãããŒãžã®å€éšæ§é ãæ§ç¯ããå¿ èŠããããŸãã ãªã¹ã4.2ãã¹ã¿ã€ã«ã·ãŒããã¡ã€ã«ã«è¿œå ããŸãã
ãã®ã³ãŒãã䜿çšãããšãããã¯ã¹ãµã€ãºããããã£ã®ä¿®æ£ãããããåããããã¯ããŠã»ã¬ã¯ã¿ãŒãªã©ãããŒãžã®åºæ¬çãªã¹ã¿ã€ã«ãèšå®ã§ããŸãïŒç¬¬3ç« ãåç §ïŒã 次ã«ãããŒãžã³ã³ãã³ãã®å¹ ãå¶éããå¿ èŠããããŸãïŒå³4.4ïŒã äž¡åŽã®æããç°è²ã®ãã£ãŒã«ããããã³ãã£ãããšã¡ã€ã³ã³ã³ãããåãå¹ ã§ããããšã«æ³šæããŠãã ããã
ãã®ããŒã¯ã¢ããã¯ãããŒãžã³ã³ãã³ãã®äžå€®æãã«ãã䜿çšãããŸãã ãããå®çŸããã«ã¯ã2ã€ã®ãã¹ããããã³ã³ããå ã«ã³ã³ãã³ããé 眮ããå€åŽã®ã³ã³ãããè¶ ããªãããã«å åŽã®ã³ã³ããã®ãã£ãŒã«ãã調æŽããŸãïŒå³4.5ïŒã Webéçºè ã®Brad Westfallã¯ããã®ã¢ãããŒããããã«ã³ã³ãããã¿ãŒã³ãšåŒãã§ããŸãã
ãã®äŸã§ã¯ãbodyèŠçŽ ã¯å€éšã³ã³ãããŒãšããŠæ©èœããŸãã ããã©ã«ãã§ã¯ããã®èŠçŽ ã¯ããŒãžå¹ ã®100ïŒ ãå ãããããæ°ããã¹ã¿ã€ã«ãé©çšããå¿ èŠã¯ãããŸããã ãã®èŠçŽ å ã®ãã¹ãŠã®ããŒãžã³ã³ãã³ãããå éšã³ã³ãããŒãšããŠæ©èœããèŠçŽ ã«ãŸãšããŸããã ãªã¹ã4.3ã®ã³ãŒããã¹ã¿ã€ã«ã·ãŒãã«è¿œå ããŸãã
widthããããã£ã®ä»£ããã«max-widthããããã£ã䜿çšããããšã«ããããã¥ãŒããŒãã®è§£å床ããã®å€ãäžåãå ŽåãèŠçŽ ã¯1080ãã¯ã»ã«æªæºã®å€ã«å§çž®ãããŸãã èšãæãããšãã³ã³ããã¯å°ããªè¡šç€ºé åãåããŸããã倧ããªè¡šç€ºé åã§ã¯1080ãã¯ã»ã«ã«æ¡å€§ããŸãã ããã¯ã衚瀺é åãå°ããããã€ã¹ã§ã®æ°Žå¹³ã¹ã¯ããŒã«ãåé¿ããããã«éèŠã§ãã
4.2ã æãããã¿ã³ã³ãããŒãšclearfix
éå»ã«ã¯ããã©ãŠã¶ãšã©ãŒã«ãããããŒãã£ã³ã°èŠçŽ ã®åäœãæªããããŸããããããã¯äž»ã«Internet Explorer 6ããã³7ã§äžè¬çã§ããããããã®ãã©ãŠã¶ããµããŒãããå¿ èŠã¯ã»ãšãã©ãªãã®ã§ããããã®ãšã©ãŒã«ã€ããŠå¿é ããå¿ èŠã¯ãããŸããã ããã§ããã©ãŠã¶ããããŒãã£ã³ã°èŠçŽ ãæ£ããåŠçããããšã確èªã§ããŸãã
ãã ãããããŒãã£ã³ã°èŠçŽ ã®åäœã®äžéšã®æ©èœã¯ãä»æ¥é©ãããšã§ãããã ãããã¯ãšã©ãŒã§ã¯ãªããæµ®åèŠçŽ ã¯æ¬æ¥ã®åäœãããŸãã ããããã©ã®ããã«æ©èœããã©ã®ããã«åäœãã«ã¹ã¿ãã€ãºããŠç®çã®ããŒã¯ã¢ãããäœæã§ããããæ€èšããŠãã ããã
4.2.1ã ã³ã³ãã厩å£ãšã¯
ããŒãžäžã®4ã€ã®ãããŒãã£ã³ã°ã¡ãã£ã¢ãªããžã§ã¯ããå·Šã«æããŸã-åé¡ã¯ããã»ã©é·ãããããŸããïŒå³4.6ïŒã
çœãèæ¯ã¯ã©ããªããŸãããïŒ ããŒãžã®ååã®åŸãã«è¡šç€ºãããŸããïŒã圹ã«ç«ã€ãã³ããïŒãããã¯ãã¹ãŠã®ã¡ãã£ã¢ãªããžã§ã¯ããå«ããããã«å±éããã®ã§ã¯ãªããããã«éå®ãããŠããŸãã ããŒãžã§ããã確èªããã«ã¯ããªã¹ã4.4ã®ã³ãŒããã¹ã¿ã€ã«ã·ãŒãã«è¿œå ããŸãã 次ã«ããããèµ·ãã£ãŠããçç±ãšãã®ä¿®æ£æ¹æ³ãæ€èšããŸãã
åã¡ãã£ã¢ãªããžã§ã¯ãã«æããç°è²ã®èæ¯ãèšå®ããã³ã³ãããŒã®çœãèæ¯ããããã®èåŸïŒãŸãã¯ãããïŒã«ããããšãæ³å®ããŠããŸãã ãã ãã代ããã«ãã¡ãã£ã¢ãªããžã§ã¯ãã®äžç«¯ã§çœãèæ¯ãæ¶ããŸãã ãªããã
åé¡ã¯ãéåžžã®ããã¥ã¡ã³ããããŒã®èŠçŽ ãšã¯ç°ãªãããããŒãã£ã³ã°èŠçŽ ã¯èŠªèŠçŽ ã«é«ããè¿œå ããªãããšã§ãã ããã¯å¥åŠã«æãããããããŸãããããã®ããããã£ã¯ãããŒãã£ã³ã°èŠçŽ ã®å ã®ç®çã«æ»ããŸãã
ãã®ç« ã®æåã§åŠãã ããã«ããããŒãã£ã³ã°èŠçŽ ã¯ããã¹ããåšå²ãæµããããã«èšèšãããŠããŸãã ããã¹ãã®æ®µèœã«ãããŒãã£ã³ã°ç»åãé 眮ãããšããã®æ®µèœã¯ç»åã«åãããŠæ¡å€§ãããŸããã ãã®ãããç»åã®é«ãã段èœã®é«ãããã倧ããå Žåã次ã®æ®µèœã®ããã¹ãã¯æåã®æ®µèœã®ããã¹ãã®ããäžããå§ãŸããããäž¡æ¹ã®æ®µèœã®ããã¹ãã¯ãã®ãããŒãã£ã³ã°ç»åã®åšããæµããŸãã 説æã¯å³ã«ç€ºãããŠããŸãã 4.7ã
ããŒãžã§ã¯ãããŒãžåãé€ããŠãã¡ã€ã³èŠçŽ å ã®ãã¹ãŠããããŒãã£ã³ã°èŠçŽ ã§ãã ãããã£ãŠãååã ããã³ã³ããã®é«ãã«åœ±é¿ãããã¹ãŠã®ãããŒãã£ã³ã°ã¡ãã£ã¢ãªããžã§ã¯ãã¯ãã¡ã€ã³ã³ã³ããã®çœãèæ¯ãè¶ ããŠäžæµã«æ¡åŒµãããŸãã ç§ãã¡ã«ãšã£ãŠããã®åäœã¯æãŸãããªããããä¿®æ£ããŠãã ããã ã¡ã€ã³èŠçŽ ã¯äžåãã«å±éããç°è²ã®ãããã¯ãå«ãå¿ èŠããããŸãïŒå³4.8ïŒã
調æŽãã1ã€ã®æ¹æ³ã¯ãé£æ¥ããæ確ãªããããã£ã䜿çšããããšã§ãã
ãããŒãã£ã³ã°èŠçŽ ã ã¡ã€ã³ã³ã³ããã®æåŸã«ã¢ã€ãã ãé 眮ããå Žå
clearããããã£ã䜿çšãããšãã³ã³ãããå±éãããŸã
ãããŒãã£ã³ã°èŠçŽ ã®äžç«¯ã ãªã¹ã4.5ã®ã³ãŒãã¯åºæ¬çã«
ãªãã¹ãããšã ãã°ããã®éãããŒãžã«è¿œå ã§ããŸã
ä»çµã¿ãã芧ãã ããã
clearïŒäž¡æ¹ã®å®£èšã«ããããã®èŠçŽ ã¯ãããŒãã£ã³ã°èŠçŽ ã®é£ã«é 眮ãããã®ã§ã¯ãªãããããŒãã£ã³ã°èŠçŽ ã®äžã«ç§»åããŸãã ãã®ããããã£ãå·ŠãŸãã¯å³ã®ããããã®å€ã«å²ãåœãŠãŠã巊端ãŸãã¯å³ç«¯ã«ããããé 眮ãããŠãããããŒãã£ã³ã°èŠçŽ ã®ã¿ã®åšãã®ãããŒããªã»ããã§ããŸãã
ããã«ãããç®çã®ãµã€ãºãèšå®ã§ããŸããããã®ã¢ãããŒãã¯ãHTMLã³ãŒãã«äžèŠãªããŒã¯ã¢ãããè¿œå ããããããããã³ã°ã«å°ã䌌ãŠããŸããããããCSSé¢æ°ã䜿çšããçç±ã§ãã ãããã£ãŠã空ã®ã³ã³ããdivãåé€ããå¿ èŠããããŸãã CSSã³ãŒãã®ã¿ã䜿çšããŠåãã¿ã¹ã¯ãå®è¡ããæ¹æ³ãæ€èšããŠãã ããã
4.2.2ã clearfixãšã¯
å¥ã®divã³ã³ãããããŒã¯ã¢ããã«è¿œå ãã代ããã«ãç䌌èŠçŽ ã䜿çšããŸãã ::ç䌌èŠçŽ ã»ã¬ã¯ã¿ãŒã䜿çšãããšãã³ã³ãããããŒã¯ã¢ããã«è¿œå ããã«ãã³ã³ããã®æåŸã§DOMã«èŠçŽ ãå¹æçã«æ¿å ¥ã§ããŸãã
ãªã¹ã4.6ã¯ãclearfixãšåŒã°ãããããŒãåé¡ã解決ããäžè¬çãªã¢ãããŒãã瀺ããŠããŸãã ïŒäžéšã®éçºè ã¯ãã¯ã©ã¹åãcfã«ççž®ããããšã奜ã¿ãŸããããã¯ãfloatïŒãããŒãã£ã³ã°èŠçŽ ã®é 眮ïŒãå«ããã¬ãŒãºã®çç¥åœ¢ã§ããããã䟿å©ã§ããïŒæ¬¡ã®ã³ãŒããã¹ã¿ã€ã«ã·ãŒãã«è¿œå ããŸãã
clearfixã¯ã©ã¹ã¯ããããŒãã£ã³ã°èŠçŽ ãå«ãèŠçŽ ã«é©çšãããããšãç¥ã£ãŠããããšãéèŠã§ãã ããããééãã¯ããã®ã¯ã©ã¹ãäžé©åãªèŠçŽ ã«é©çšããããšã§ããããšãã°ããããŒãã£ã³ã°èŠçŽ ãããããŒãã£ã³ã°èŠçŽ ãæã€ã³ã³ããã®åŸã«ããã³ã³ããã«çŽæ¥é©çšããããšã§ãã
ãã ããclearfixã¡ãœããã«ã¯1ã€ã®åé¡ããããŸããclearfixãé©çšãããŠãããšãå²ãŸãããããŒãã£ã³ã°èŠçŽ ã®ãã£ãŒã«ãã¯ã³ã³ãããŒã®å€åŽã§åŽ©å£ãããéãããŒãã£ã³ã°èŠçŽ ã®ãã£ãŒã«ãã¯éåžžã©ãã厩å£ããŸãã ããã¯ããŒãžã«è¡šç€ºãããã圹ã«ç«ã€ãã³ããã®èŠåºããçœãã¡ã€ã³èŠçŽ ã®äžç«¯ã«ãã£ãããšæŒãä»ããããŠããŸãïŒå³4.8ãåç §ïŒããã®ãã£ãŒã«ãã¯ã³ã³ãããŒã®å€åŽã«æããããŸããŠããŸãã
éçºè ã¯ããã¹ãŠã®ãã£ãŒã«ãã«å¯Ÿå¿ããããäºæž¬å¯èœãªclearfixã¡ãœããã®ä¿®æ£ããŒãžã§ã³ã䜿çšããããšã奜ãå ŽåããããŸãã ãã®ããŒãžã§ã³ãããŒãžã«è¿œå ãããšãã¡ã€ã³èŠçŽ ã®å€åŽã«ããããŒãžåã®ããããã£ãŒã«ããæããããŸããªãããã«ããŸãïŒå³4.9ïŒãããã«ãããã¿ã€ãã«ã®äžã«ç®çã®è·é¢ãæ®ããŸãã
å€æŽããããŒãžã§ã³ã䜿çšããã«ã¯ããªã¹ã4.7ã«ç€ºãããã«ãã¹ã¿ã€ã«ã·ãŒãã®clearfixã¡ãœããã³ãŒããæŽæ°ããŸãã
ãã®ããŒãžã§ã³ã§ã¯ãdisplayïŒãããã¯ã§ã¯ãªããdisplayïŒtableããããã£ã䜿çšããŸãã :: beforeãš:: afterã®äž¡æ¹ã®æ¬äŒŒèŠçŽ ã«é©çšãããšãã³ã³ããã®äžäžã«ããåèŠçŽ ã®ãã£ãŒã«ãã«ãã£ããããŸãã 以äžã®ãµã€ãããŒã®ãclearfixã¡ãœãããšè¡šç€ºïŒããŒãã«ããããã£ãã§ã¯ããã®ä»çµã¿ã«ã€ããŠè©³ãã説æããŠããŸãã
ãããžã§ã¯ãã§äœ¿çšããclearfixã¡ãœããã®ããŒãžã§ã³ã決å®ããŸãã äžéšã®éçºè ã¯ãã®è°è«ãããŠããŸãããã£ãŒã«ãã®æãããã¿ã¯CSSã®åºæ¬çãªæ©èœã§ããããããã£ãŒã«ããã³ã³ãããŒã«åããªãããšã奜ã¿ãŸãã ãã ãããããŒãã£ã³ã°èŠçŽ ãã£ãŒã«ãã«é©åããããŒãžã§ã³ã¯ãªããããä»ã®éçºè ã¯å€æŽãããããŒãžã§ã³ã«å¯ŸããŠããåçåãããåäœã奜ã¿ãŸãã ååŒæ°ã«ã¯ç¬èªã®çç±ããããŸãã
Clearfixã¡ãœãããšè¡šç€ºïŒããŒãã«ããããã£
clearfixã¡ãœããã§displayïŒtableããããã£ã䜿çšãããšãCSSæ©èœã®ãããã§ãã£ãŒã«ãã«é©åããŸãã ããŒãã«èŠçŽ ïŒãã®å Žåã¯æ¬äŒŒèŠçŽ ïŒãäœæãããšããã®èŠçŽ å ã«ããŒãã«è¡ãšãè¡å ã®ããŒãã«ã»ã«ãæé»çã«äœæãããŸãã ãã£ãŒã«ãã¯ããŒãã«èŠçŽ ãä»ããŠæããããŸããªãããïŒç¬¬3ç« ã§èª¬æïŒãããŒãã«ç䌌èŠçŽ ãä»ããŠãã£ãŒã«ãã¯æãç³ãŸããŸããã
displayïŒtable-cellããããã£ã䜿çšãããšåãå¹æãåŸãããããã«èŠãããããããŸããã ãã ããclearããããã£ã¯ãããã¯èŠçŽ ã«å¯ŸããŠã®ã¿æ©èœããããŒãã«ã»ã«ã«ã¯æ©èœããŸããã ãããã£ãŠãclearããããã£ãdisplayïŒtable-cellããããã£ã«é©çšããããšã¯ã§ããŸããã äžè¬ã«ããã£ãŒã«ãã«åãããã«ã¯ããã¹ãŠã®ãããŒãã£ã³ã°èŠçŽ ãšæé»çãªã»ã«ã®åšãã®ãããŒããªã»ããããdisplayïŒtableããããã£ã䜿çšããŸãã
4.3ã ãããŒãã£ã³ã°èŠçŽ ã®äºæããªãããã£ããã£ã
çœãã³ã³ããã«ãããŒãã£ã³ã°ã¡ãã£ã¢ãªããžã§ã¯ããå«ãŸããŠããã®ã§ãå¥ã®åé¡ãæããã«ãªããŸããå¿ èŠã«å¿ããŠã4ã€ã®ã¡ãã£ã¢ãªããžã§ã¯ãã2ã€ã®åäžè¡ã圢æããŸããã 代ããã«ãæåã®2ã€ã®ãããã¯ïŒãPhysical CultureããšãTempãïŒã¯äºæ³ã©ããåãè¡ã«ãããŸããã3çªç®ã®ãããã¯ïŒãChangeãïŒã¯å³åŽã®2çªç®ã®ãããã¯ã®äžã«ãããŸãã ãã®é 眮ã§ã¯ãæåã®ãããã¯ã®äžã«å€§ããªã®ã£ãããæ®ããŸããããã¯ããã©ãŠã¶ãŒããããŒãã£ã³ã°èŠçŽ ãå¯èœãªéãé«ãé 眮ããããã§ãã
å³ 4.10ã¯ç°¡ç¥å³ã§ãã
ãããã¯2ã¯ãããã¯1ãããäœãããããããã¯3ã®å Žåããããã¯1ã®äžã«ã¯å ŽæããããŸããããããã¯1ããã€ãã¹ãã代ããã«ããããã¯3ã¯ãããããã£ããã£ãããŸãã èšãæãããšããããã¯3ã¯å·Šã«æããããããããã¯1ã®äžé ãæµããŸãã
ãã®åäœã®ãã¥ã¢ã³ã¹ã¯ãåãããŒãã£ã³ã°ãããã¯ã®é«ãã«äŸåããŸãã 1ãã¯ã»ã«ã®éãã§ããããã®åé¡ãåŒãèµ·ããå¯èœæ§ããããŸãã åæã«ããããã¯1ããããã¯2ããçãå Žåããããã¯3ã«ã¯ãã£ããã§ãããšããžããªããã³ã³ãã³ããå€æŽããããŸã§èšèŒãããåé¡ã¯çºçãããèŠçŽ ã®é«ãã®å€æŽã«ã€ãªãããŸãã
1ã€ã®ãšããžã«è€æ°ã®ãããŒãã£ã³ã°èŠçŽ ãé 眮ãããšãåãããã¯ã®é«ãã«å¿ããŠãå€ãã®ã¬ã€ã¢ãŠããªãã·ã§ã³ã®ãããããååŸã§ããŸãã ãã©ãŠã¶ãŠã£ã³ããŠã®å¹ ãå€æŽããŠããããã¹ãè¡ã®åšãã®ãããŒã«åœ±é¿ãäžããããã«å¿ããŠèŠçŽ ã®é«ããå€æŽããããããã¹ãŠãåæ§ç¯ã§ããŸãã ãã®ããŒãžã§ã¯ã1è¡ã«2ã€ã®ãããŒãã£ã³ã°ãããã¯ã衚瀺ãããŸãïŒå³4.11ïŒã
ãã®åé¡ãä¿®æ£ããã®ã¯ç°¡åã§ãã3çªç®ã®ãããŒãã£ã³ã°èŠçŽ ã¯ããã®äžã«ãããããŒãã£ã³ã°èŠçŽ ã®åšãã®ãããŒããªã»ããããå¿ èŠããããŸãã ãŸãã¯ãèšãæãããšãåè¡ã®æåã®èŠçŽ ã¯ããã®äžã«ããæµ®åèŠçŽ ã®åšãã®ãããŒããªã»ããããå¿ èŠããããŸãã è¡ããšã«2ã€ã®ãããã¯ããããããå¥æ°è¡ã®èŠçŽ ããšã«èŠªè¡ã®åšãã®ãããŒããªã»ããããå¿ èŠããããŸãã æ¬äŒŒã¯ã©ã¹ã»ã¬ã¯ã¿ãŒnth-childïŒïŒã䜿çšããŠããã®ãããªèŠçŽ ãã¢ãã¬ã¹æå®ããŠéžæã§ããŸãã 次ã®ã«ãŒã«ã»ãããã¹ã¿ã€ã«ã·ãŒãã«è¿œå ããŸãïŒãªã¹ã4.8ïŒã
ãã®ã³ãŒãã¯ãåŸã§æ°ããèŠçŽ ãããŒãžã«è¿œå ããŠãæ©èœããŸãã ã³ãŒãã¯ã1çªç®ã3çªç®ã5çªç®ã®èŠçŽ ãªã©ã«é©çšãããŸãã1è¡ã«3ã€ã®èŠçŽ ãé 眮ããå Žåã¯ã3çªç®ããšã®èŠçŽ ãã»ã¬ã¯ã¿ãŒã®ã¿ãŒã²ããã«ã§ããŸãã.mediaïŒnth-ââchildïŒ3n + 1ïŒïŒä»é²ãåç §ïŒã»ã¬ã¯ã¿ãŒã®äœ¿çšã«é¢ãã詳现ã«ã€ããŠã¯ãnth-childïŒã
ã¡ãã£ã¢ãªããžã§ã¯ãã®ãã£ãŒã«ããè¿œå ããŠããããã®éã«ã®ã£ããã圢æãããããã«ããŸãã ããããåããããã¯ããŠã»ã¬ã¯ã¿ãŒã¯ãæåã®ããŒãžã³ãé€ããã¹ãŠã®èŠçŽ ã«äžéšããŒãžã³ãèšå®ããŸãã ããã«ãããæåã®è¡ã®èŠçŽ ã®é 眮ã倱æããããããããã®èŠçŽ ã®ããããã£ãŒã«ãããªã»ããããå¿ èŠããããŸãã ãªã¹ã4.9ã«ç€ºãããã«ãã¹ã¿ã€ã«ã·ãŒããæŽæ°ããŸãã
»æ¬ã®è©³çŽ°ã«ã€ããŠã¯ãåºç瀟ã®ãŠã§ããµã€ããã芧ãã ãã
» ã³ã³ãã³ã
» æç²
Savory Agentsã®25ïŒ å²åŒã¯ãŒãã³-CSS
æ¬ã®çŽçãæ¯æããããšãé»åçã®æ¬ãé»åã¡ãŒã«ã§éä¿¡ãããŸãã