1. ã¯ããã«: HTMLç°å¢æ§ç¯ã®éèŠæ§
Webæè¡ã®é²åãšå ±ã«ãç§ãã¡ã®æ¥åžžç掻ã«ãããã€ã³ã¿ãŒãããã®åœ¹å²ã¯å¢å€§ããŠããŸãããã®ããžã¿ã«ãªäžçã§æ å ±ãäŒããããã®åºç€ãšããŠãHTMLã¯äžå¿çãªåœ¹å²ãæãããŠããŸããããããHTMLãå¹æçã«äœ¿çšããããã«ã¯ãé©åãªç°å¢æ§ç¯ãäžå¯æ¬ ã§ãã
1.1 Webéçºã®åºç€ãšããŠã®HTML
HTMLã¯ãHyperText Markup Languageã®ç¥ã§ãWebããŒãžã®æ§é ãå®çŸ©ããããã®ããŒã¯ã¢ããèšèªã§ããããã¯ãWebããŒãžã®èŠãç®ãåäœãå¶åŸ¡ããããã®CSSãJavaScriptãšã¯ç°ãªããããŒãžã®åºæ¬çãªéªšçµã¿ãäœæãã圹å²ãæã£ãŠããŸããäŸãã°ãæç« ã®èŠåºãã段èœããªã³ã¯ãç»åãªã©ã®èŠçŽ ãé 眮ããéã«äœ¿çšãããŸãã
WebããŒãžã¯ãæ å ±ãäŒããããã®ã¡ãã£ã¢ãšããŠã®åœ¹å²ãæãããŠããŸãããã®ãããæ å ±ãå¹æçã«äŒããããã®æ§é ããã¶ã€ã³ãæ±ããããŸããHTMLã¯ããã®æ å ±ã®æ§é ã圢æããããã®åºç€ãšãªãæè¡ã§ãã
1.2 ç°å¢æ§ç¯ã®åœ¹å²ãšæ矩
HTMLãæžãå§ããåã«ãç°å¢æ§ç¯ã¯éåžžã«éèŠãªã¹ããããšãªããŸããé©åãªç°å¢ãæŽããããšã§ãHTMLã®ã³ãŒããå¹ççã«æžãããªã¢ã«ã¿ã€ã ã§ãã®çµæã確èªããããšãã§ããŸããããã«ãããã³ãŒãã£ã³ã°ã®éçšã§ã®ãã¹ãæ©æã«çºèŠããä¿®æ£ããããšã容æãšãªããŸãã
ãŸããç°å¢æ§ç¯ãè¡ãããšã§ãHTMLã ãã§ãªããCSSãJavaScriptãšãã£ãä»ã®æè¡ãšã®é£æºãã¹ã ãŒãºã«è¡ãããšãã§ããŸããããã«ãããããè€éã§é«æ©èœãªWebããŒãžã®éçºãå¯èœãšãªããŸãã
ç°å¢æ§ç¯ã¯ãWebéçºã®ç¬¬äžæ©ãšãèšããäœæ¥ã§ãããã®ã¹ãããããã£ãããšèžãããšã§ããã®åŸã®éçºäœæ¥ãå¹ççã«é²è¡ããé«å質ãªWebããŒãžãäœæããããã®åå°ãç¯ãããŸãã
2. HTMLç°å¢æ§ç¯ã®åºæ¬ã³ã³ã»ãã
WebããŒãžãäœæããéã®ç¬¬äžæ©ãšããŠãHTMLã®åºæ¬çãªç¥èãšç°å¢æ§ç¯ã®éèŠæ§ãç解ããããšãäžå¯æ¬ ã§ãããã®ã»ã¯ã·ã§ã³ã§ã¯ãHTMLã®åºæ¬çãªå®çŸ©ããã®æŽå²ãšé²åããããŠç°å¢æ§ç¯ã®å¿ èŠæ§ã«ã€ããŠè©³ãã解説ããŸãã
2.1 HTMLãšã¯äœã: åºæ¬çãªå®çŸ©
HTMLã¯ãHyperText Markup Languageã®ç¥ã§ãWebããŒãžã®æ§é ãå 容ãå®çŸ©ããããã®ããŒã¯ã¢ããèšèªã§ããWebããŒãžã«è¡šç€ºãããããã¹ããç»åããªã³ã¯ãªã©ã®èŠçŽ ãé 眮ãããã®æ§é ãé¢ä¿ãå®çŸ©ããããã®ã¿ã°ã䜿çšããŸããããã«ããããã©ãŠã¶ã¯ãŠãŒã¶ãŒã«æ å ±ãé©åãªåœ¢ã§è¡šç€ºããããšãã§ããŸãã
2.2 HTMLã®æŽå²ãšé²å
HTMLã¯ã1990幎代åé ã«ãæ å ±ã®å ±æãç®çãšããŠéçºãããŸãããåœåã¯ãç 究è ãåŠè ãææžãå ±æããããã®ã·ã³ãã«ãªèšèªãšããŠäœ¿çšãããŠããŸãããããããæ代ãšå ±ã«ãWebã®åœ¹å²ãæ¡å€§ããHTMLããã®æ©èœãè¡šçŸåãå¢ããŠããŸããã
åæã®HTMLã¯ãåºæ¬çãªããã¹ãã®è¡šç€ºããªã³ã¯ã®äœæãäž»ãªæ©èœã§ãããããããHTML5ã®ç»å Žã«ãããåç»ãé³å£°ã®åã蟌ã¿ãã¢ãã¡ãŒã·ã§ã³ããã©ãŒã ãªã©ã®é«åºŠãªæ©èœãè¿œå ãããçŸä»£ã®å€æ©èœãªWebããŒãžã®äœæãå¯èœãšãªããŸããã
2.3 ç°å¢æ§ç¯ã®å¿ èŠæ§
HTMLãå¹æçã«äœ¿çšããããã«ã¯ãé©åãªç°å¢æ§ç¯ãäžå¯æ¬ ã§ããç°å¢æ§ç¯ãšã¯ãHTMLã®ã³ãŒããæžãããã®çµæã確èªããããã®ããŒã«ããœãããŠã§ã¢ãã»ããã¢ããããããšãæããŸãã
é©åãªç°å¢ãæŽããããšã§ãã³ãŒãã®ãšã©ãŒãæ©æã«çºèŠããä¿®æ£ããããšã容æãšãªããŸãããŸãããªã¢ã«ã¿ã€ã ã§ã®ãã¬ãã¥ãŒæ©èœãæã€ããŒã«ã䜿çšããããšã§ãã³ãŒãã£ã³ã°ã®å¹çãå€§å¹ ã«åäžããŸããç°å¢æ§ç¯ã¯ãå¹æçãªWebéçºã®ããã®åºç€ãšãªãäœæ¥ã§ããããã®ã¹ãããããã£ãããšèžãããšã§ãé«å質ãªWebããŒãžã®äœæãå¯èœãšãªããŸãã
3. HTMLç°å¢æ§ç¯ã®ã¹ããããã€ã¹ãããæé
HTMLã®åºæ¬çãªç¥èã身ã«ã€ããåŸã次ã®ã¹ãããã¯å®éã®ç°å¢æ§ç¯ã§ãããã®ã»ã¯ã·ã§ã³ã§ã¯ãHTMLã®ç°å¢æ§ç¯ã«å¿ èŠãªæé ãã¹ããããã€ã¹ãããã§è©³ãã解説ããŸãã
3.1 å¿ èŠãªããŒã«ãšãœãããŠã§ã¢ã®éžå®
HTMLã®ç°å¢æ§ç¯ãå§ããåã«ãå¿ èŠãªããŒã«ãšãœãããŠã§ã¢ãéžå®ããããšãéèŠã§ãããŸããããã¹ããšãã£ã¿ãéžã³ãŸããããã¯ãHTMLã®ã³ãŒããæžãããã®ãœãããŠã§ã¢ã§ãå€ãã®ç¡æã®ãªãã·ã§ã³ãå©çšå¯èœã§ãã次ã«ãWebããŒãžã衚瀺ããããã®ãã©ãŠã¶ãéžæããŸããæãäžè¬çãªãã©ãŠã¶ã«ã¯ãGoogle ChromeãFirefoxãSafariãªã©ããããŸãã
3.2 ããã¹ããšãã£ã¿ã®ã»ããã¢ãã
ããã¹ããšãã£ã¿ã¯ãHTMLã®ã³ãŒããæžãããã®åºæ¬çãªããŒã«ã§ããäžè¬çãªããã¹ããšãã£ã¿ã«ã¯ãVSCodeãSublime TextãAtomãªã©ããããŸãããããã®ãšãã£ã¿ã¯ãã·ã³ã¿ãã¯ã¹ãã€ã©ã€ããèªåè£å®ãªã©ã®æ©èœãæã£ãŠãããã³ãŒãã£ã³ã°ã®å¹çãå€§å¹ ã«åäžãããããšãã§ããŸãã
ããã¹ããšãã£ã¿ãéžæããããå ¬åŒãµã€ãããããŠã³ããŒãããã€ã³ã¹ããŒã«ããŸããã€ã³ã¹ããŒã«ãå®äºãããããšãã£ã¿ãéããåºæ¬çãªèšå®ãè¡ããŸãã
3.3 ãã©ãŠã¶ã®éžæãšèšå®
ãã©ãŠã¶ã¯ãHTMLã®ã³ãŒãã解éãããŠãŒã¶ãŒã«æ å ±ã衚瀺ããããã®ããŒã«ã§ããæãäžè¬çãªãã©ãŠã¶ã«ã¯ãGoogle ChromeãFirefoxãSafariãªã©ããããŸãããããã®ãã©ãŠã¶ã¯ãHTMLã®æšæºã«åºã¥ããŠã³ãŒãã解éããããŒãžã衚瀺ããŸãã
ãã©ãŠã¶ãéžæããããå ¬åŒãµã€ãããããŠã³ããŒãããã€ã³ã¹ããŒã«ããŸããã€ã³ã¹ããŒã«ãå®äºãããããã©ãŠã¶ãéããåºæ¬çãªèšå®ãè¡ããŸãã
3.4 åããŠã®HTMLãã¡ã€ã«ã®äœæ
ç°å¢æ§ç¯ã®æåŸã®ã¹ããããšããŠãåããŠã®HTMLãã¡ã€ã«ãäœæããŸããããã¹ããšãã£ã¿ãéããæ°ãããã¡ã€ã«ãäœæããŸãããã®ãã¡ã€ã«ã«ã¯ãåºæ¬çãªHTMLã®ã¿ã°ãèšè¿°ããŸããäŸãã°ã<html>ã<head>ã<body>ãªã©ã®ã¿ã°ã䜿çšããŠãããŒãžã®åºæ¬çãªæ§é ãå®çŸ©ããŸãã
HTMLãã¡ã€ã«ãä¿åãããããã©ãŠã¶ã䜿çšããŠãã®ãã¡ã€ã«ãéããŸããããã«ãããHTMLã®ã³ãŒããæ£ãã解éãããããŒãžã衚瀺ãããããšã確èªããããšãã§ããŸãã
4. å®è·µçãã¯ããã¯ãšãã³ã
HTMLã®ç°å¢æ§ç¯ãå®äºããåŸã次ã®ã¹ãããã¯å®éã®ã³ãŒãã£ã³ã°ã§ããããããå¹æçãªWebéçºãè¡ãããã«ã¯ãããã€ãã®å®è·µçãªãã¯ããã¯ãšãã³ããç¥ã£ãŠããããšã圹ç«ã¡ãŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãã³ãŒãã®æŽçã管çããšã©ãŒã®ãã©ãã«ã·ã¥ãŒãã£ã³ã°ããããŠå¹ççãªç°å¢æ§ç¯ã®ããã®ããŒã«ã«ã€ããŠè©³ãã解説ããŸãã
4.1 ã³ãŒãã®æŽçãšç®¡ç
倧èŠæš¡ãªWebããŒãžãè€æ°ã®ããŒãžãããªãWebãµã€ããéçºããéãã³ãŒãã®æŽçãšç®¡çã¯éåžžã«éèŠã§ãããŸãããã£ã¬ã¯ããªæ§é ããã£ãããšæŽçããããšã§ããã¡ã€ã«ã®ç®¡çã容æã«ãªããŸãããŸããã³ã¡ã³ããå€çšããããšã§ãã³ãŒãã®æå³ãç®çãæ確ã«ããããšãã§ããŸãã
ããã«ãããŒãžã§ã³ç®¡çããŒã«ã䜿çšããããšã§ãã³ãŒãã®å€æŽå±¥æŽã远跡ããå¿ èŠã«å¿ããŠä»¥åã®ããŒãžã§ã³ã«æ»ãããšãã§ããŸããããã«ããããšã©ãŒã®åå ãç¹å®ãããããªããŸãã
4.2 ãšã©ãŒã®ãã©ãã«ã·ã¥ãŒãã£ã³ã°
HTMLã®ã³ãŒãã£ã³ã°äžã«ã¯ãããŸããŸãªãšã©ãŒãçºçããå¯èœæ§ããããŸãããããã®ãšã©ãŒãå¹æçã«ãã©ãã«ã·ã¥ãŒãã£ã³ã°ããããã«ã¯ããšã©ãŒã¡ãã»ãŒãžããã£ãããšèªã¿åãããšãéèŠã§ãããšã©ãŒã¡ãã»ãŒãžã«ã¯ãåé¡ã®åå ã解決ã®ãã³ããèšèŒãããŠããããšãå€ãããããããåèã«ããŠãšã©ãŒã®åå ãç¹å®ããä¿®æ£ããŸãã
ãŸãããã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããããšã§ããšã©ãŒã®çºçç®æã詳现ãªæ å ±ã確èªããããšãã§ããŸããããã«ããããšã©ãŒã®è§£æ±ºã容æãšãªããŸãã
4.3 å¹ççãªç°å¢æ§ç¯ã®ããã®ããŒã«
HTMLã®ç°å¢æ§ç¯ãå¹ççã«è¡ãããã«ã¯ãããã€ãã®ããŒã«ã䜿çšããããšã圹ç«ã¡ãŸããäŸãã°ãã©ã€ããªããŒãæ©èœãæã€ããŒã«ã䜿çšããããšã§ãã³ãŒãã®å€æŽããªã¢ã«ã¿ã€ã ã§ãã©ãŠã¶ã«åæ ãããããšãã§ããŸããããã«ãããã³ãŒãã£ã³ã°ã®å¹çãå€§å¹ ã«åäžããŸãã
ãŸããã³ãŒãã®æŽåœ¢ããšã©ãŒãã§ãã¯ãèªåã§è¡ãããŒã«ã䜿çšããããšã§ãã³ãŒãã®å質ãåäžãããããšãã§ããŸããããã«ããããšã©ãŒã®çºçãäºé²ããé«å質ãªWebããŒãžã®äœæãå¯èœãšãªããŸãã
5. ä»ã®æè¡ãšã®é£æº: CSSãšJavaScript
HTMLã ãã§ãªããWebããŒãžã®ãã¶ã€ã³ãåçãªæ©èœãå®çŸããããã«ã¯ãCSSãJavaScriptãšãã£ãä»ã®æè¡ãšã®é£æºãäžå¯æ¬ ã§ãããã®ã»ã¯ã·ã§ã³ã§ã¯ãCSSãšJavaScriptã®åºæ¬çãªç¥èãšããããã®æè¡ãHTMLãšçµã¿åãããéã®ãã€ã³ãã«ã€ããŠè©³ãã解説ããŸãã
5.1 CSSãšã¯: ã¹ã¿ã€ã«ã®åºç€
CSSã¯ãCascading Style Sheetsã®ç¥ã§ãWebããŒãžã®ãã¶ã€ã³ãã¬ã€ã¢ãŠããå¶åŸ¡ããããã®èšèªã§ããHTMLãããŒãžã®æ§é ãå 容ãå®çŸ©ããã®ã«å¯ŸããCSSã¯ãã®èŠãç®ãã¹ã¿ã€ã«ãå®çŸ©ããŸããäŸãã°ãæåã®è²ããµã€ãºãèæ¯ã®ãã¶ã€ã³ãã¬ã€ã¢ãŠãã®é 眮ãªã©ãããŒãžã®èŠèŠçãªåŽé¢ãå¶åŸ¡ããããã«äœ¿çšãããŸãã
5.2 JavaScriptãšã®é£æºã®éèŠæ§
JavaScriptã¯ãWebããŒãžã«åçãªæ©èœãè¿œå ããããã®ããã°ã©ãã³ã°èšèªã§ããäŸãã°ããã¿ã³ãã¯ãªãã¯ãããšãã®ã¢ã¯ã·ã§ã³ããã¢ãã¡ãŒã·ã§ã³ããã©ãŒã ã®ããªããŒã·ã§ã³ãªã©ããŠãŒã¶ãŒãšã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãå®çŸããããã«äœ¿çšãããŸãã
HTMLãšJavaScriptãé£æºãããããšã§ãéçãªããŒãžãåçã§ã€ã³ã¿ã©ã¯ãã£ããªããŒãžã«å€ããããšãã§ããŸãããã®é£æºã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžããããé«åºŠãªæ©èœã®å®çŸã«å¯äžããŸãã
5.3 ãããã®æè¡ãçµã¿èŸŒãéã®ãã€ã³ã
HTMLãCSSãJavaScriptãçµã¿åãããéã®æãéèŠãªãã€ã³ãã¯ãããããã®åœ¹å²ãæ確ã«ããããšã§ããHTMLã¯ããŒãžã®æ§é ããCSSã¯ã¹ã¿ã€ã«ããJavaScriptã¯åçãªæ©èœãæ åœããŸãããããã®æè¡ãé©åã«çµã¿åãããããšã§ãå¹æçã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªWebããŒãžãäœæããããšãã§ããŸãã
ãŸãããããã®æè¡ãçµã¿èŸŒãéã«ã¯ãã³ãŒãã®å¯èªæ§ãã¡ã³ããã³ã¹ã®ãããããèæ ®ããããšãéèŠã§ããé©åãªã³ã¡ã³ããã€ã³ãã³ããå€æ°åã®åœåãªã©ãã³ãŒãã®å質ãä¿ã€ããã®åºæ¬çãªãã¯ããã¯ãå®è·µããããšã§ãåŸããã®ä¿®æ£ãæ¡åŒµã容æãšãªããŸãã
6. ãŸãšã: HTMLç°å¢æ§ç¯ã®æåãžã®é
ãã®èšäºãéããŠãHTMLã®ç°å¢æ§ç¯ã®åºæ¬ããå®è·µçãªãã¯ããã¯ãŸã§å¹ åºãåŠã¶ããšãã§ããŸãããç°å¢æ§ç¯ã¯ãWebéçºã®ç¬¬äžæ©ãšããŠéåžžã«éèŠã§ãããã®ã»ã¯ã·ã§ã³ã§ã¯ããããŸã§ã®å 容ããŸãšãããããªãåŠã³ã®ããã®ãªãœãŒã¹ã玹ä»ããŸãã
6.1 ç°å¢æ§ç¯ã®ãã§ãã¯ãªã¹ã
HTMLã®ç°å¢æ§ç¯ãé²ããéã®åºæ¬çãªãã§ãã¯ãªã¹ãã以äžã«ç€ºããŸãããã®ãã§ãã¯ãªã¹ããåèã«ããŠãç°å¢æ§ç¯ã®éçšã確èªããå¿ èŠãªæé ã確å®ã«å®è¡ããããšãã§ããŸãã
é ç® | 説æ |
---|---|
ããã¹ããšãã£ã¿ã®ã€ã³ã¹ããŒã« | ã³ãŒãã®ç·šéã«é©ããããã¹ããšãã£ã¿ãéžæããã€ã³ã¹ããŒã«ããŸãã |
ãã©ãŠã¶ã®éžæ | HTMLã®è¡šç€ºã«é©ãããã©ãŠã¶ãéžæããèšå®ãè¡ããŸãã |
åããŠã®HTMLãã¡ã€ã«ã®äœæ | åºæ¬çãªHTMLã®æ§é ãæã€ãã¡ã€ã«ãäœæãããã©ãŠã¶ã§è¡šç€ºã確èªããŸãã |
6.2 ä»åŸã®åŠã³ã®ããã®ãªãœãŒã¹
HTMLã®ç°å¢æ§ç¯ã®åºæ¬ãåŠãã åŸãããã«æ·±ãåŠã³ãé²ããããã®ãªãœãŒã¹ãããã€ã玹ä»ããŸãããªã³ã©ã€ã³äžã«ã¯ãHTMLãé¢é£ããæè¡ã«ã€ããŠåŠã¶ããã®å€ãã®ææããã¥ãŒããªã¢ã«ããããŸãããããã®ãªãœãŒã¹ã掻çšããŠãã¹ãã«ãããã«ç£šãäžããããšãã§ããŸãã
ãŸããå ¬åŒããã¥ã¡ã³ãã¯ãæãä¿¡é Œæ§ãé«ãã詳现ãªæ å ±ãåŸãããšãã§ãããªãœãŒã¹ã§ãããŸãããªã³ã©ã€ã³ã®ãã¥ãŒããªã¢ã«ãµã€ããããã°ããã©ãŒã©ã ãªã©ããå®è·µçãªæ å ±ãçåã®è§£æ±ºã«åœ¹ç«ã€æ å ±ãæäŸããŠããŸãã
æåŸã«ãåžžã«ææ°ã®æ å ±ãè¿œãæ±ããæ°ããæè¡ããã¬ã³ãã«ã¢ã³ããã匵ãç¶ããããšããWebéçºã®ã¹ãã«ãç¶æã»åäžãããããã®éµãšãªããŸãã