1. ã¯ããã«
è¿å¹Žãã€ã³ã¿ãŒãããã®æ®åãšãšãã«ãWebã¢ããªã±ãŒã·ã§ã³ã®éèŠãæ¥å¢ããŠããŸããã¹ããŒããã©ã³ãã¿ãã¬ãããPCãªã©ãããŸããŸãªããã€ã¹ã§å©çšãããWebã¢ããªã±ãŒã·ã§ã³ã¯ãç§ãã¡ã®æ¥åžžç掻ã«æ¬ ãããªãååšãšãªã£ãŠããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãWebã¢ããªã±ãŒã·ã§ã³ã®åºæ¬çãªæŠå¿µãšããªããããåŠã¶ã®ãã«ã€ããŠèª¬æããŸãã
1.1 Webã¢ããªã±ãŒã·ã§ã³ãšã¯
Webã¢ããªã±ãŒã·ã§ã³ã¯ãã€ã³ã¿ãŒããããã©ãŠã¶ãéããŠå©çšãããœãããŠã§ã¢ã®ããšãæããŸããåŸæ¥ã®ãã¹ã¯ãããã¢ããªã±ãŒã·ã§ã³ãšã¯ç°ãªãããŠãŒã¶ãŒã¯ç¹å®ã®ãœãããŠã§ã¢ãããŠã³ããŒãããããšãªãããã©ãŠã¶äžã§çŽæ¥ã¢ã¯ã»ã¹ããŠå©çšããããšãã§ããŸããäŸãã°ãã¡ãŒã«ãµãŒãã¹ãSNSããªã³ã©ã€ã³ã·ã§ããã³ã°ãµã€ããªã©ãå€ãã®ãµãŒãã¹ãWebã¢ããªã±ãŒã·ã§ã³ãšããŠæäŸãããŠããŸãã
Webã¢ããªã±ãŒã·ã§ã³ã®æ倧ã®ç¹åŸŽã¯ããã©ãããã©ãŒã ã«äŸåããªãããšã§ããWindowsãMacãAndroidãiOSãªã©ãããŸããŸãªOSãããã€ã¹ã«å¯Ÿå¿ããŠããããŠãŒã¶ãŒã¯èªåã®å¥œããªããã€ã¹ã§ãµãŒãã¹ãå©çšããããšãã§ããŸãã
1.2 ãªãWebã¢ããªã±ãŒã·ã§ã³ãåŠã¶ã®ã
Webã¢ããªã±ãŒã·ã§ã³ã®éçºã¹ãã«ã¯ãçŸä»£ã®ITæ¥çã§éåžžã«é«ãéèŠããããŸããå€ãã®äŒæ¥ãçµç¹ããèªç€Ÿã®ãµãŒãã¹ãååããªã³ã©ã€ã³ã§æäŸããããã®Webã¢ããªã±ãŒã·ã§ã³ã®éçºãæ±ããŠããŸãããŸããWebã¢ããªã±ãŒã·ã§ã³ã¯ãè¿ éãªã¢ããããŒããæ¡åŒµãå¯èœã§ãããããããžãã¹ã®å€åã«æè»ã«å¯Ÿå¿ããããšãã§ããŸãã
ããã«ãWebã¢ããªã±ãŒã·ã§ã³ã®éçºã¯ãããã°ã©ãã³ã°ã®åºæ¬çãªã¹ãã«ã身ã«ã€ãã絶奜ã®æ©äŒã§ããHTMLãCSSãJavaScriptãªã©ã®èšèªãåŠã¶ããšã§ããœãããŠã§ã¢éçºã®åºæ¬çãªããã»ã¹ãèãæ¹ãç解ããããšãã§ããŸãã
2. Webã¢ããªã®æ§æèŠçŽ
Webã¢ããªã±ãŒã·ã§ã³ãç解ããããã«ã¯ããã®æ§æèŠçŽ ãç¥ãããšãäžå¯æ¬ ã§ããäžè¬çã«ãWebã¢ããªã±ãŒã·ã§ã³ã¯ããã³ããšã³ããšããã¯ãšã³ãã®2ã€ã®éšåããæãç«ã£ãŠããŸããããããã®éšåãã©ã®ãããªåœ¹å²ãæãããŠããã®ãã詳ããèŠãŠãããŸãããã
2.1 ããã³ããšã³ããšã¯
ããã³ããšã³ãã¯ããŠãŒã¶ãŒãçŽæ¥è§ŠããéšåãæããŸãããã©ãŠã¶äžã§è¡šç€ºãããç»é¢ãæäœãããã¿ã³ãå ¥åãã©ãŒã ãªã©ããŠãŒã¶ãŒãšã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãæ åœããéšåã§ããããã³ããšã³ãã®éçºã«ã¯ãäž»ã«HTMLãCSSãJavaScriptãšãã£ãæè¡ã䜿çšãããŸãã
2.1.1 HTMLã®åºç€
HTMLïŒHyperText Markup LanguageïŒã¯ãWebããŒãžã®æ§é ãå®çŸ©ããããã®èšèªã§ããæç« ã®èŠåºãã段èœããªã³ã¯ãç»åãªã©ãããŒãžäžã®èŠçŽ ãé 眮ããããã®åºæ¬çãªæ瀺ãèšè¿°ããŸãã
2.1.2 CSSã®åœ¹å²
CSSïŒCascading Style SheetsïŒã¯ãWebããŒãžã®ãã¶ã€ã³ãã¬ã€ã¢ãŠããå¶åŸ¡ããããã®èšèªã§ããHTMLã§é 眮ãããèŠçŽ ã®è²ã倧ãããäœçœ®ãªã©ã®ã¹ã¿ã€ã«ãæå®ããããšãã§ããŸãã
2.1.3 JavaScriptã®é å
JavaScriptã¯ãWebããŒãžã«åçãªæ©èœãè¿œå ããããã®ããã°ã©ãã³ã°èšèªã§ããäŸãã°ããã¿ã³ãã¯ãªãã¯ãããšãã®ã¢ã¯ã·ã§ã³ããããŒã¿ã®ååŸã»è¡šç€ºãªã©ããŠãŒã¶ãŒãšã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãå®çŸããããã®ã¹ã¯ãªãããèšè¿°ããŸãã
2.2 ããã¯ãšã³ããšã¯
ããã¯ãšã³ãã¯ãããã³ããšã³ãã®è£åŽã§åäœããéšåãæããŸããããŒã¿ããŒã¹ãšã®é£æºããããžãã¹ããžãã¯ã®åŠçããŠãŒã¶ãŒã®ãªã¯ãšã¹ãã«å¿ããããŒã¿ã®éåä¿¡ãªã©ããµãŒããŒåŽã®åŠçãæ åœããŸãã
2.2.1 ãµãŒããŒã®åœ¹å²
ãµãŒããŒã¯ããŠãŒã¶ãŒããã®ãªã¯ãšã¹ããåãåããé©åãªã¬ã¹ãã³ã¹ãè¿ã圹å²ãæã£ãŠããŸããäŸãã°ããŠãŒã¶ãŒãååã®æ å ±ããªã¯ãšã¹ããããšããµãŒããŒã¯ããŒã¿ããŒã¹ãã該åœããæ å ±ãååŸãããããããã³ããšã³ãã«éä¿¡ããŸãã
2.2.2 ããŒã¿ããŒã¹ã®éèŠæ§
ããŒã¿ããŒã¹ã¯ãWebã¢ããªã±ãŒã·ã§ã³ã®ããŒã¿ãä¿åã»ç®¡çããããã®ã·ã¹ãã ã§ãããŠãŒã¶ãŒã®ã¢ã«ãŠã³ãæ å ±ããååã®åšåº«æ å ±ãªã©ãã¢ããªã±ãŒã·ã§ã³ã®åäœã«å¿ èŠãªããŒã¿ãå¹ççã«åãæ±ãããšãã§ããŸãã
3. éçºç°å¢ã®ã»ããã¢ãã
Webã¢ããªã±ãŒã·ã§ã³ã®éçºãå§ããåã«ãé©åãªéçºç°å¢ãæŽããããšãéèŠã§ããéçºç°å¢ãšã¯ãããã°ã©ã ãæžãããããã¹ããè¡ã£ããããããã®ç°å¢ã®ããšãæããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãWebã¢ããªã±ãŒã·ã§ã³éçºã«å¿ èŠãªããŒã«ããœãããŠã§ã¢ããããŠãã®ã»ããã¢ããæé ã«ã€ããŠèª¬æããŸãã
3.1 å¿ èŠãªããŒã«ãšãœãããŠã§ã¢
Webã¢ããªã±ãŒã·ã§ã³ã®éçºã«ã¯ãããŸããŸãªããŒã«ããœãããŠã§ã¢ãå¿ èŠã§ãããŸãã¯ãåºæ¬çãªãã®ããèŠãŠãããŸãããã
ããã¹ããšãã£ã¿: ã³ãŒããæžãããã®ãœãããŠã§ã¢ã§ãVisual Studio CodeãSublime Textãªã©ã人æ°ã§ãã
ãã©ãŠã¶: Webã¢ããªã±ãŒã·ã§ã³ã®åäœã確èªããããã®ããŒã«ãGoogle ChromeãFirefoxãªã©ããã䜿çšãããŸãã
ããŒãžã§ã³ç®¡çã·ã¹ãã : ã³ãŒãã®å€æŽå±¥æŽã管çããããã®ããŒã«ãGitã¯ãã®åéã®ããã¡ã¯ãã¹ã¿ã³ããŒããšãªã£ãŠããŸãã
ãããã®ããŒã«ããœãããŠã§ã¢ã¯ãWebã¢ããªã±ãŒã·ã§ã³éçºã®åºç€ãšãªããã®ã§ããé©åãªããŒã«ãéžæããå¹ççãªéçºãç®æããŸãããã
3.2 éçºç°å¢ã®æ§ç¯æé
éçºç°å¢ã®æ§ç¯ã¯ãåããŠã®æ¹ã«ãšã£ãŠã¯å°ãé£ããæãããããããŸãããã以äžã®æé ãåèã«é²ããããšã§ãã¹ã ãŒãºã«ã»ããã¢ããããããšãã§ããŸãã
1. ãŸããããã¹ããšãã£ã¿ãã€ã³ã¹ããŒã«ããŸããå ¬åŒãµã€ãããããŠã³ããŒãããæ瀺ã«åŸã£ãŠã€ã³ã¹ããŒã«ãé²ããŸãã
2. 次ã«ããã©ãŠã¶ãã€ã³ã¹ããŒã«ããŸããæ¢ã«PCã«ã€ã³ã¹ããŒã«ãããŠããå Žåã¯ãææ°ããŒãžã§ã³ã«ã¢ããããŒãããããšãããããããŸãã
3. æåŸã«ãGitãã€ã³ã¹ããŒã«ããŸããå ¬åŒãµã€ãããããŠã³ããŒãããã€ã³ã¹ããŒã«ãé²ããéã«ã¯ãé©åãªèšå®ãéžæããããšãéèŠã§ãã
ãããã®æé ãçµãããšãåºæ¬çãªéçºç°å¢ã®ã»ããã¢ããã¯å®äºã§ãã次ã«ãå ·äœçãªãããžã§ã¯ãã«å¿ããŠãè¿œå ã®ããŒã«ãã©ã€ãã©ãªãã€ã³ã¹ããŒã«ããããšãèããããŸãã
4. å®éã®Webã¢ããªéçºããã»ã¹
Webã¢ããªã±ãŒã·ã§ã³ã®éçºã¯ãåã«ã³ãŒããæžãã ãã§ã¯ãããŸãããã¢ã€ãã£ã¢ã®åºãæ¹ãããã¶ã€ã³ãã³ãŒãã£ã³ã°ããã¹ããŸã§ãå€ãã®ã¹ããããå«ãŸããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãããããã®ã¹ãããã«ã€ããŠè©³ãã解説ããŸãã
4.1 ã¢ã€ãã£ã¢ã®åºãæ¹
æåããWebã¢ããªã±ãŒã·ã§ã³ã¯ããŠããŒã¯ã§äŸ¡å€ã®ããã¢ã€ãã£ã¢ããå§ãŸããŸããã¢ã€ãã£ã¢ãåºãéã«ã¯ãèªåèªèº«ã®çµéšãå°ã£ãŠããããšããŸãã¯ä»äººã®åé¡ç¹ãèããããšã圹ç«ã¡ãŸãããŸããæ¢åã®ãµãŒãã¹ãæ¹åãã圢ã§æ°ããã¢ã€ãã£ã¢ãèããããšãã§ããŸãã
4.2 ãã¶ã€ã³ãšãããã¿ã€ãã³ã°
ã¢ã€ãã£ã¢ã決ãŸã£ããã次ã¯ãã¶ã€ã³ã®ã¹ãããã«ç§»ããŸããããã§ã¯ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãèæ ®ããªãããã¢ããªã±ãŒã·ã§ã³ã®èŠãç®ãåããèšèšããŸãããããã¿ã€ãã³ã°ããŒã«ã䜿çšããããšã§ãå®éã®åäœãã·ãã¥ã¬ãŒãããããšãã§ãããã¶ã€ã³ã®æ¹åç¹ãèŠã€ããããšãã§ããŸãã
4.3 ã³ãŒãã£ã³ã°ã®ãã¹ããã©ã¯ãã£ã¹
ãã¶ã€ã³ãå®äºããããã³ãŒãã£ã³ã°ã®ã¹ãããã«é²ã¿ãŸããããã§ã¯ãå¹ççã§ä¿å®æ§ã®é«ãã³ãŒããæžãããšãæ±ããããŸãããã¹ããã©ã¯ãã£ã¹ãå®ãããšã§ããã°ã®å°ãªããå®å®ããã¢ããªã±ãŒã·ã§ã³ãéçºããããšãã§ããŸãã
4.4 ãã¹ãæ¹æ³
ã³ãŒãã£ã³ã°ãå®äºãããããã¹ãã®ã¹ãããã«ç§»ããŸãããã¹ãã¯ãã¢ããªã±ãŒã·ã§ã³ãæ£ããåäœãããã確èªããããã®éèŠãªã¹ãããã§ãããŠããããã¹ããçµ±åãã¹ãããšã³ãããŒãšã³ããã¹ããªã©ãããŸããŸãªãã¹ãææ³ã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ã®å質ã確ä¿ããŸãã
5. Webã¢ããªã®å ¬é
Webã¢ããªã±ãŒã·ã§ã³ã®éçºãå®äºãããã次ã¯å ¬éã®ã¹ãããã«ç§»ããŸããå ¬éãšã¯ãäœæããã¢ããªã±ãŒã·ã§ã³ãã€ã³ã¿ãŒãããäžã§ã¢ã¯ã»ã¹å¯èœã«ããããšãæããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãWebã¢ããªã±ãŒã·ã§ã³ã®å ¬éæ¹æ³ãããã¹ãã£ã³ã°ãµãŒãã¹ã®éžã³æ¹ã«ã€ããŠè©³ãã解説ããŸãã
5.1 ãã¹ãã£ã³ã°ãµãŒãã¹ã®éžã³æ¹
Webã¢ããªã±ãŒã·ã§ã³ãå ¬éããããã«ã¯ããã¹ãã£ã³ã°ãµãŒãã¹ãå©çšããå¿ èŠããããŸãããã¹ãã£ã³ã°ãµãŒãã¹ãšã¯ãã¢ããªã±ãŒã·ã§ã³ãåããããã®ãµãŒããŒãæäŸãããµãŒãã¹ã®ããšãæããŸããå€ãã®ãã¹ãã£ã³ã°ãµãŒãã¹ãååšããäžã§ãèªåã®ã¢ããªã±ãŒã·ã§ã³ã«åã£ããµãŒãã¹ãéžã¶ããšãéèŠã§ãã
ãã¹ãã£ã³ã°ãµãŒãã¹ãéžã¶éã®ãã€ã³ããšããŠã¯ãäŸ¡æ ŒããµããŒãäœå¶ãæäŸããããªãœãŒã¹ãªã©ãæããããŸãããŸããã¢ããªã±ãŒã·ã§ã³ã®èŠæš¡ããã©ãã£ãã¯ã®äºæž¬ãèæ ®ããããšãå¿ èŠã§ãã
5.2 å ¬éãŸã§ã®ã¹ããã
Webã¢ããªã±ãŒã·ã§ã³ã®å ¬éã«ã¯ãããã€ãã®ã¹ããããå¿ èŠã§ãã以äžã«ãå ¬éãŸã§ã®åºæ¬çãªã¹ãããã説æããŸãã
1. ãŸãããã¡ã€ã³åãååŸããŸãããã¡ã€ã³åãšã¯ãã¢ããªã±ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ããããã®URLã®ããšãæããŸãã
2. 次ã«ããã¹ãã£ã³ã°ãµãŒãã¹ãéžã³ãã¢ã«ãŠã³ããäœæããŸãã
3. ãã¹ãã£ã³ã°ãµãŒãã¹ã«ãã°ã€ã³ããã¢ããªã±ãŒã·ã§ã³ã®ãã¡ã€ã«ãã¢ããããŒãããŸãã
4. æåŸã«ããã¡ã€ã³åãšãã¹ãã£ã³ã°ãµãŒãã¹ãçŽã¥ããã¢ããªã±ãŒã·ã§ã³ãå ¬éããŸãã
ãããã®ã¹ããããçµãããšãã€ã³ã¿ãŒãããäžã§ã¢ããªã±ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ããããšãã§ããããã«ãªããŸãã
6. ãŸãšããšä»åŸã®åŠã³æ¹
Webã¢ããªã±ãŒã·ã§ã³ã®éçºã¯ãå€ãã®ã¹ããããšç¥èãå¿ èŠã§ããããããäžæ©äžæ©é²ããŠããããšã§ãèªåã ãã®ã¢ããªã±ãŒã·ã§ã³ãäœæããå ¬éããããšãã§ããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãæ¬èšäºã§åŠãã å 容ã®ãŸãšããšããããªãåŠã³ã®ããã®ãªãœãŒã¹ã玹ä»ããŸãã
6.1 æ¬èšäºã®èŠç¹ã®å確èª
æ¬èšäºã§ã¯ãWebã¢ããªã±ãŒã·ã§ã³ã®éçºããå ¬éãŸã§ã®åºæ¬çãªã¹ãããã解説ããŸãããç¹ã«ãéçºç°å¢ã®ã»ããã¢ããããã¹ãã£ã³ã°ãµãŒãã¹ã®éžã³æ¹ãªã©ãåå¿è ãã€ãŸããããããã€ã³ãã«çŠç¹ãåœãŠãŠèª¬æããŸããããããã®ç¥èãåºã«ãèªåã®ã¢ã€ãã£ã¢ã圢ã«ããããšãã§ããŸãã
6.2 ãããªãåŠã³ã®ããã®ãªãœãŒã¹
Webã¢ããªã±ãŒã·ã§ã³ã®éçºã¯ãåžžã«æ°ããæè¡ããã¬ã³ããåºãŠããåéã§ãããã®ãããç¶ç¶çãªåŠã³ãå¿ èŠã§ãã以äžã«ããããªãåŠã³ã®ããã®ããããã®ãªãœãŒã¹ã玹ä»ããŸãã
1. ãªã³ã©ã€ã³ããã°ã©ãã³ã°ã¹ã¯ãŒã«ããã¥ãŒããªã¢ã«ãµã€ã: å®è·µçãªå 容ãåŠã¶ããšãã§ããŸãã
2. æè¡æž: åºæ¬çãªç¥èããæ·±ãå 容ãŸã§å¹ åºãåŠã¶ããšãã§ããŸãã
3. ã³ãã¥ããã£ãå匷äŒ: ä»ã®éçºè ãšäº€æµããªãããææ°ã®æ å ±ãç¥èãå ±æããããšãã§ããŸãã
ãããã®ãªãœãŒã¹ã掻çšããç¶ç¶çã«åŠã³ãæ·±ããŠããããšã§ãããé«åºŠãªã¢ããªã±ãŒã·ã§ã³ã®éçºããæ°ããæè¡ã®åãå ¥ããå¯èœãšãªããŸãã