CSSåºæãµã€ãºãã£ãã·ã¥ãæ·±ãæ¢ããŸããããã¯ææ°ã®ãŠã§ããã©ãŠã¶ã§ã¬ã€ã¢ãŠãããã©ãŒãã³ã¹ãæé©åãã匷åãªã¡ã«ããºã ã§ãããã®ä»çµã¿ãå©ç¹ããããŠããé«éã§ã¹ã ãŒãºãªãŠã§ãäœéšãå®çŸããããã®æŽ»çšæ³ãåŠã³ãŸãããã
CSSåºæãµã€ãºãã£ãã·ã¥ã®è§£æïŒã¬ã€ã¢ãŠãããã©ãŒãã³ã¹ã®æé©å
ããéããããå¹ççãªãŠã§ããµã€ããçµ¶ãéãªã远æ±ããäžã§ããŠã§ãéçºè ã¯åžžã«ã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãæé©åããæ¹æ³ã暡玢ããŠããŸãããã©ãŠã¶ã®åäœã«ãããéèŠã§ãããªããèŠéããããã¡ãªåŽé¢ã®1ã€ããCSSåºæãµã€ãºãã£ãã·ã¥ã§ãããã®ã¡ã«ããºã ã¯ããã©ãŠã¶ãèŠçŽ ã®ãµã€ãºãèšç®ããã£ãã·ã¥ããæ¹æ³ã«ãããŠéèŠãªåœ¹å²ãæãããã¬ã€ã¢ãŠãããã©ãŒãã³ã¹ãšå šäœçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«åœ±é¿ãäžããŸãã
CSSåºæãµã€ãºãšã¯ïŒ
ãã£ãã·ã¥ã«ã€ããŠæãäžããåã«ãåºæãµã€ãºã®æŠå¿µãçè§£ããããšãäžå¯æ¬ ã§ããæç€ºçã«å®çŸ©ããããµã€ãºïŒäŸïŒwidth: 200px;ïŒãšã¯ç°ãªããåºæãµã€ãºã¯èŠçŽ ã®ã³ã³ãã³ãã«ãã£ãŠæ±ºãŸããŸãã以äžã®äŸãèããŠã¿ãŠãã ããïŒ
- ç»åïŒ ç»åã®åºæãµã€ãºã¯ãç»åãã¡ã€ã«èªäœããæŽŸçããèªç¶ãªå¹ ãšé«ãã§ãïŒäŸïŒ1920x1080ã®JPEGïŒã
- ããã¹ãïŒ ããã¹ããããã¯ã®åºæãµã€ãºã¯ããã©ã³ããµã€ãºããã©ã³ããã¡ããªãŒãããã¹ãã®é·ããªã©ã®èŠå ã«äŸåããŸãã
- 眮æèŠçŽ ïŒ<video>ã<canvas>ãªã©ïŒïŒ ãããã®èŠçŽ ã¯ã衚瀺ããã³ã³ãã³ãããåºæãµã€ãºã掟çãããŸãã
èŠçŽ ã«æç€ºçã«å®çŸ©ãããå¹
ãé«ãããªãå Žåããã©ãŠã¶ã¯ãã®ã³ã³ãã³ãã«åºã¥ããŠãµã€ãºãèšç®ããå¿
èŠããããŸãããã®éãmin-widthãmax-widthã芪ã³ã³ããå
ã®å©çšå¯èœãªã¹ããŒã¹ãªã©ã®å¶çŽãå°éããŸãããã®èšç®ã¯ãç¹ã«ãã¹ããããèŠçŽ ãæã€è€éãªã¬ã€ã¢ãŠãã®å Žåãèšç®ã³ã¹ããé«ããªãå¯èœæ§ããããŸãã
CSSåºæãµã€ãºãã£ãã·ã¥ã®ç޹ä»
CSSåºæãµã€ãºãã£ãã·ã¥ã¯ããããã®ãµã€ãºèšç®ã®çµæãä¿åãããã©ãŠã¶ã®æé©åæè¡ã§ãããã©ãŠã¶ãç¹å®ã®æ¡ä»¶äžïŒäŸïŒç¹å®ã®ãã¥ãŒããŒãå¹ ãç¹å®ã®CSSã«ãŒã«ã»ããïŒã§èŠçŽ ã®åºæãµã€ãºã決å®ãããšããã®çµæããã£ãã·ã¥ããŸãããã®åŸãåãæ¡ä»¶äžã§åãèŠçŽ ãã¬ã³ããªã³ã°ããããšãããšããã£ãã·ã¥ãããµã€ãºãååŸã§ãããããåèšç®ã®å¿ èŠããªããªããŸããããã«ãããç¹ã«é »ç¹ã«æŽæ°ãããã³ã³ãã³ããåçãªã¬ã€ã¢ãŠãããŸãã¯å€æ°ã®èŠçŽ ãå«ãã·ããªãªã§ãã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãå€§å¹ ã«åäžããŸãã
ãã£ãã·ã¥ã®ä»çµã¿
ãã£ãã·ã¥ã¯ããŒãšå€ã®ååã§åäœããŸãïŒ
- ããŒïŒ ããŒã¯ãåºæãµã€ãºã®èšç®ã«åœ±é¿ãäžããããŸããŸãªèŠå ããæŽŸçããŸããããã«ã¯éåžžãèŠçŽ ã®ã³ã³ãã³ããé©çšãããCSSã«ãŒã«ïŒãã©ã³ãããããã£ãããã£ã³ã°ãããŒãžã³ãbox-sizingãå«ãïŒã芪ã³ã³ããã§å©çšå¯èœãªã¹ããŒã¹ããã¥ãŒããŒããµã€ãºãå«ãŸããŸããCSSã®éåžžã«ããããªéããæ°ãããã£ãã·ã¥ãšã³ããªãäœæããå¯èœæ§ãããããšã«æ³šæããããšãéèŠã§ãã
- å€ïŒ å€ã¯ãèšç®ãããèŠçŽ ã®åºæãµã€ãºïŒå¹ ãšé«ãïŒã§ãã
ãã©ãŠã¶ãèŠçŽ ã®ãµã€ãºã決å®ããå¿ èŠãããå ŽåããŸããã£ãã·ã¥ã確èªããŸããäžèŽããããŒãèŠã€ãã£ãå Žåããã£ãã·ã¥ããããµã€ãºã䜿çšãããŸãããã以å€ã®å Žåããµã€ãºãèšç®ããããã®çµæãå°æ¥ã®äœ¿çšã®ããã«ãã£ãã·ã¥ã«ä¿åãããŸãã
CSSåºæãµã€ãºãã£ãã·ã¥ã䜿çšããã¡ãªãã
CSSåºæãµã€ãºãã£ãã·ã¥ã«ã¯ãããã€ãã®äž»èŠãªã¡ãªããããããŸãïŒ
- ã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ã®åäžïŒ åé·ãªãµã€ãºèšç®ãåé¿ããããšã§ããã£ãã·ã¥ã¯ã¬ã³ããªã³ã°äžã«ãã©ãŠã¶ãè¡ãå¿ èŠã®ããäœæ¥éãåæžããŸããããã«ãããããŒãžã®èªã¿èŸŒã¿æéãççž®ãããã¢ãã¡ãŒã·ã§ã³ãã¹ã ãŒãºã«ãªããŸãã
- CPU䜿çšçã®åæžïŒ åºæãµã€ãºã®èšç®ã¯ãç¹ã«è€éãªã¬ã€ã¢ãŠãã®å ŽåãCPUã«è² è·ããããå¯èœæ§ããããŸãããã£ãã·ã¥ã¯CPUãžã®è² è·ã軜æžããã¢ãã€ã«ããã€ã¹ã®ããããªãŒå¯¿åœãå»¶ã°ããä»ã®ã¿ã¹ã¯ã®ããã«ãªãœãŒã¹ãè§£æŸããããšãã§ããŸãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒ ããéãã¬ã³ããªã³ã°ã¯ãããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«çŽæ¥ã€ãªãããŸãããŠãŒã¶ãŒã¯ãè¿ éã«èªã¿èŸŒãŸããã¹ã ãŒãºã«å¿çãããŠã§ããµã€ãããããé åçã§ä¿¡é Œã§ãããã®ãšããŠèªèããŸãã
- ã¬ã¹ãã³ã·ãæ§ã®åäžïŒ ã¬ã€ã¢ãŠããç°ãªãç»é¢ãµã€ãºãåãã«é©å¿ããå ŽåïŒã¬ã¹ãã³ã·ããã¶ã€ã³ïŒããã©ãŠã¶ã¯èŠçŽ ã®ãµã€ãºãåèšç®ããå¿ èŠããã°ãã°ãããŸãããã£ãã·ã¥ã¯ããã®ããã»ã¹ãé«éåããã¬ã€ã¢ãŠããã¬ã¹ãã³ã·ãã§æµåçã§ããç¶ããããšãä¿èšŒããã®ã«åœ¹ç«ã¡ãŸãã
CSSåºæãµã€ãºãã£ãã·ã¥ãæã广çãªå Žé¢
ãã£ãã·ã¥ãæã广çãªã®ã¯ã次ã®ãããªã·ããªãªã§ãïŒ
- èŠçŽ ãåãã³ã³ãã³ããšCSSã§è€æ°åã¬ã³ããªã³ã°ãããå ŽåïŒ ããã¯ãã³ã³ãã³ããé »ç¹ã«æŽæ°ããããåã¬ã³ããªã³ã°ããããããåçãªã¬ã€ã¢ãŠãã§äžè¬çã§ãã
- èŠçŽ ãè€éãªåºæãµã€ãºèšç®ã䌎ãå ŽåïŒ ãã¹ããããæ§é ãè€éãªCSSã«ãŒã«ããŸãã¯å€éšãªãœãŒã¹ïŒäŸïŒãã©ã³ãïŒãžã®äŸåé¢ä¿ãæã€èŠçŽ ãæãæ©æµãåããŸãã
- ã¬ã€ã¢ãŠããã¬ã¹ãã³ã·ãã§ãç°ãªãç»é¢ãµã€ãºã«é©å¿ããå ŽåïŒ ãã£ãã·ã¥ã¯ããã¥ãŒããŒãã倿Žããããšãã®èŠçŽ ãµã€ãºã®åèšç®ãé«éåããã®ã«åœ¹ç«ã¡ãŸãã
- ã¹ã¯ããŒã«ããã©ãŒãã³ã¹ïŒ ã¹ã¯ããŒã«äžã«è¡šç€ºãããèŠçŽ ã®ãµã€ãºããã£ãã·ã¥ããããšã§ãã¹ã¯ããŒã«ããã©ãŒãã³ã¹ãå€§å¹ ã«åäžããŸããããã¯ãè€éãªã¬ã€ã¢ãŠããæã€é·ãããŒãžã§ç¹ã«éèŠã§ãã
åºæãµã€ãºãã£ãã·ã¥ãã¬ã€ã¢ãŠãã«äžãã圱é¿ã®äŸ
äŸ1ïŒã¬ã¹ãã³ã·ããªç»åã®ã£ã©ãªãŒ
ç»åãç°ãªãç»é¢ãµã€ãºã«é©å¿ããã°ãªããã§è¡šç€ºãããã¬ã¹ãã³ã·ããªç»åã®ã£ã©ãªãŒãèããŠã¿ãŸãããããã£ãã·ã¥ããªãå Žåããã©ãŠã¶ã¯ãã¥ãŒããŒãã倿Žããããã³ã«åç»åã®ãµã€ãºãåèšç®ããå¿ èŠããããŸãããã£ãã·ã¥ãããã°ããã©ãŠã¶ã¯æ¢ã«ã¬ã³ããªã³ã°ãããç»åã®ãã£ãã·ã¥ããããµã€ãºãååŸã§ããã¬ã€ã¢ãŠãããã»ã¹ãå€§å¹ ã«é«éåã§ããŸãã
ã·ããªãªïŒ ãŠãŒã¶ãŒãã¿ãã¬ããã瞊åãããæšªåãã«å転ãããŸãã
ãã£ãã·ã¥ãªãïŒ ãã©ãŠã¶ã¯ã®ã£ã©ãªãŒå ã®ãã¹ãŠã®ç»åã®ãµã€ãºãåèšç®ããŸãã
ãã£ãã·ã¥ããïŒ ãã©ãŠã¶ã¯ã»ãšãã©ã®ç»åã®ãã£ãã·ã¥ããããµã€ãºãååŸããæ°ãã衚瀺ãããããå転ã«ãã£ãŠã¬ã€ã¢ãŠããå€§å¹ ã«å€æŽããããããç»åã®ãµã€ãºã®ã¿ãåèšç®ããŸãã
äŸ2ïŒåçãªã³ã³ãã³ãã®æŽæ°
æ°ããã³ã³ãã³ãã§èšäºãé »ç¹ã«æŽæ°ãããã¥ãŒã¹ãµã€ããæ³åããŠã¿ãŠãã ããããã£ãã·ã¥ããªãå Žåããã©ãŠã¶ã¯èšäºã®ã³ã³ãã³ããæŽæ°ããããã³ã«ãã®ãµã€ãºãåèšç®ããå¿ èŠããããŸãããã£ãã·ã¥ãããã°ããã©ãŠã¶ã¯å€æŽãããŠããªãã³ã³ãã³ãéšåã®ãã£ãã·ã¥ããããµã€ãºãååŸã§ããå¿ èŠãªäœæ¥éãæžããããšãã§ããŸãã
ã·ããªãªïŒ ããã°æçš¿ã«æ°ããã³ã¡ã³ãã远å ãããŸãã
ãã£ãã·ã¥ãªãïŒ ãã©ãŠã¶ã¯ã³ã¡ã³ãã»ã¯ã·ã§ã³å šäœã®ã¬ã€ã¢ãŠããåèšç®ããå¯èœæ§ããããã³ã¡ã³ãã®è¿œå ã«ãã£ãŠã³ã³ãã³ããäžã«æŒãããããå Žåã¯ããã®äžã®èŠçŽ ã®ã¬ã€ã¢ãŠããåèšç®ããå¯èœæ§ããããŸãã
ãã£ãã·ã¥ããïŒ ãã©ãŠã¶ã¯å€æŽãããŠããªãã³ã¡ã³ãã®ãã£ãã·ã¥ããããµã€ãºãååŸããæ°ãã远å ãããã³ã¡ã³ããšãã®ããåšå²ã®èšç®ã«éäžããŸãã
äŸ3ïŒããªã¢ãã«ãã©ã³ãã䜿çšããè€éãªã¿ã€ãã°ã©ãã£
ããªã¢ãã«ãã©ã³ãã¯ã¿ã€ãã°ã©ãã£ã«å€§ããªæè»æ§ãããããããŠã§ã€ããå¹ ãåŸããªã©ã®ãã©ã³ãç¹æ§ããã现ããå¶åŸ¡ã§ããŸãããããããããã®ç¹æ§ãåçã«èª¿æŽãããšãããã¹ãã¬ã€ã¢ãŠãã®é »ç¹ãªåèšç®ã«ã€ãªããå¯èœæ§ããããŸããåºæãµã€ãºãã£ãã·ã¥ã¯ããããã®ã·ããªãªã§ããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãã
ã·ããªãªïŒ ãŠãŒã¶ãŒãã¹ã©ã€ããŒã䜿çšããŠæ®µèœã®ãã©ã³ããŠã§ã€ãã調æŽããŸãã
ãã£ãã·ã¥ãªãïŒ ãã©ãŠã¶ã¯ã¹ã©ã€ããŒã®èª¿æŽããšã«æ®µèœã®ã¬ã€ã¢ãŠããåèšç®ããŸãã
ãã£ãã·ã¥ããïŒ ãã©ãŠã¶ã¯ä»¥åã®ã¹ã©ã€ããŒäœçœ®ãããã£ãã·ã¥ããããµã€ãºã掻çšããŠå¹ççã«ã¬ã€ã¢ãŠããæŽæ°ããããã¹ã ãŒãºã§ã¬ã¹ãã³ã·ããªäœéšãå®çŸããŸãã
CSSåºæãµã€ãºãã£ãã·ã¥ã掻çšããæ¹æ³
CSSåºæãµã€ãºãã£ãã·ã¥ã¯å€§éšåãèªåçã«æ©èœããŸããããã®å¹æãæå€§åããããã«ã§ããããšãããã€ããããŸãïŒ
- äžèŠãªCSSã®å€æŽãé¿ããïŒ CSSã«ãŒã«ãäžå¿ èŠã«å€æŽãããšããã£ãã·ã¥ãç¡å¹ã«ãªãå¯èœæ§ããããŸããç¹ã«èŠçŽ ã®ã¬ã€ã¢ãŠãã«åœ±é¿ãäžããCSSã®å€æŽæ°ãæå°éã«æããããã«ããŠãã ãããããã¯ããªããæã以äžã«éèŠã§ããå¢çç·ã圱ããããã¯è²ãžã®ããããªèª¿æŽã§ããããã£ãã·ã¥ã®ç¡å¹åãåŒãèµ·ãããåèšç®ã匷å¶ããå¯èœæ§ããããŸãã
- äžè²«ããCSSã¹ã¿ã€ã«ã䜿çšããïŒ é¡äŒŒã®èŠçŽ éã§äžè²«ããã¹ã¿ã€ã«ã䜿çšãããšããã©ãŠã¶ã¯ãã£ãã·ã¥ããããµã€ãºèšç®ããã广çã«åå©çšã§ããŸããäŸãã°ãåæ§ã®ã¹ã¿ã€ã«ãæã€è€æ°ã®ãã¿ã³ãããå Žåãããããäžè²«ããŠã¹ã¿ã€ã«èšå®ãããŠããããšã確èªããŠãã ããã
- ãã©ã³ãã®èªã¿èŸŒã¿ãæé©åããïŒ ãã©ã³ãã®èªã¿èŸŒã¿ã¯ã¬ã€ã¢ãŠãããã©ãŒãã³ã¹ã«å€§ããªåœ±é¿ãäžããå¯èœæ§ããããŸãããã©ã³ããå¹ççã«èªã¿èŸŒãŸããããã«ãããã¡ã€ã«ãµã€ãºã倧ãããŠã§ããã©ã³ããè€éãªã¬ã³ããªã³ã°èŠä»¶ãæã€ãŠã§ããã©ã³ãã®äœ¿çšãé¿ããŠãã ãããFont Face Observerãããã«åœ¹ç«ã¡ãŸãã æ€èšãã¹ãææ³ãšããŠãã³ã³ãã³ãã§äœ¿çšããæåã®ã¿ãèªã¿èŸŒããã©ã³ããµãã»ããåããããŸãã
- ã¬ã€ã¢ãŠãã¹ã©ãã·ã³ã°ãé¿ããïŒ ã¬ã€ã¢ãŠãã¹ã©ãã·ã³ã°ã¯ããã©ãŠã¶ãçæéã«é£ç¶ããŠã¬ã€ã¢ãŠããåèšç®ãããšãã«çºçããŸããããã¯ãã«ãŒãå
ã§ã¬ã€ã¢ãŠãããããã£ïŒäŸïŒ
offsetWidthãoffsetHeightïŒãèªã¿æžãããã¹ã¯ãªããã«ãã£ãŠåŒãèµ·ããããå¯èœæ§ããããŸããã¬ã€ã¢ãŠãã®å€æŽããŸãšããŠè¡ããäžèŠãªèªã¿æžããé¿ããããšã§ãã¬ã€ã¢ãŠãã¹ã©ãã·ã³ã°ãæå°éã«æããŠãã ããã - `contain`ããããã£ãæŠç¥çã«äœ¿çšããïŒ
containCSSããããã£ã¯ãã¬ã€ã¢ãŠããã¹ã¿ã€ã«ããã€ã³ãã®ããã«ããã¥ã¡ã³ãããªãŒã®äžéšãåé¢ããã¡ã«ããºã ãæäŸããŸãã`contain: layout`ãŸãã¯`contain: content`ã䜿çšãããšã倿Žãçºçãããšãã«åèšç®ã®ç¯å²ãå¶éããããšã§ããã©ãŠã¶ãåºæãµã€ãºãã£ãã·ã¥ããã广çã«ç®¡çããã®ã«åœ¹ç«ã¡ãŸãããã ãã䜿ãããããšãã£ãã·ã¥ã®æå¹æ§ã劚ããå¯èœæ§ããããããè³¢æã«äœ¿çšããŠãã ããã - åçãªã³ã³ãã³ãæ¿å ¥ã«æ³šæããïŒ ãã£ãã·ã¥ã¯åã¬ã³ããªã³ã°ã«åœ¹ç«ã¡ãŸãããDOMã«åžžã«æ°ããèŠçŽ ãæ¿å ¥ãããšããããã®èŠçŽ ãã¹ã¿ã€ãªã³ã°ãæ§é ã«ãããŠãŠããŒã¯ã§ããå Žåããã£ãã·ã¥ãã¹ã«ã€ãªããå¯èœæ§ããããŸããã³ã³ãã³ãã®èªã¿èŸŒã¿æŠç¥ãæé©åããŠãDOMã®æŽæ°é »åºŠãæå°éã«æããŠãã ããã倧ããªãªã¹ããã°ãªããã«ã¯ãä»®æ³åãªã©ã®æè¡ã䜿çšããããšãæ€èšããŠãã ããã
ãã£ãã·ã¥ããã©ãŒãã³ã¹ã®ãããã°
æ®å¿µãªãããCSSåºæãµã€ãºãã£ãã·ã¥ã®åäœãéçºè ããŒã«ã§çŽæ¥èгå¯ããããšã¯éåžžã§ããŸãããããããæ¬¡ã®ãããªããŒã«ã䜿çšããŠã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãåæããããšã§ããã®åœ±é¿ãæšæž¬ããããšãã§ããŸãïŒ
- Chrome DevToolsã®ããã©ãŒãã³ã¹ããã«ïŒ ãã®ããŒã«ã䜿çšãããšããŠã§ããµã€ãã®ã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãèšé²ããã³åæã§ããŸããã¬ã€ã¢ãŠãèšç®ã«ããªãã®æéãããã£ãŠããé åãæ¢ããäžèŠãªCSSã®å€æŽãã¬ã€ã¢ãŠãã¹ã©ãã·ã³ã°ãªã©ã®æœåšçãªåå ã調æ»ããŠãã ããã
- WebPageTestïŒ ãã®ãªã³ã©ã€ã³ããŒã«ã¯ãã¬ã³ããªã³ã°æéãCPU䜿çšçãªã©ããŠã§ããµã€ãã®è©³çްãªããã©ãŒãã³ã¹ã¡ããªãã¯ãæäŸããŸããããã©ãŒãã³ã¹ãæ¹åã§ããé åãç¹å®ããããã«äœ¿çšããŠãã ããã
- ãã©ãŠã¶ã®ã¬ã³ããªã³ã°çµ±èšïŒ äžéšã®ãã©ãŠã¶ã¯ããã詳现ãªã¬ã³ããªã³ã°çµ±èšãå ¬éããå®éšçãªãã©ã°ãèšå®ãæäŸããŠããŸããå©çšå¯èœãªãªãã·ã§ã³ã«ã€ããŠã¯ãã䜿ãã®ãã©ãŠã¶ã®ããã¥ã¡ã³ãã確èªããŠãã ãããäŸãã°ãChromeã§ã¯ãDevToolsã®ã¬ã³ããªã³ã°ã¿ãã§ãShow Layout Shift Regionsããæå¹ã«ãããšãã¬ã€ã¢ãŠãã·ãããèŠèŠåã§ããŸããããã¯ãã£ãã·ã¥ãã¹ãéå¹çãªã¬ã€ã¢ãŠãèšç®ã瀺ããŠããå¯èœæ§ããããŸãã
Chrome DevToolsã®ããã©ãŒãã³ã¹ããã«ã§ããRecalculate Styleãããã³ãLayoutãã€ãã³ãã«æ³šæãæã£ãŠãã ãããé »ç¹ãŸãã¯é·æéã®ãLayoutãã€ãã³ãã¯ãåºæãµã€ãºãã£ãã·ã¥ã广çã«å©çšãããŠããªãããšã瀺ããŠããå¯èœæ§ããããŸããããã¯ãé »ç¹ã«å€åããã³ã³ãã³ããCSSã¹ã¿ã€ã«ããŸãã¯ã¬ã€ã¢ãŠãã¹ã©ãã·ã³ã°ãåå ã§ããå¯èœæ§ããããŸãã
ããããèœãšã穎ãšèæ ®äºé
- ãã£ãã·ã¥ã®ç¡å¹åïŒ åè¿°ã®éããåºæãµã€ãºã決å®ããæ¡ä»¶ã倿Žããããšããã£ãã·ã¥ã¯ç¡å¹ã«ãªããŸããããã«ã¯ãèŠçŽ ã®ã³ã³ãã³ããCSSã«ãŒã«ããŸãã¯èŠªã³ã³ããã§å©çšå¯èœãªã¹ããŒã¹ã®å€æŽãå«ãŸããŸããCSSãšJavaScriptã®ã³ãŒããæé©åããéã«ã¯ããããã®èŠå ã«æ³šæããŠãã ããã
- ãã©ãŠã¶ã®äºææ§ïŒ CSSåºæãµã€ãºãã£ãã·ã¥ã¯ã»ãšãã©ã®ææ°ãã©ãŠã¶ã§ãµããŒããããŠããŸãããå ·äœçãªå®è£ ã®è©³çްã¯ç°ãªãå ŽåããããŸããäžè²«ããããã©ãŒãã³ã¹ã確ä¿ããããã«ãããŸããŸãªãã©ãŠã¶ã§ãŠã§ããµã€ãããã¹ãããããšãéèŠã§ãããã©ãŠã¶ã®ãªãªãŒã¹ããŒãã確èªããŠãã ããã
- éå°ãªæé©åïŒ ãã£ãã·ã¥ã®æé©åã¯éèŠã§ãããéå°ãªæé©åãé¿ããããšãåæ§ã«éèŠã§ããããããªããã©ãŒãã³ã¹åäžã®ããã«ãã³ãŒãã®å¯èªæ§ãä¿å®æ§ãç ç²ã«ããªãã§ãã ãããåžžã«ã¯ãªãŒã³ã§æ§é åãããã³ãŒããæžãããšãåªå ããŠãã ããã
- JavaScriptã«ããåçãªCSS倿ŽïŒ JavaScriptãä»ããŠCSSããããã£ãåçã«å€æŽããããšã¯æè»æ§ããããããŸãããéå°ãªå€æŽãæé©åãããŠããªãã³ãŒãã¯ãã¬ã€ã¢ãŠãã¹ã©ãã·ã³ã°ãå¢å ããããã£ãã·ã¥ã®æå¹æ§ãäœäžãããå¯èœæ§ããããŸããJavaScriptã䜿çšããŠCSSãæäœããå Žåã¯ãæŽæ°ãã¹ããããªã³ã°ãããã倿ŽããŸãšããŠè¡ã£ããããŠãã¬ã€ã¢ãŠãã®åèšç®ãæå°éã«æããããšãæ€èšããŠãã ããã
- CSS-in-JSã©ã€ãã©ãªïŒ CSS-in-JSã©ã€ãã©ãªã¯ãCSSã«ãŒã«ã®ç®¡çãšãã®åºæãµã€ãºãã£ãã·ã¥ãžã®åœ±é¿ã«ãããŠè€éããçããããå¯èœæ§ããããŸãããããã®ã©ã€ãã©ãªãã¹ã¿ã€ã«ã®æŽæ°ãã©ã®ããã«åŠçããããèªèãããã®ããã©ãŒãã³ã¹ãžã®åœ±é¿ãèæ ®ããŠãã ããã
- 宿©ã§ã®ãã¹ãïŒ ãšãã¥ã¬ãŒã¿ã¯æçšãªéçºç°å¢ãæäŸããŸãããåŠçèœåããããã¯ãŒã¯æ¡ä»¶ãç°ãªã宿©ã§ãŠã§ããµã€ãããã¹ãããããšãéèŠã§ããããã«ãããå®éã®ã·ããªãªã§åºæãµã€ãºãã£ãã·ã¥ãã©ã®ããã«æ©èœããããããæ£ç¢ºã«çè§£ã§ããŸãã
ã¬ã€ã¢ãŠãæé©åã®æªæ¥
CSSåºæãµã€ãºãã£ãã·ã¥ã¯ãã¬ã€ã¢ãŠãããã©ãŒãã³ã¹ã®æé©åã«é¢ããŠããºã«ã®1ããŒã¹ã«ãããŸããããŠã§ãæè¡ãé²åããã«ã€ããŠãæ°ããæè¡ãAPIãçµ¶ããç»å ŽããŠããŸããå°æ¥ã®éçºã§ææãªåéã«ã¯ã次ã®ãããªãã®ããããŸãïŒ
- ããé«åºŠãªãã£ãã·ã¥æŠç¥ïŒ ãã©ãŠã¶ã¯ãããåºç¯ãªã·ããªãªãCSSãã¿ãŒã³ãåŠçã§ãããããæŽç·Žããããã£ãã·ã¥æŠç¥ãå®è£ ããå¯èœæ§ããããŸãã
- æ¹åãããã¬ã€ã¢ãŠãã¢ã«ãŽãªãºã ïŒ ããå¹ççãªã¬ã€ã¢ãŠãã¢ã«ãŽãªãºã ã®ç ç©¶ã¯ããã£ãã·ã¥ã«é ŒããªããŠãå€§å¹ ãªããã©ãŒãã³ã¹åäžã«ã€ãªããå¯èœæ§ããããŸãã
- WebAssemblyïŒ WebAssemblyã䜿çšãããšãéçºè ã¯ãã©ãŠã¶ã§å®è¡ã§ãã髿§èœãªã³ãŒããæžãããšãã§ããŸããããã¯ãã«ã¹ã¿ã ã¬ã€ã¢ãŠããšã³ãžã³ãå®è£ ããããèšç®éã®å€ããµã€ãºèšç®ãæé©åãããããããã«äœ¿çšã§ããŸãã
- ææ©çããŒã¹ãšã¬ã³ããªã³ã°ïŒ ãã©ãŠã¶ã¯ããŸããªã衚瀺ãããå¯èœæ§ãé«ãããŒãžã®éšåãç©æ¥µçã«ããŒã¹ããŠã¬ã³ããªã³ã°ããç¥èŠãããèªã¿èŸŒã¿æéãããã«ççž®ããå¯èœæ§ããããŸãã
çµè«
CSSåºæãµã€ãºãã£ãã·ã¥ã¯ãææ°ã®ãŠã§ããã©ãŠã¶ã§ã¬ã€ã¢ãŠãããã©ãŒãã³ã¹ãæé©åããããã®è²ŽéãªããŒã«ã§ãããã®ä»çµã¿ãšå¹æçãªæŽ»çšæ¹æ³ãçè§£ããããšã§ãããéããããã¹ã ãŒãºã§ãããã¬ã¹ãã³ã·ããªãŠã§ããµã€ããäœæã§ããŸãããã£ãã·ã¥ã¯å€§éšåãèªåçã«æ©èœããŸãããCSSã®å€æŽãã¬ã€ã¢ãŠãã¹ã©ãã·ã³ã°ããã©ã³ãã®èªã¿èŸŒã¿ã«æ³šæããããšã§ããã®æå¹æ§ãå€§å¹ ã«åäžãããããšãã§ããŸãããŠã§ãæè¡ãé²åãç¶ããäžã§ãæ°ããæé©åæè¡ãAPIã«ã€ããŠã®æ å ±ãåžžã«ææ¡ããŠããããšããåè¶ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããã«äžå¯æ¬ ã§ãã
ããã©ãŒãã³ã¹ã®æé©åãåªå ããCSSåºæãµã€ãºãã£ãã·ã¥ã®ãããªæè¡ãåãå ¥ããããšã§ãäžçäžã®éçºè ã¯ããã¹ãŠã®äººã«ãšã£ãŠããéããããå¹ççãªãŠã§ãã«è²¢ç®ããããšãã§ããŸãã