ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ããšã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã®ãã¯ããã¯ãæ¢ããããã€ã¹ããã©ãŠã¶éã§æé©ãªäœéšãæäŸãããŠã§ããµã€ããæ§ç¯ããã°ããŒãã«ãªèŠèŽè ãžã®ã¢ã¯ã»ã·ããªãã£ãšãŠãŒã¶ããªãã£ã確ä¿ããŸãã
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ããšã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ïŒã°ããŒãã«ãªèŠèŽè åãã®ã¢ã¯ã»ã·ãã«ã§å ç¢ãªãŠã§ããµã€ãæ§ç¯
ãŠã§ãéçºã®çµ¶ããé²åããç¶æ³ã«ãããŠã倿§ãªããã€ã¹ããã©ãŠã¶ããããã¯ãŒã¯æ¡ä»¶å šäœã§äžè²«ããè¯å®çãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã確ä¿ããããšã¯æ¥µããŠéèŠã§ãããã®èª²é¡ã«å¯ŸåŠãã2ã€ã®äž»èŠãªæŠç¥ã¯ãããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ããšã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã§ãããã®å æ¬çãªã¬ã€ãã§ã¯ããããã®ãã¯ããã¯ããã®å©ç¹ãããã³ã°ããŒãã«ãªèŠèŽè ã«å¯Ÿå¿ããã¢ã¯ã»ã·ãã«ã§å ç¢ãªãŠã§ããµã€ããäœæããããã®å®è·µçãªå®è£ ã«ã€ããŠæ¢ããŸãã
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã®çè§£
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã¯ããŠã§ããµã€ãã®ã³ã¢ã³ã³ãã³ããšæ©èœæ§ãåªå ãããŠã§ãéçºæŠç¥ã§ããããã¯ããã©ãŠã¶ã®æ©èœãããã€ã¹ã®å¶éã«ãããããããã¹ãŠã®ãŠãŒã¶ãŒãã¢ã¯ã»ã¹ã§ããããŒã¹ã©ã€ã³ãšã¯ã¹ããªãšã³ã¹ãæäŸããããšã«çŠç¹ãåœãŠãŠããŸããããã¯ã匷åãªåºç€ãæ§ç¯ãããã®åŸãããé«åºŠãªãã¯ãããžãŒãæã€ãŠãŒã¶ãŒã®ããã«æ©èœåŒ·åã®ã¬ã€ã€ãŒã远å ãããšèããŠãã ããã
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã®ã³ã¢ååïŒ
- ã³ã³ãã³ãã»ãã¡ãŒã¹ãïŒäžå¯æ¬ ãªã³ã³ãã³ããšæ©èœãæäŸãããé©åã«æ§é åãããHTMLããéå§ããŸããCSSãJavaScriptãªãã§ããŠã§ããµã€ãã䜿çšå¯èœã§ããããšã確èªããŸãã
- ãã¹ãŠã®ããã®åºæ¬çãªæ©èœïŒã³ã¢æ©èœããå€ãããŒãžã§ã³ãå«ããã¹ãŠã®ããã€ã¹ãšãã©ãŠã¶ã§æ©èœããããšãä¿èšŒããŸãã
- ææ°ã®ãã©ãŠã¶ã®ããã®åŒ·åïŒææ°ã®ãã©ãŠã¶ãæã€ãŠãŒã¶ãŒã®ããã«ãããè±ããªãšã¯ã¹ããªãšã³ã¹ãæäŸããé«åºŠãªCSSãšJavaScriptãã¬ã€ã€ãŒåããŸãã
- ã¢ã¯ã»ã·ããªãã£ãåºç€ãšããŠïŒåŸãã远å ããã®ã§ã¯ãªããåææ®µéããã³ã¢æ§é ã«ã¢ã¯ã»ã·ããªãã£ã®èæ ®äºé ãçµã¿èŸŒã¿ãŸãã
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã®å©ç¹ïŒ
- ã¢ã¯ã»ã·ããªãã£ã®åäžïŒããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã§æ§ç¯ããããŠã§ããµã€ãã¯ãã»ãã³ãã£ãã¯HTMLã«äŸåããå¿ èŠã«å¿ããŠä»£æ¿ã³ã³ãã³ããæäŸãããããé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠæ¬è³ªçã«ã¢ã¯ã»ã·ãã«ã§ãã
- ããã©ãŒãã³ã¹ã®åäžïŒåãã©ãŠã¶ã«å¿ èŠãªãªãœãŒã¹ã®ã¿ãããŒãããããšã«ãããããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã¯ãŠã§ããµã€ãã®èªã¿èŸŒã¿é床ãšããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
- èæ§ã®åäžïŒããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã¯ããšã©ãŒãäºæããªããã©ãŠã¶ã®åäœã«å¯ŸããŠãŠã§ããµã€ãããã匟åçã«ããŸããJavaScriptã®èªã¿èŸŒã¿ãŸãã¯å®è¡ã«å€±æããå Žåã§ããã³ã¢ã³ã³ãã³ãã¯ã¢ã¯ã»ã¹å¯èœã§ãã
- å°æ¥æ§ïŒãŠã§ãæšæºã«æºæ ããããšã«ãããããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã¯ãå°æ¥ã®ãã¯ãããžãŒãšãã©ãŠã¶ã®æŽæ°ã«ãŠã§ããµã€ããããé©å¿å¯èœã«ããŸãã
- SEOã®åäžïŒæ€çŽ¢ãšã³ãžã³ã¯ãã¯ãªãŒã³ã§ã»ãã³ãã£ãã¯ãªHTMLã«äŸåããŠãããããããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã§æ§ç¯ããããŠã§ããµã€ããç°¡åã«ã¯ããŒã«ããã³ã€ã³ããã¯ã¹ã§ããŸãã
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã®å®è·µäŸïŒ
- ãã©ãŒã ïŒ
- åºæ¬çãªæ©èœïŒãµãŒããŒãµã€ãæ€èšŒãåããæšæºã®HTMLãã©ãŒã èŠçŽ ã䜿çšããŸããJavaScriptãªãã§ããã©ãŒã ãéä¿¡ããã³åŠçã§ããããšã確èªããŸãã
- æ©èœåŒ·åïŒJavaScriptã§ã¯ã©ã€ã¢ã³ããµã€ãæ€èšŒã远å ãããŠãŒã¶ãŒã«ãªã¢ã«ã¿ã€ã ã®ãã£ãŒãããã¯ãæäŸããŠããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸãã
- äŸïŒJavaScriptãç¡å¹ã«ãªã£ãŠããŠãéä¿¡ã§ãããåãåãããã©ãŒã ããŠãŒã¶ãŒã¯ïŒãªã¢ã«ã¿ã€ã æ€èšŒããªãããïŒå°ãæŽç·ŽãããŠããªããšã¯ã¹ããªãšã³ã¹ãæã€ãããããŸããããã³ã¢æ©èœã¯ãã®ãŸãŸã§ããããã¯ãå€ããã©ãŠã¶ã䜿çšããŠãããŠãŒã¶ãŒãã»ãã¥ãªãã£äžã®çç±ããJavaScriptãç¡å¹ã«ããŠãããŠãŒã¶ãŒããŸãã¯ãããã¯ãŒã¯ã®åé¡ãçµéšããŠãããŠãŒã¶ãŒã«ãšã£ãŠéèŠã§ãã
- ããã²ãŒã·ã§ã³ïŒ
- åºæ¬çãªæ©èœïŒæšæºã®HTMLãªã¹ãïŒ`
- `ããã³`
- `ïŒã䜿çšããŠããã²ãŒã·ã§ã³ã¡ãã¥ãŒãäœæããŸããããŒããŒãããã²ãŒã·ã§ã³ã®ã¿ã䜿çšããŠãŠã§ããµã€ããããã²ãŒãã§ããããšã確èªããŸãã
- æ©èœåŒ·åïŒJavaScriptã远å ããŠãã¢ãã€ã«ããã€ã¹çšã®ãã³ããŒã¬ãŒã¡ãã¥ãŒãªã©ãããŸããŸãªç»é¢ãµã€ãºã«é©å¿ããã¬ã¹ãã³ã·ãããã²ãŒã·ã§ã³ã¡ãã¥ãŒãäœæããŸãã
- äŸïŒCSSã¡ãã£ã¢ã¯ãšãªãšJavaScriptã䜿çšããŠãå°ããç»é¢ã§ã¯ããããããŠã³ãŸãã¯ãªããã£ã³ãã¹ã¡ãã¥ãŒã«å€æããããŠã§ããµã€ããJavaScriptã«é害ãçºçããŠããã³ã¢ããã²ãŒã·ã§ã³ãªã³ã¯ã¯åŒãç¶ãã¢ã¯ã»ã¹å¯èœã§ããäœéãªã€ã³ã¿ãŒãããæ¥ç¶ã®å°åã«ãããŠãŒã¶ãŒããæŽŸæãªJavaScripté§åã®ããããããŠã³ãå®ç§ã«èªã¿èŸŒãŸããªããŠããäž»èŠãªã«ããŽãªã«ã¢ã¯ã»ã¹ã§ããã°ããŒãã«ãªeã³ããŒã¹ãµã€ããæ€èšããŠãã ããã
- ç»åïŒ
- åºæ¬çãªæ©èœïŒ`src`ããã³`alt`屿§ãæã€`
`ã¿ã°ã䜿çšããŠç»åã衚瀺ããŸãã`alt`屿§ã¯ãç»åãèŠãããšãã§ããªããŠãŒã¶ãŒã®ããã«ä»£æ¿ããã¹ããæäŸããŸãã
- æ©èœåŒ·åïŒ`
`èŠçŽ ãŸãã¯`srcset`屿§ã䜿çšããŠãããŸããŸãªç»é¢è§£å床ã§ç°ãªãç»åãµã€ãºãæäŸããããã©ãŒãã³ã¹ãšãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸããããã«æé©åããããã«JavaScriptã§é å»¶èªã¿èŸŒã¿ç»åãæ€èšããŠãã ããã - äŸïŒã¢ãã€ã«ããã€ã¹ã§ã¯å°ããç»åãããã¹ã¯ãããã³ã³ãã¥ãŒã¿ã§ã¯å€§ããé«è§£å床ã®ç»åã衚瀺ããããã«`
`èŠçŽ ã䜿çšããæ è¡ããã°ãããã«ããã垯åå¹ ãç¯çŽãããã¢ãã€ã«ãŠãŒã¶ãŒã®èªã¿èŸŒã¿é床ãåäžããç¹ã«ããŒã¿ãã©ã³ãéãããŠããããŸãã¯é«äŸ¡ãªå°åã®ãŠãŒã¶ãŒã«æçã§ãã
- åºæ¬çãªæ©èœïŒ`src`ããã³`alt`屿§ãæã€`
- ãããªïŒ
- åºæ¬çãªæ©èœïŒ`controls`屿§ãæã€`
- æ©èœåŒ·åïŒJavaScriptã䜿çšããŠã«ã¹ã¿ã ã³ã³ãããŒã«ãåæè¿œè·¡ããã®ä»ã®é«åºŠãªæ©èœã远å ããŸãã
- äŸïŒãããªãã¥ãŒããªã¢ã«ãæäŸããæè²ãã©ãããã©ãŒã ããã©ãŠã¶ã®äºææ§ãJavaScriptã®ãšã©ãŒãåå ã§ãããªãã¬ãŒã€ãŒã®èªã¿èŸŒã¿ã«å€±æããå Žåã§ããåºæ¬çãªã³ã³ãããŒã«ãåãããã¬ãŒã³ãªHTML5ãããªãã¬ãŒã€ãŒã衚瀺ãããŸããããã«ããããªã®ããã¹ããã©ã³ã¹ã¯ãªããããé害ãæã€ãŠãŒã¶ãŒãã³ã³ãã³ããèªãããšã奜ããŠãŒã¶ãŒã®ä»£æ¿ãšããŠæäŸãããŸããããã«ããããã¯ãããžãŒã«é¢ä¿ãªãã誰ããæ å ±ã«ã¢ã¯ã»ã¹ã§ããããã«ãªããŸãã
- åºæ¬çãªæ©èœïŒæšæºã®HTMLãªã¹ãïŒ`
ã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã®çè§£
ã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã¯ããŠãŒã¶ãŒã®ãã©ãŠã¶ãŸãã¯ããã€ã¹ã§ç¹å®ã®æ©èœãŸãã¯ãã¯ãããžãŒããµããŒããããŠããªãå Žåã§ããæ©èœçãªãšã¯ã¹ããªãšã³ã¹ãæäŸããããšã«çŠç¹ãåœãŠããŠã§ãéçºæŠç¥ã§ããããã¯ããã¹ãŠã®ãŠãŒã¶ãŒãææ°ã®ãã¯ãããžãŒã«ã¢ã¯ã»ã¹ã§ããããã§ã¯ãªãããšãèªèããŠããããŠã§ããµã€ããæ©èœã¯éå®çã§ãã£ãŠãããŸãã¯èŠèŠçãªé åã¯å£ããšããŠãã䜿çšå¯èœãªãŸãŸã§ããããšãç®æããŠããŸãã
ã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã®ã³ã¢ååïŒ
- æœåšçãªé害ç¹ãç¹å®ããïŒå€ããã©ãŠã¶ãç¡å¹åãããJavaScriptããŸãã¯äœéãªãããã¯ãŒã¯æ¥ç¶ãªã©ãç¹å®ã®æ©èœãæ©èœããªãå¯èœæ§ã®ããã·ããªãªãäºæž¬ããŸãã
- ãã©ãŒã«ããã¯ãœãªã¥ãŒã·ã§ã³ãæäŸããïŒãã©ã€ããªå®è£ ã倱æããå Žåã«äœ¿çšã§ãã代æ¿ãœãªã¥ãŒã·ã§ã³ãŸãã¯æ©èœã®ç°¡ç¥åãããããŒãžã§ã³ãéçºããŸãã
- 培åºçã«ãã¹ãããïŒæœåšçãªåé¡ãç¹å®ããã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ãæåŸ ã©ããã«æ©èœããŠããããšã確èªããããã«ãå€ãããŒãžã§ã³ãå«ãããŸããŸãªããã€ã¹ãšãã©ãŠã¶ã§ãŠã§ããµã€ãããã¹ãããŸãã
- ãŠãŒã¶ãŒã«éç¥ããïŒå Žåã«ãã£ãŠã¯ãç¹å®ã®æ©èœãå©çšã§ããªãããŸãã¯æåŸ ã©ããã«æ©èœããªãå¯èœæ§ãããããšããŠãŒã¶ãŒã«éç¥ããå¿ èŠããããŸãã
ã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã®å©ç¹ïŒ
- ããåºç¯ãªèŠèŽè ãžã®ãªãŒãïŒã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã¯ãå€ãããã€ã¹ãäœéãªã€ã³ã¿ãŒãããæ¥ç¶ããŸãã¯é害ãæã€ãŠãŒã¶ãŒãå«ããããåºç¯ãªèŠèŽè ã«ãŠã§ããµã€ããã¢ã¯ã»ã¹å¯èœã§ããããšãä¿èšŒããŸãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒç¹å®ã®æ©èœãå©çšã§ããªãå Žåã§ããã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã¯ããŠãŒã¶ãŒãå£ããã䜿çšäžå¯èœãªããŒãžã«ééãããããã®ãé²ãã䜿çšå¯èœã§æ å ±æäŸçãªãšã¯ã¹ããªãšã³ã¹ãæäŸããŸãã
- ãµããŒãã³ã¹ãã®åæžïŒãã©ãŒã«ããã¯ãœãªã¥ãŒã·ã§ã³ãæäŸããããšã«ãããã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã¯ãäºææ§ã®åé¡ã«ééããŠãããŠãŒã¶ãŒããã®ãµããŒããªã¯ãšã¹ãã®æ°ãæžããããšãã§ããŸãã
- ãã©ã³ãè©äŸ¡ã®åäžïŒã°ã¬ãŒã¹ãã«ã«ãã°ã¬ãŒããããŠã§ããµã€ãã¯ãã¢ã¯ã»ã·ããªãã£ãšã€ã³ã¯ã«ãŒãžã§ã³ãžã®ã³ãããã¡ã³ãã瀺ãããã©ã³ãè©äŸ¡ãšé¡§å®¢ãã€ã€ã«ãã£ãåäžãããŸãã
ã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã®å®è·µäŸïŒ
- CSS3æ©èœïŒ
- åé¡ïŒå€ããã©ãŠã¶ã¯ãã°ã©ããŒã·ã§ã³ãã·ã£ããŠããã©ã³ãžã·ã§ã³ãªã©ã®é«åºŠãªCSS3æ©èœããµããŒãããŠããªãå ŽåããããŸãã
- 解決çïŒåºæ¬çãªCSSããããã£ã䜿çšãã代æ¿ã¹ã¿ã€ãªã³ã°ãæäŸããŸããããšãã°ãã°ã©ããŒã·ã§ã³ã®ä»£ããã«ãœãªããã®èæ¯è²ã䜿çšããããã·ã£ããŠã®ä»£ããã«ã·ã³ãã«ãªå¢çç·ã䜿çšãããããŸãã
- äŸïŒãã¿ã³ã®èæ¯ã«CSSã°ã©ããŒã·ã§ã³ã䜿çšãããŠã§ããµã€ããã°ã©ããŒã·ã§ã³ããµããŒãããªãå€ããã©ãŠã¶ã§ã¯ã代ããã«ãœãªããã«ã©ãŒã䜿çšãããŸãããã¿ã³ã¯ãã°ã©ããŒã·ã§ã³å¹æããªããŠããæ©èœçã§èŠèŠçã«èš±å®¹ç¯å²å ã§ããããã¯ãå€ããã©ãŠã¶ãäŸç¶ãšããŠæ®åããŠããå°åã§ã¯ç¹ã«éèŠã§ãã
- JavaScriptã¢ãã¡ãŒã·ã§ã³ïŒ
- åé¡ïŒJavaScriptã¢ãã¡ãŒã·ã§ã³ã¯ãå€ããã©ãŠã¶ãŸãã¯åŠçèœåãéãããŠããããã€ã¹ã§ã¯æ©èœããªãå ŽåããããŸãã
- 解決çïŒãã©ãŒã«ããã¯ãšããŠCSSãã©ã³ãžã·ã§ã³ãŸãã¯åºæ¬çãªJavaScriptã¢ãã¡ãŒã·ã§ã³ã䜿çšããŸããã¢ãã¡ãŒã·ã§ã³ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«äžå¯æ¬ ãªå Žåã¯ãã¢ãã¡ãŒã·ã§ã³ã³ã³ãã³ãã®éç衚çŸãæäŸããŸãã
- äŸïŒè€éãªãã©ã©ãã¯ã¹ã¹ã¯ããŒã«å¹æãäœæããããã«JavaScriptã䜿çšãããŠã§ããµã€ããJavaScriptãç¡å¹ã«ãªã£ãŠãããããã©ãŠã¶ããµããŒãããŠããªãå Žåããã©ã©ãã¯ã¹å¹æã¯ç¡å¹ã«ãªããã³ã³ãã³ãã¯æšæºã®éã¢ãã¡ãŒã·ã§ã³ã¬ã€ã¢ãŠãã§è¡šç€ºãããŸããèŠèŠçãªè£ 食ããªããŠããæ å ±ã¯äŸç¶ãšããŠã¢ã¯ã»ã¹å¯èœã§ãã
- Webãã©ã³ãïŒ
- åé¡ïŒWebãã©ã³ãã¯ãç¹ã«ã€ã³ã¿ãŒãããæ¥ç¶ãé ãããã€ã¹ããã©ãŠã¶ã§ã¯ããã¹ãŠã§æ£åžžã«èªã¿èŸŒãŸããªãå ŽåããããŸãã
- 解決çïŒåºãå©çšå¯èœãªã·ã¹ãã ãã©ã³ããå«ããã©ãŒã«ããã¯ãã©ã³ãã¹ã¿ãã¯ãæå®ããŸããããã«ãããWebãã©ã³ãã®èªã¿èŸŒã¿ã«å€±æããå Žåã§ããããã¹ãã¯èªã¿ããããŸãŸã«ãªããŸãã
- äŸïŒãã©ãŒã«ããã¯ãã©ã³ãã¹ã¿ãã¯ã䜿çšãã`font-family`宣èšã®äœ¿çšïŒ`font-family: 'Open Sans', sans-serif;`ã'Open Sans'ã®èªã¿èŸŒã¿ã«å€±æããå Žåããã©ãŠã¶ã¯ä»£ããã«æšæºã®ãµã³ã»ãªããã©ã³ãã䜿çšããŸããããã¯ãä¿¡é Œæ§ã®äœãã€ã³ã¿ãŒãããã¢ã¯ã»ã¹ã®ããå°åã®ãŠãŒã¶ãŒãããã©ã³ãã®èªã¿èŸŒã¿ã®åé¡ã«é¢ä¿ãªããèªã¿ãããã確ä¿ããããã«äžå¯æ¬ ã§ãã
- HTML5ã»ãã³ãã£ãã¯èŠçŽ ïŒ
- åé¡ïŒå€ããã©ãŠã¶ã¯ã`
`, ` - 解決çïŒCSSãªã»ãããŸãã¯æ£èŠåã¹ã¿ã€ã«ã·ãŒãã䜿çšããŠããã©ãŠã¶å šäœã§äžè²«ããã¹ã¿ã€ãªã³ã°ãäœæããŸããããã«ãJavaScriptã䜿çšããŠãå€ããã©ãŠã¶ã§ãããã®èŠçŽ ã«é©åãªã¹ã¿ã€ãªã³ã°ãé©çšããŸãã
- äŸïŒããã°æçš¿ãæ§é åããããã«`
`ã䜿çšãããŠã§ããµã€ããInternet Explorerã®å€ãããŒãžã§ã³ã§ã¯ã` `èŠçŽ ã¯CSSãšJavaScriptã·ãã䜿çšããŠãããã¯ã¬ãã«èŠçŽ ãšããŠã¹ã¿ã€ã«èšå®ãããŸããããã«ããããã©ãŠã¶ã` `èŠçŽ ããã€ãã£ãã«ãµããŒãããŠããªããŠããã³ã³ãã³ããæ£ãã衚瀺ãããŸãã
- åé¡ïŒå€ããã©ãŠã¶ã¯ã`
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ã vs. ã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ïŒã©ã¡ãã®ã¢ãããŒããæé©ãïŒ
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ããšã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã¯ãã©ã¡ããã¢ã¯ã»ã·ãã«ã§å ç¢ãªãŠã§ããµã€ãã®æ§ç¯ãç®æããŠããŸãããã¢ãããŒããç°ãªããŸããããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã¯ãåºæ¬çãªã¬ãã«ã®æ©èœããå§ãŸããææ°ã®ãã©ãŠã¶ã®ããã«åŒ·åã远å ããŸãããã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã¯ããã«æ©èœã®ãšã¯ã¹ããªãšã³ã¹ããå§ãŸããå€ããã©ãŠã¶ã®ããã«ãã©ãŒã«ããã¯ãœãªã¥ãŒã·ã§ã³ãæäŸããŸãã
äžè¬çã«ãããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ãã¯ãããã¢ãã³ã§æç¶å¯èœãªã¢ãããŒããšèŠãªãããŠããŸããããã¯ãŠã§ãæšæºã®ååã«æ²¿ã£ãŠãããã¢ã¯ã»ã·ããªãã£ãšããã©ãŒãã³ã¹ãä¿é²ããŸãããããããŠã§ããµã€ãããã§ã«è€éãªã³ãŒãããŒã¹ãæã£ãŠããå Žåããå€ããã©ãŠã¶ã®ãµããŒããéèŠãªèŠä»¶ã§ããå Žåã«ã¯ãã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã圹ç«ã€ããšããããŸãã
å®éã«ã¯ãæè¯ã®ã¢ãããŒãã¯ãäž¡æ¹ã®ãã¯ããã¯ã®çµã¿åããã§ããããšããããããŸããã¢ã¯ã»ã·ãã«ãªHTMLã®ãã£ããããåºç€ããå§ãããã©ãŒã«ããã¯ãœãªã¥ãŒã·ã§ã³ãæäŸããªãã匷åã远å ããããšã«ãããéçºè ã¯ãã¹ãŠã®ãŠãŒã¶ãŒã«æé©ãªãšã¯ã¹ããªãšã³ã¹ãæäŸãããŠã§ããµã€ããäœæã§ããŸãã
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ããšã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã®å®è£ ïŒãã¹ããã©ã¯ãã£ã¹
ããªãã®ãŠã§ãéçºãããžã§ã¯ãã§ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ããšã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ãå®è£ ããããã®ãã¹ããã©ã¯ãã£ã¹ãããã€ã玹ä»ããŸãã
- æ©æèšç»ïŒãããžã§ã¯ãã®éå§æ®µéããã¢ã¯ã»ã·ããªãã£ãšãã©ãŠã¶ã®äºææ§ãèæ ®ããŠãã ãããæœåšçãªé害ç¹ãç¹å®ããæ©æã«ãã©ãŒã«ããã¯ãœãªã¥ãŒã·ã§ã³ãéçºããŸãã
- æ©èœæ€åºã®äœ¿çšïŒJavaScriptã䜿çšããŠã匷åãé©çšããåã«ãã©ãŠã¶ã®æ©èœãšèœåãæ€åºããŸããããã«ãããåãŠãŒã¶ãŒã®ç¹å®ã®ãã©ãŠã¶ã«åãããŠãšã¯ã¹ããªãšã³ã¹ã調æŽã§ããŸãã
- ã»ãã³ãã£ãã¯HTMLã®äœæïŒã»ãã³ãã£ãã¯HTMLèŠçŽ ã䜿çšããŠãã³ã³ãã³ããæå³ã®ããæ¹æ³ã§æ§é åããŸããããã«ãããé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠãŠã§ããµã€ããããã¢ã¯ã»ã·ãã«ã«ãªããæ€çŽ¢ãšã³ãžã³ãã¯ããŒã«ãããããªããŸãã
- CSSã¡ãã£ã¢ã¯ãšãªã®äœ¿çšïŒCSSã¡ãã£ã¢ã¯ãšãªã䜿çšããŠããŠã§ããµã€ãã®ã¬ã€ã¢ãŠããšã¹ã¿ã€ãªã³ã°ãããŸããŸãªç»é¢ãµã€ãºãããã€ã¹ã«é©åãããŸãã
- 培åºçãªãã¹ãïŒãã¹ãŠã®ãŠãŒã¶ãŒã«ãã°ã¬ãŒã¹ãã«ã«ãã°ã¬ãŒããã䜿çšå¯èœãªãšã¯ã¹ããªãšã³ã¹ãæäŸããããšãä¿èšŒããããã«ãå€ãããŒãžã§ã³ãå«ãããŸããŸãªããã€ã¹ãšãã©ãŠã¶ã§ãŠã§ããµã€ãããã¹ãããŸãããã®ããã»ã¹ãèªååããããã«ãBrowserStackãSauce Labsãªã©ã®ãã©ãŠã¶ãã¹ãããŒã«ãæ€èšããŠãã ããã
- ããã©ãŒãã³ã¹ãåªå ïŒHTTPãªã¯ãšã¹ããæå°éã«æããç»åãå§çž®ãããã£ãã·ã¥ã䜿çšããããšã«ããããŠã§ããµã€ããããã©ãŒãã³ã¹ã®ããã«æé©åããŸãã
- ããªãã£ã«ïŒPolyfillsïŒã®äœ¿çšïŒããªãã£ã«ããŸãã¯ã·ã ïŒshimsïŒãšããŠãç¥ãããã³ãŒãã¹ããããïŒéåžžã¯JavaScriptïŒãå©çšããŠãå€ããã©ãŠã¶ãäžè¶³ããŠããæ©èœãæäŸããäºææ§ãå£ãããšãªãææ°ã®æ©èœã䜿çšã§ããããã«ããŸãã
- ã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ã®éµå®ïŒWeb Content Accessibility GuidelinesïŒWCAGïŒãéµå®ããŠããŠã§ããµã€ããé害ãæã€äººã ã«ãã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŸããããã«ã¯ãç»åã®ä»£æ¿ããã¹ãã®æäŸãé©åãªè²ã®ã³ã³ãã©ã¹ãã®äœ¿çšãããŒããŒãããã²ãŒã·ã§ã³ãæ©èœããããšã®ç¢ºèªãå«ãŸããŸãã
- ç£èŠãšå埩ïŒãŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãšã¢ã¯ã»ã·ããªãã£ãç¶ç¶çã«ç£èŠããå¿ èŠã«å¿ããŠèª¿æŽãè¡ããŸãããŠãŒã¶ãŒãã£ãŒãããã¯ã¯ãæ¹åãå¿ èŠãªé åãç¹å®ããã®ã«éåžžã«åœ¹ç«ã¡ãŸãã
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ããšã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã®ããã®ããŒã«ãšãã¯ãããžãŒ
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ããšã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã®å®è£ ãæ¯æŽã§ããããŒã«ãšãã¯ãããžãŒãããã€ããããŸãã
- ModernizrïŒãŠãŒã¶ãŒã®ãã©ãŠã¶ã«ãããHTML5ãšCSS3æ©èœã®å¯çšæ§ãæ€åºããJavaScriptã©ã€ãã©ãªãããã«ããããã©ãŠã¶ã®ãµããŒãã«åºã¥ããŠæ¡ä»¶ä»ãã§åŒ·åãé©çšã§ããŸãã
- ããªãã£ã«ïŒPolyfillsïŒïŒes5-shimães6-shimãªã©ã®ã©ã€ãã©ãªã¯ãå€ããã©ãŠã¶åãã®ããªãã£ã«ãæäŸããããããæ°ããJavaScriptæ©èœããµããŒãã§ããããã«ããŸãã
- CSSãªã»ãã/æ£èŠåïŒReset.cssãŸãã¯Normalize.cssãªã©ã®ã¹ã¿ã€ã«ã·ãŒãã¯ãããŸããŸãªãã©ãŠã¶éã§ã¹ã¿ã€ãªã³ã°ã®äžè²«ããããŒã¹ã©ã€ã³ãäœæããã®ã«åœ¹ç«ã¡ãŸãã
- ãã©ãŠã¶ãã¹ãããŒã«ïŒBrowserStackãSauce LabsãLambdaTestã䜿çšãããšãå¹ åºããã©ãŠã¶ãšããã€ã¹ã§ãŠã§ããµã€ãããã¹ãã§ããŸãã
- ã¢ã¯ã»ã·ããªãã£ãã§ãã«ãŒïŒWAVEãAxeãLighthouseã¯ããŠã§ããµã€ãã®ã¢ã¯ã»ã·ããªãã£ã®åé¡ãç¹å®ããã®ã«åœ¹ç«ã€ããŒã«ã§ãã
çµè«
ããã°ã¬ãã·ãã»ãšã³ãã³ã¹ã¡ã³ããšã°ã¬ãŒã¹ãã«ã»ãã°ã©ããŒã·ã§ã³ã¯ãã°ããŒãã«ãªèŠèŽè åãã«ã¢ã¯ã»ã·ãã«ã§ãå ç¢ã§ããŠãŒã¶ãŒãã¬ã³ããªãŒãªãŠã§ããµã€ããæ§ç¯ããããã®äžå¯æ¬ ãªæŠç¥ã§ããã³ã¢ã³ã³ãã³ããšæ©èœæ§ãåªå ãããã©ãŒã«ããã¯ãœãªã¥ãŒã·ã§ã³ãæäŸãã培åºçã«ãã¹ãããããšã«ãããéçºè ã¯ã倿§ãªããã€ã¹ããã©ãŠã¶ããããã¯ãŒã¯æ¡ä»¶å šäœã§æé©ãªãšã¯ã¹ããªãšã³ã¹ãæäŸãããŠã§ããµã€ããäœæã§ããŸãããããã®ãã¯ããã¯ãæ¡çšããããšã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããã ãã§ãªããã¢ã¯ã»ã·ããªãã£ãããã©ãŒãã³ã¹ãããã³é·æçãªä¿å®æ§ãåäžãããŸãã
ãããã®ååãçè§£ããå®è£ ããããšã«ããããã¯ãããžãŒãèœåã«é¢ä¿ãªãã誰ãããŠã§ããµã€ãã«ã¢ã¯ã»ã¹ã§ããããã«ããã°ããŒãã«åžå Žã§ã®ã€ã³ã¯ã«ãŒãžã§ã³ãšãªãŒããæ¡å€§ããããšãã§ããŸãããããã®ååã«åºã¥ããé©åã«æ§ç¯ããããŠã§ããµã€ãã¯ãåãªãçŸåŠã§ã¯ãªãããã¹ãŠï¿œï¿œãŠãŒã¶ãŒã«ãšã£ãŠäŸ¡å€ãããã䜿çšå¯èœãªãšã¯ã¹ããªãšã³ã¹ãæäŸããããšã§ãããã¡ãã»ãŒãžãå¯èœãªéãå¹ åºãèŠèŽè ã«å±ãããšãä¿èšŒããããšãå¿ããªãã§ãã ããã