ç©çããŒã¹ã®åããã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ãã€ã³ã¿ã©ã¯ãã£ããªUI/UXã®ããã®å®è·µçãªäŸãå«ããé«åºŠãªCSSã¢ãã¡ãŒã·ã§ã³ãã¯ããã¯ãæ¢æ±ããŸãã
é«åºŠãªCSSã¢ãã¡ãŒã·ã§ã³ïŒç©çããŒã¹ã®åããšã€ãŒãžã³ã°
CSSã¢ãã¡ãŒã·ã§ã³ã¯å€§ããé²åããéçºè ã«é åçã§ãã€ãããã¯ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœæããããã®åŒ·åãªããŒã«ãæäŸããŠããŸããåºæ¬çãªã¢ãã¡ãŒã·ã§ã³ã¯æ¯èŒçç°¡åã§ãããç©çããŒã¹ã®åããã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ã®ãããªé«åºŠãªãã¯ããã¯ãç¿åŸããããšã§ãWebãããžã§ã¯ããããæŽç·Žãããã¬ãã«ã«åŒãäžããããšãã§ããŸãããã®å æ¬çãªã¬ã€ãã§ã¯ããããã®æŠå¿µãæ¢æ±ããå®è·µçãªäŸãšå®è¡å¯èœãªæŽå¯ãæäŸããŠãé åçãªã¢ãã¡ãŒã·ã§ã³ãäœæããã®ã«åœ¹ç«ã¡ãŸãã
åºæ¬ã®çè§£
é«åºŠãªãã¯ããã¯ã«é£ã³èŸŒãåã«ãCSSã¢ãã¡ãŒã·ã§ã³ã®åºæ¬ããã£ããçè§£ããããšãéèŠã§ããããã«ã¯ä»¥äžãå«ãŸããŸãïŒ
- ããŒãã¬ãŒã ïŒã¢ãã¡ãŒã·ã§ã³ã®ããŸããŸãªç¶æ ãšããããã®éã§å€åããããããã£ãå®çŸ©ããŸãã
- ã¢ãã¡ãŒã·ã§ã³ããããã£ïŒã¢ãã¡ãŒã·ã§ã³ã®æéãé å»¶ãç¹°ãè¿ãåæ°ãæ¹åãå¶åŸ¡ããŸãã
- ã€ãŒãžã³ã°é¢æ°ïŒæéãšãšãã«ã¢ãã¡ãŒã·ã§ã³ã®å€åçãæ±ºå®ããŸãã
ãããã®æ§æèŠçŽ ã¯ãããããCSSã¢ãã¡ãŒã·ã§ã³ãäœæããããã«äžå¯æ¬ ã§ããããããããã£ãããšææ¡ããããšã§ãé«åºŠãªãã¯ããã¯ã®çè§£ãšå®è£ ããã容æã«ãªããŸãã
ç©çããŒã¹ã®åãïŒã¢ãã¡ãŒã·ã§ã³ã«ãªã¢ãªãºã ããããã
åŸæ¥ã®CSSã¢ãã¡ãŒã·ã§ã³ã¯ãç·åœ¢ãŸãã¯åçŽãªã€ãŒãžã³ã°é¢æ°ã䜿çšããããšãå€ããäžèªç¶ãŸãã¯ããããçãªã¢ãã¡ãŒã·ã§ã³ã«ã€ãªããããšããããŸããäžæ¹ãç©çããŒã¹ã®åãã¯ãéåãæ©æŠãæ £æ§ãªã©ã®çŸå®äžçã®ç©çååãã·ãã¥ã¬ãŒãããŠããããªã¢ã«ã§é åçãªã¢ãã¡ãŒã·ã§ã³ãäœæããŸããäžè¬çãªç©çããŒã¹ã®ã¢ãã¡ãŒã·ã§ã³ãã¯ããã¯ã«ã¯ä»¥äžã®ãããªãã®ããããŸãïŒ
ã¹ããªã³ã°ã¢ãã¡ãŒã·ã§ã³
ã¹ããªã³ã°ã¢ãã¡ãŒã·ã§ã³ã¯ãããã®åäœãã·ãã¥ã¬ãŒãããæçµäœçœ®ã«èœã¡çãåã«ååŸã«æ¯åããŸããããã«ããããã¿ã³ãã¢ãŒãã«ãéç¥ãªã©ã®UIèŠçŽ ã«ç¹ã«å¹æçãªã匟ããããªãã€ãããã¯ãªå¹æãçãŸããŸãã
äŸïŒã¹ããªã³ã°ã¢ãã¡ãŒã·ã§ã³ã®å®è£
CSSã«ã¯çµã¿èŸŒã¿ã®ã¹ããªã³ã°ç©çåŠã¯ãããŸããããã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ã䜿çšããŠå¹æãè¿äŒŒãããããšãã§ããŸããGreenSockïŒGSAPïŒãPopmotionã®ãããªJavaScriptã©ã€ãã©ãªã¯å°çšã®ã¹ããªã³ã°ã¢ãã¡ãŒã·ã§ã³é¢æ°ãæäŸããŠããŸãããCSSã®ã¿ã®ããŒãžã§ã³ãäœæããŠã¿ãŸãããã
/* CSS */
.spring-animation {
animation: spring 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes spring {
0% {
transform: translateY(-100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
cubic-bezier()颿°ã䜿çšãããšãã«ã¹ã¿ã ã€ãŒãžã³ã°ã«ãŒããå®çŸ©ã§ããŸããå€(0.175, 0.885, 0.32, 1.275)ã¯ããªãŒããŒã¹ããŒå¹æãäœæããèœã¡çãåã«ã¹ããªã³ã°ã®æ¯åãã·ãã¥ã¬ãŒãããŸããç®çã®ã¹ããªã³ã°ã®ãããªå¹æãåŸãããã«ãããŸããŸãªå€ã詊ããŠãã ããã
åœéçãªäŸïŒã¹ããªã³ã°ã¢ãã¡ãŒã·ã§ã³ã¯ãäžçäžã®ã¢ãã€ã«ã¢ããªã€ã³ã¿ãŒãã§ãŒã¹ã§åºã䜿çšãããŠããŸããiOSã®ããŠã³ã¹å¹æããAndroidã®ãªããã«ã¢ãã¡ãŒã·ã§ã³ãŸã§ãååã¯åãã§ããã€ãŸããå¿çæ§ãé«ãé åçãªãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ãäœæããããšã§ãã
æžè¡°ã¢ãã¡ãŒã·ã§ã³
æžè¡°ã¢ãã¡ãŒã·ã§ã³ã¯ãæ©æŠããã®ä»ã®åã«ãããªããžã§ã¯ãã®åŸã ã«æžéãã·ãã¥ã¬ãŒãããŸããããã¯ãã¹ã¯ããŒã«å¹æãéåéããŒã¹ã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãªã©ãèªç¶ã§å¿çæ§ã®é«ãã¢ãã¡ãŒã·ã§ã³ãäœæããã®ã«åœ¹ç«ã¡ãŸãã
äŸïŒæžè¡°ã¢ãã¡ãŒã·ã§ã³ã®å®è£
ã¹ããªã³ã°ã¢ãã¡ãŒã·ã§ã³ãšåæ§ã«ãã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ãJavaScriptã©ã€ãã©ãªã䜿çšããŠæžè¡°å¹æãè¿äŒŒãããããšãã§ããŸãã以äžã«CSSã®ã¿ã®äŸã瀺ããŸãïŒ
/* CSS */
.decay-animation {
animation: decay 2s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}
@keyframes decay {
0% {
transform: translateX(0);
}
100% {
transform: translateX(500px);
}
}
cubic-bezier(0.0, 0.0, 0.2, 1)ã«ãŒãã¯ãé
ãéå§ãšããã«ç¶ãæ¥éãªå éãäœæããçµããã«è¿ã¥ãã«ã€ããŠåŸã
ã«æžéããŸããããã¯ããªããžã§ã¯ããéåéã倱ãå¹æãæš¡å£ããŠããŸãã
åœéçãªäŸïŒæžè¡°ã¢ãã¡ãŒã·ã§ã³ã¯ãç¹ã«ã¹ã¯ããŒã«ã®å®è£ ã«ãããŠãã¢ãã€ã«UIã§äžè¬çã«äœ¿çšãããŠããŸããããšãã°ããŠãŒã¶ãŒããªã¹ããã¹ã¯ã€ããããšããªã¹ãã¯ã¹ã ãŒãºã«æžéããäžåœã®WeChatãåºã䜿ãããŠããWhatsAppãæ¥æ¬ã®Lineã®ãããªã¢ããªå šäœã§äœ¿çšããããèªç¶ã§çŽæçãªãšã¯ã¹ããªãšã³ã¹ãäœæããŸãã
ã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ïŒã¢ãã¡ãŒã·ã§ã³ãããŒãºã«åãããŠèª¿æŽãã
ã€ãŒãžã³ã°é¢æ°ã¯ãæéãšãšãã«ã¢ãã¡ãŒã·ã§ã³ã®å€åçãå¶åŸ¡ããŸããCSSã¯ãlinearãeaseãease-inãease-outãease-in-outãªã©ãããã€ãã®çµã¿èŸŒã¿ã€ãŒãžã³ã°é¢æ°ãæäŸããŸããããããããè€éã§ãã¥ã¢ã³ã¹ã®ããã¢ãã¡ãŒã·ã§ã³ã®ããã«ã¯ãç¬èªã®ã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ãäœæããå¿
èŠãããå ŽåããããŸãã
ãã¥ãŒããã¯ããžã§æ²ç·ã«ã€ããŠ
CSSã®ã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ã¯ãéåžžããã¥ãŒããã¯ããžã§æ²ç·ã䜿çšããŠå®çŸ©ãããŸãããã¥ãŒããã¯ããžã§æ²ç·ã¯ã4ã€ã®å¶åŸ¡ç¹ãP0ãP1ãP2ãP3ã«ãã£ãŠå®çŸ©ãããŸããP0ã¯åžžã«(0, 0)ã§ãããP3ã¯åžžã«(1, 1)ã§ãããããããã¢ãã¡ãŒã·ã§ã³ã®éå§ãšçµäºã衚ããŸããP1ãšP2ã¯ãæ²ç·ã®åœ¢ç¶ãã²ããŠã¯ã¢ãã¡ãŒã·ã§ã³ã®ã¿ã€ãã³ã°ãå®çŸ©ããå¶åŸ¡ç¹ã§ãã
cubic-bezier()颿°ã¯ãP1ãšP2ã®x座æšãšy座æšã§ãã4ã€ã®å€ãåŒæ°ãšããŠåããŸããäŸïŒ
cubic-bezier(0.25, 0.1, 0.25, 1.0) /* ease-in-out */
ã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ã®äœæã®ããã®ãªã³ã©ã€ã³ããŒã«
ããã€ãã®ãªã³ã©ã€ã³ããŒã«ã¯ãã«ã¹ã¿ã ãã¥ãŒããã¯ããžã§æ²ç·ãäœæããã³èŠèŠåããã®ã«åœ¹ç«ã¡ãŸãããããã®ããŒã«ã䜿çšãããšãå¶åŸ¡ç¹ãæäœããŠãçµæã®ã€ãŒãžã³ã°é¢æ°ããªã¢ã«ã¿ã€ã ã§ç¢ºèªã§ããŸããããã€ãã®äººæ°ã®ãããªãã·ã§ã³ã«ã¯ä»¥äžãå«ãŸããŸãïŒ
- cubic-bezier.comïŒã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ãäœæããã³ãã¹ãããããã®ã·ã³ãã«ã§çŽæçãªããŒã«ã§ãã
- Easings.netïŒèŠèŠçãªè¡šçŸãšã³ãŒãã¹ãããããåããäžè¬çãªã€ãŒãžã³ã°é¢æ°ã®ã³ã¬ã¯ã·ã§ã³ã§ãã
- GSAP Easing VisualizerïŒGreenSockã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªå ã®ã€ãŒãžã³ã°é¢æ°ãæ¢çŽ¢ããã³ã«ã¹ã¿ãã€ãºããããã®èŠèŠçãªããŒã«ã§ãã
ã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ã®å®è£
ã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ãäœæããããCSSã¢ãã¡ãŒã·ã§ã³ã§äœ¿çšã§ããŸãïŒ
/* CSS */
.custom-easing-animation {
animation: custom-ease 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
@keyframes custom-ease {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
ãã®äŸã§ã¯ãcubic-bezier(0.68, -0.55, 0.265, 1.55)ã«ãŒãããªãŒããŒã¹ããŒå¹æãäœæããã¢ãã¡ãŒã·ã§ã³ããããã€ãããã¯ã§é
åçã«ããŸãã
åœéçãªäŸïŒããŸããŸãªæåã«ãããŠãã¢ãã¡ãŒã·ã§ã³ã«å¯ŸããèŠèŠçãªå¥œã¿ã¯ç°ãªããŸããäžéšã®æåã§ã¯ã埮åŠã§ã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ã奜ãŸããŸãããä»ã®æåã§ã¯ããããã€ãããã¯ã§è¡šçŸåè±ããªåããæ¡çšãããŠããŸããã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ã«ããããã¶ã€ããŒã¯ã¢ãã¡ãŒã·ã§ã³ãç¹å®ã®æåççŸåŠã«åãããŠèª¿æŽã§ããŸããããšãã°ãæ¥æ¬åžå Žåãã®ã¢ãã¡ãŒã·ã§ã³ã¯ç²ŸåºŠãšæµåæ§ã«çŠç¹ãåœãŠããããããŸããããã©ãã³ã¢ã¡ãªã«åžå Žåãã®ã¢ãã¡ãŒã·ã§ã³ã¯ããé®®ããã§ãšãã«ã®ãã·ã¥ãªãã®ã«ãªãå¯èœæ§ããããŸããããã¯ãUI/UXãã¶ã€ã³ãç¹å®ã®ã¿ãŒã²ãããªãŒãã£ãšã³ã¹ãšæåçãªã³ã³ããã¹ãã«é©å¿ãããããšã®éèŠæ§ã匷調ããŠããŸãã
å®è·µçãªå¿çšãšäŸ
çè«çãªåŽé¢ãã«ããŒãããšããã§ãWebéçºã«ãããç©çããŒã¹ã®åããšã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ã®å®è·µçãªå¿çšãããã€ãèŠãŠãããŸãããïŒ
UIèŠçŽ ã®ãã©ã³ãžã·ã§ã³
ãã¿ã³ã®ã¯ãªãã¯ãã¢ãŒãã«ã®è¡šç€ºãéç¥ã¢ã©ãŒãã«ã¹ããªã³ã°ã¢ãã¡ãŒã·ã§ã³ã䜿çšããŠãããå¿çæ§ãé«ãé åçãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæããŸãã
ã¹ã¯ããŒã«ã€ã³ã¿ã©ã¯ã·ã§ã³
ã¹ã¯ããŒã«å¹æã«æžè¡°ã¢ãã¡ãŒã·ã§ã³ãå®è£ ããŠãéåéãã·ãã¥ã¬ãŒãããããèªç¶ã§çŽæçãªãã©ãŠãžã³ã°ãšã¯ã¹ããªãšã³ã¹ãäœæããŸãã
ããŒãã£ã³ã°ã¢ãã¡ãŒã·ã§ã³
ã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ã䜿çšããŠããŠãŒã¶ãŒãã³ã³ãã³ãã®èªã¿èŸŒã¿ãåŸ ã£ãŠããéãæ¥œããŸãç¶ãããŠããŒã¯ã§èŠèŠçã«é åçãªããŒãã£ã³ã°ã¢ãã¡ãŒã·ã§ã³ãäœæããŸãã鲿ã埮åŠã«ç€ºåããããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒã¯ãäžçäžã§ç¥èŠãããããã©ãŒãã³ã¹ãåäžãããŸãã
ãã©ã©ãã¯ã¹ã¹ã¯ããŒã«
ç©çããŒã¹ã®åããšãã©ã©ãã¯ã¹ã¹ã¯ããŒã«ãçµã¿åãããŠããŠãŒã¶ãŒã®å ¥åã«åå¿ããæ²¡å ¥åã§èŠèŠçã«çŽ æŽãããWebããŒãžãäœæããŸããããšãã°ãèæ¯ç»åã®ã¬ã€ã€ãŒã«ç°ãªãã€ãŒãžã³ã°é¢æ°ã䜿çšããŠãã¹ã¯ããŒã«æã«å¥¥è¡ããšåãã®é¯èŠãäœæããŸãã
ããŒã¿ããžã¥ã¢ã©ã€ãŒãŒã·ã§ã³
ã¢ãã¡ãŒã·ã§ã³ã¯ãããŒã¿ããžã¥ã¢ã©ã€ãŒãŒã·ã§ã³ãåçã«æ¹åã§ããŸããéçãªãã£ãŒãã®ä»£ããã«ãã¹ããªã³ã°ãšæžè¡°ã®ç©çåŠã䜿çšããŠããŒã¿ã»ããã®å€æŽãã¢ãã¡ãŒããããã€ãããºã ãšæçãã远å ããŸããããã«ããããŠãŒã¶ãŒã¯ãã¬ã³ããããçŽæçã«ææ¡ã§ããŸããäžççµæžããŒã¿ãå¯èŠåããéãã¢ãã¡ãŒã·ã§ã³ã¯éçãªæ°åã«åœãå¹ã蟌ãããšãã§ããŸãã
ããã©ãŒãã³ã¹ã«é¢ããèæ ®äºé
ã¢ãã¡ãŒã·ã§ã³ã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããšãã§ããŸãããããã©ãŒãã³ã¹ãžã®åœ±é¿ãèæ ®ããããšãéèŠã§ããé床ãŸãã¯æé©åãããŠããªãã¢ãã¡ãŒã·ã§ã³ã¯ããžã£ã®ãŒãªããã©ãŒãã³ã¹ãåŠå®çãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªããå¯èœæ§ããããŸããããã©ãŒãã³ã¹ãæé©åããããã®ãã³ããããã€ã玹ä»ããŸãïŒ
transformãšopacityã䜿çšããïŒãããã®ããããã£ã¯ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ãããŠãããCPUã§ã¯ãªãGPUã«ãã£ãŠåŠçããããããããã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ã«ãªããŸãã- ã¬ã€ã¢ãŠãããããã£ã®ã¢ãã¡ãŒã·ã§ã³ãé¿ããïŒ
widthãheightãtopãªã©ã®ããããã£ãã¢ãã¡ãŒããããšããªãããŒãšåæç»ãããªã¬ãŒãããå¯èœæ§ãããããããã¯ããã©ãŒãã³ã¹è² è·ã®é«ãæäœã§ãã will-changeã䜿çšããïŒãã®ããããã£ã¯ãèŠçŽ ã倿Žãããå¯èœæ§ãé«ãããšããã©ãŠã¶ã«éç¥ããäºåã«ã¬ã³ããªã³ã°ãæé©åã§ããããã«ããŸãããã ãããªãœãŒã¹ãå€§å¹ ã«æ¶è²»ããå¯èœæ§ããããããæ§ããã«äœ¿çšããŠãã ããã- ã¢ãã¡ãŒã·ã§ã³ãçãã·ã³ãã«ã«ä¿ã€ïŒè€éãªã¢ãã¡ãŒã·ã§ã³ã¯èšç®ã³ã¹ããé«ããªãå¯èœæ§ããããŸããå¿ èŠã«å¿ããŠãããå°ããããã管çããããã¢ãã¡ãŒã·ã§ã³ã«åå²ããŠãã ããã
- ããŸããŸãªããã€ã¹ããã©ãŠã¶ã§ãã¹ãããïŒã¢ãã¡ãŒã·ã§ã³ã¯ããã©ãããã©ãŒã ã«ãã£ãŠããã©ãŒãã³ã¹ãç°ãªãå ŽåããããŸããäžè²«ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã確ä¿ããããã«ã¯ã培åºçãªãã¹ããäžå¯æ¬ ã§ãã
CSSã¢ãã¡ãŒã·ã§ã³ã®æªæ¥
CSSã¢ãã¡ãŒã·ã§ã³ã¯é²åãç¶ããæ°ããæ©èœããã¯ããã¯ã宿çã«ç»å ŽããŠããŸãããã®åéã®ããã€ãã®ãšããµã€ãã£ã³ã°ãªãã¬ã³ãã«ã¯ä»¥äžã®ãããªãã®ããããŸãïŒ
- ã¹ã¯ããŒã«é§ååã¢ãã¡ãŒã·ã§ã³ïŒãŠãŒã¶ãŒã®ã¹ã¯ããŒã«äœçœ®ã«ãã£ãŠçŽæ¥å¶åŸ¡ãããã¢ãã¡ãŒã·ã§ã³ã§ãã€ã³ã¿ã©ã¯ãã£ãã§é åçãªã¹ã¯ããŒã«ãšã¯ã¹ããªãšã³ã¹ãäœæããŸãã
- View Transitions APIïŒãã®æ°ããAPIã«ãããWebããŒãžéã®ããŸããŸãªç¶æ éã®ã·ãŒã ã¬ã¹ãªãã©ã³ãžã·ã§ã³ãå¯èœã«ãªããããæµåçã§æ²¡å ¥æã®ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœæãããŸãã
- è€éãªã¢ãã¡ãŒã·ã§ã³ã®ããã®WebAssemblyïŒWASMïŒïŒWASMã䜿çšãããšãéçºè ã¯èšç®è² è·ã®é«ãã¢ãã¡ãŒã·ã§ã³ã¢ã«ãŽãªãºã ããã©ãŠã¶ã§çŽæ¥å®è¡ã§ããéåžžã«è€éã§ããã©ãŒãã³ã¹ã®é«ãã¢ãã¡ãŒã·ã§ã³ã®å¯èœæ§ãéããŸãã
çµè«
ç©çããŒã¹ã®åããã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ã®ãããªé«åºŠãªCSSã¢ãã¡ãŒã·ã§ã³ãã¯ããã¯ãç¿åŸããããšã¯ãWebãããžã§ã¯ãã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸããæ ¹æ¬åçãçè§£ããåµé çã«é©çšããããšã§ãèŠèŠçã«é åçã§ããã ãã§ãªããèªç¶ã§å¿çæ§ãé«ããé åçãªã¢ãã¡ãŒã·ã§ã³ãäœæã§ããŸããããã©ãŒãã³ã¹ãåªå ããã¢ãã¡ãŒã·ã§ã³ã培åºçã«ãã¹ãããŠãããã€ã¹ãå Žæã«é¢ä¿ãªãããã¹ãŠãŠãŒã¶ãŒã«ãšã£ãŠäžè²«ããæ¥œãããšã¯ã¹ããªãšã³ã¹ã確ä¿ããããšãéèŠã§ããCSSã¢ãã¡ãŒã·ã§ã³ãé²åãç¶ããã«ã€ããŠãææ°ã®ãã¬ã³ãããã¯ãããžãŒãææ°ã®ç¶æ ã«ä¿ã€ããšã¯ãã°ããŒãã«èŠæš¡ã§çã«é©æ°çã§ã€ã³ãã¯ãã®ããWebãšã¯ã¹ããªãšã³ã¹ãäœæããããã«äžå¯æ¬ ã§ããããŒã«ã«ãªãŒãã£ãšã³ã¹åãã«ãã¶ã€ã³ããå Žåã§ããåœéçãªãªãŒãã£ãšã³ã¹åãã«ãã¶ã€ã³ããå Žåã§ããã¢ãã¡ãŒã·ã§ã³ã®ãã¥ã¢ã³ã¹ãçè§£ããããšã¯ã universally better web ã®æ§ç¯ã«è²¢ç®ããŸãã
ãã®ã¬ã€ãã¯ãé«åºŠãªCSSã¢ãã¡ãŒã·ã§ã³ã®äžçãæ¢æ±ããããã®åŒ·åºãªåºç€ãæäŸããŸããããŸããŸãªãã¯ããã¯ã詊ãããªã³ã©ã€ã³ãªãœãŒã¹ãæ¢çŽ¢ããã¹ãã«ãç¶ç¶çã«æŽç·ŽãããŠãWebãããžã§ã¯ããæ¬¡ã®ã¬ãã«ã«åŒãäžããé åçãªã¢ãã¡ãŒã·ã§ã³ãäœæããŠãã ãããéèŠãªã®ã¯ãç·Žç¿ãããããã®ãã¯ããã¯ãç¹å®ã®ãããžã§ã¯ãã®ããŒãºãšãã¶ã€ã³ç®æšã«é©å¿ãããããšã§ããç®èº«ãšåµé æ§ã«ãããCSSã¢ãã¡ãŒã·ã§ã³ã®å¯èœæ§ãæå€§éã«åŒãåºããã°ããŒãã«ãªãŒãã£ãšã³ã¹ã®ããã«çã«èšæ¶ã«æ®ãé åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœæã§ããŸãã