1. HTMLãšã¯ïŒ
HTMLã¯ãHyperText Markup Languageã®ç¥ã§ããŠã§ãããŒãžãäœæããããã®ããŒã¯ã¢ããèšèªã§ããããŒã¯ã¢ããèšèªãšã¯ãããã¹ãã«ã¿ã°ãšåŒã°ããç¹å®ã®èšå·ãã³ãŒããè¿œå ããŠããã®ããã¹ãã®æ§é ãæå³ãå®çŸ©ããèšèªã®ããšãæããŸãã
1.1 ãŠã§ãããŒãžã®åå°ãšããŠã®åœ¹å²
HTMLã¯ããŠã§ãããŒãžã®åå°ãšããŠã®åœ¹å²ãæãããŠããŸããå ·äœçã«ã¯ããŠã§ãããŒãžäžã§ã®ããã¹ãã®é 眮ããç»åãåç»ããªã³ã¯ãªã©ã®èŠçŽ ã®è¡šç€ºãå¶åŸ¡ããããã®æ瀺ãæäŸããŸããäŸãã°ãããããã¹ããèŠåºããšããŠåŒ·èª¿ãããå Žåããç¹å®ã®ãªã³ã¯ãã¯ãªãã¯ãããšå¥ã®ããŒãžã«é·ç§»ããããã«ãããå Žåãªã©ãHTMLã®ã¿ã°ã䜿çšããŠãããã®åäœãæå®ããããšãã§ããŸãã
1.2 HTMLã®æŽå²çèæ¯
HTMLã¯ã1990幎代åé ã«ããã£ã ã»ããŒããŒãºïŒãªãŒã«ãã£ãŠéçºãããŸããã圌ã¯ãæ å ±ãå¹ççã«å ±æããããã®ã·ã¹ãã ãšããŠãWorld Wide WebïŒWWWïŒãèæ¡ãããã®äžæ žãšãªãæè¡ãšããŠHTMLãå°å ¥ããŸãããåœåã¯ãç 究è éã§ã®æ å ±å ±æãç®çãšããŠããŸãããããããŠäžè¬ã®äººã ã«ãåºãããä»æ¥ã§ã¯ç§ãã¡ã®æ¥åžžç掻ã«æ¬ ãããªããã®ãšãªã£ãŠããŸãã
åæã®HTMLã¯éåžžã«ã·ã³ãã«ã§ãåºæ¬çãªããã¹ãã®æ§é ãå®çŸ©ããããã®ã¿ã°ããæã£ãŠããŸããã§ãããããããæ代ãšãšãã«ãŠã§ãã®å©çšãå¢ããããè€éãªã³ã³ãã³ãã®è¡šç€ºãã€ã³ã¿ã©ã¯ã·ã§ã³ãæ±ããããããã«ãªããHTMLãé²åããŠããŸãããçŸåšã®HTML5ã¯ãé³å£°ãåç»ã®åã蟌ã¿ãã¢ãã¡ãŒã·ã§ã³ãé«åºŠãªã€ã³ã¿ã©ã¯ã·ã§ã³ãªã©ãå€å²ã«ãããæ©èœããµããŒãããŠããŸãã
2. HTMLã®åºæ¬æ§é
ãŠã§ãããŒãžãäœæããéã®HTMLã®åºæ¬æ§é ã¯ããã®ããŒãžã®éªšæ Œã圢æããŸãããã®æ§é ã¯ãããŒãžãæ£ãã衚瀺ãããããã®åºç€ãšãªããã®ã§ãåèŠçŽ ãã©ã®ãããªåœ¹å²ãæã€ã®ããç解ããããšã¯ãå¹æçãªãŠã§ãããŒãžã®äœæã«äžå¯æ¬ ã§ãã
2.1 DOCTYPE宣èšãšã¯
DOCTYPE宣èšã¯ãHTMLææžã®æåã«äœçœ®ãããã®ã§ããã®ææžãã©ã®ããŒãžã§ã³ã®HTMLã«åŸã£ãŠãããããã©ãŠã¶ã«äŒãã圹å²ããããŸããããã«ããããã©ãŠã¶ã¯ææžãæ£ãã解éããé©åã«è¡šç€ºããããšãã§ããŸããçŸåšã®äž»æµãšãªã£ãŠããHTML5ã§ã¯ã<!DOCTYPE html>ãšãã宣èšã䜿çšããŸãã
2.2 htmlã¿ã°ãšãã®åœ¹å²
htmlã¿ã°ã¯ãHTMLææžã®æãå€åŽã«äœçœ®ããã¿ã°ã§ãææžå šäœãå²ã圹å²ãæã£ãŠããŸãããã®ã¿ã°ã®äžã«ã¯ãããŒãžã®æ å ±ãæã€headã¿ã°ãšãå®éã«è¡šç€ºãããå 容ãæã€bodyã¿ã°ãå«ãŸããŸããhtmlã¿ã°ã¯ãææžãHTMLã§ããããšã瀺ãåºæ¬çãªããŒã¯ã¢ãããšããŠããŠã§ãããŒãžã®æ ¹å¹¹ãæããã®ã§ãã
2.3 headã¿ã°ãšbodyã¿ã°ã®éã
headã¿ã°ã¯ããŠã§ãããŒãžã®ã¡ã¿ããŒã¿ããªã³ã¯ãã¹ã¿ã€ã«ã·ãŒããªã©ãããŒãžèªäœã®æ å ±ãæã€éšåã§ãããã®äžã«ã¯ãããŒãžã®ã¿ã€ãã«ãæåã»ããã®æå®ãå€éšãã¡ã€ã«ãžã®ãªã³ã¯ãªã©ãå«ãŸããŸããäžæ¹ãbodyã¿ã°ã¯ããŠã§ãããŒãžäžã§å®éã«è¡šç€ºãããå 容ãæã€éšåã§ãããã¹ããç»åããªã³ã¯ãªã©ã®èŠçŽ ãé 眮ãããŸãããããã®ã¿ã°ã¯ãHTMLææžã®åºæ¬çãªæ§é ã圢æãããã®ã§ãããããã®åœ¹å²ãæ£ããç解ããããšã§ãå¹æçãªãŠã§ãããŒãžãäœæããããšãã§ããŸãã
3. ã¿ã°ã®åºæ¬
ãŠã§ãããŒãžãæ§ç¯ããéã®HTMLã®é åã¯ããã®æè»æ§ãšå€æ§æ§ã«ãããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãHTMLã®äžå¿çèŠçŽ ã§ããã¿ã°ãšãã®åºæ¬çãªæŠå¿µã«ã€ããŠè©³ãã解説ããŸãã
3.1 ã¿ã°ãšã¯ïŒ
ã¿ã°ã¯ãHTMLææžå ã§èŠçŽ ãå®çŸ©ããããã®ããŒã¯ã¢ããã®äžéšã§ããããã¯ãããã¹ãããã®ä»ã®ã³ã³ãã³ãã«ç¹å®ã®æå³ãæ§é ãä»äžããããã®ãã®ã§ãéåžžãéå§ã¿ã°ãšçµäºã¿ã°ã®ãã¢ã§æ§æãããŸããäŸãã°ã<p>ã¯æ®µèœãéå§ããã¿ã°ã§ã</p>ã¯ãããçµäºããã¿ã°ã§ãããã®ããã«ããŠãã¿ã°ã¯ãŠã§ãããŒãžã®åéšåã«æå³ãæããããã©ãŠã¶ã«ãã®è¡šç€ºæ¹æ³ãæ瀺ããŸãã
3.2 ã¿ã°ã®çš®é¡ãšäž»ãªåœ¹å²
HTMLã«ã¯å€ãã®ã¿ã°ãååšãããããããç°ãªã圹å²ãæã£ãŠããŸããäŸãã°ã<h1>ãã<h6>ãŸã§ã®ã¿ã°ã¯èŠåºããè¡šãã<a>ã¿ã°ã¯ãªã³ã¯ãäœæããããã®ãã®ã§ãããŸãã<img>ã¿ã°ã¯ç»åã衚瀺ããããã®ãã®ã§ã<ul>ã<ol>ã¿ã°ã¯ãªã¹ããäœæããããã®ãã®ã§ãã
ã¿ã° | 説æ |
---|---|
<h1> – <h6> | èŠåºããè¡šãã¿ã° |
<a> | ãªã³ã¯ãäœæããã¿ã° |
<img> | ç»åã衚瀺ããã¿ã° |
<ul>, <ol> | ãªã¹ããäœæããã¿ã° |
3.3 å±æ§ãšã¯ïŒ
å±æ§ã¯ãã¿ã°ãæã€è¿œå æ å ±ãæäŸãããã®ã§ãã¿ã°å ã«é 眮ãããŸããããã«ãããã¿ã°ã®åäœã衚瀺ãã«ã¹ã¿ãã€ãºããããšãã§ããŸããäŸãã°ã<a>ã¿ã°ã®hrefå±æ§ã¯ããªã³ã¯ã®ç®çå°ãæå®ããããã®ãã®ã§ãããŸãã<img>ã¿ã°ã®srcå±æ§ã¯ã衚瀺ããç»åã®URLãæå®ããããã®ãã®ã§ããå±æ§ã¯ãã¿ã°ã®æ©èœãæ¡åŒµããããå ·äœçãªæ瀺ãæäŸããããã®éèŠãªèŠçŽ ã§ãã
4. ãã䜿ãããHTMLã¿ã°
ãŠã§ãããŒãžãæ§ç¯ããéãç¹å®ã®HTMLã¿ã°ã¯é »ç¹ã«äœ¿çšãããŸãããããã®ã¿ã°ã¯ãããŒãžã®åºæ¬çãªæ§é ããã¶ã€ã³ãæ©èœã圢æããããã®ãã®ã§ãããã®ã»ã¯ã·ã§ã³ã§ã¯ãç¹ã«ãã䜿ãããHTMLã¿ã°ã«çŠç¹ãåœãŠããã®äœ¿çšæ¹æ³ãšåœ¹å²ã«ã€ããŠè©³ãã解説ããŸãã
4.1 ããã¹ããæŽåœ¢ããã¿ã°
ããã¹ãã¯ãŠã§ãããŒãžã®äž»èŠãªã³ã³ãã³ãã®äžéšã§ããããã®è¡šç€ºæ¹æ³ãå¶åŸ¡ããããã®ã¿ã°ãããã€ããããŸããäŸãã°ã<b>ã¿ã°ã¯ããã¹ãã倪åã«ãã<i>ã¿ã°ã¯ããã¹ããæäœã«ããŸãããŸãã<br>ã¿ã°ã䜿çšãããšããã¹ãå ã§æ¹è¡ãäœæããããšãã§ããŸãã
4.2 ç»åããªã³ã¯ãæ¿å ¥ããã¿ã°
ãŠã§ãããŒãžã¯ããã¹ãã ãã§ãªããç»åããªã³ã¯ãå«ãããšãã§ããŸããç»åãããŒãžã«æ¿å ¥ããã«ã¯ã<img>ã¿ã°ã䜿çšããŸãããã®ã¿ã°ã«ã¯ãsrcå±æ§ãå¿ èŠã§ãããã«ã¯ç»åã®URLãæå®ããŸããäžæ¹ããªã³ã¯ãäœæããã«ã¯<a>ã¿ã°ã䜿çšããhrefå±æ§ã«ãªã³ã¯å ã®URLãæå®ããŸãã
4.3 ãªã¹ããäœæããã¿ã°
æ å ±ãæŽçããèŠèŠçã«ãããããã衚瀺ããããã«ããªã¹ãã䜿çšããããšããããããŸããHTMLã§ã¯ãé åºä»ããªã¹ããäœæãã<ol>ã¿ã°ãšãé åºãªããªã¹ããäœæãã<ul>ã¿ã°ããããŸãããããã®ã¿ã°ã®äžã«ã¯ã<li>ã¿ã°ã䜿çšããŠãªã¹ãã®åé ç®ãæå®ããŸãã
5. HTMLã§ã®ãã¶ã€ã³ãšã¬ã€ã¢ãŠã
ãŠã§ãããŒãžã®èŠãç®ãã¬ã€ã¢ãŠãã¯ããŠãŒã¶ãŒã®äœéšã«å€§ããªåœ±é¿ãäžããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãHTMLã䜿çšããŠãã¶ã€ã³ãã¬ã€ã¢ãŠããæé©åããæ¹æ³ã«ã€ããŠãåºæ¬çãªæŠå¿µãšå®è·µçãªã¢ããã€ã¹ãæäŸããŸãã
5.1 CSSãšã®é£æº
HTMLã¯ããŒãžã®æ§é ãå®çŸ©ãããã®ã§ããããã®èŠãç®ãã¹ã¿ã€ã«ã¯CSSïŒCascading Style SheetsïŒã«ãã£ãŠå¶åŸ¡ãããŸããCSSã¯ãããã¹ãã®è²ããã©ã³ããèæ¯ã®ãã¶ã€ã³ãã¬ã€ã¢ãŠãã®èª¿æŽãªã©ãããŒãžã®ããžã¥ã¢ã«ãã¶ã€ã³ãæ åœããŸããHTMLãšCSSã¯å¯æ¥ã«é£æºããŠåäœããäžç·ã«äœ¿çšããããšã§ãå¹æçãªãŠã§ãããŒãžãäœæããããšãã§ããŸãã
5.2 ã¬ã¹ãã³ã·ããã¶ã€ã³ãšã¯
çŸä»£ã®ãŠã§ãããŒãžã¯ãããŸããŸãªããã€ã¹ãç»é¢ãµã€ãºã§é²èŠ§ãããããšãäžè¬çã§ããã¬ã¹ãã³ã·ããã¶ã€ã³ã¯ããããã®ç°ãªãããã€ã¹ã«é©å¿ãããã¶ã€ã³ã®ã¢ãããŒããæããŸããå ·äœçã«ã¯ãç»é¢ã®ãµã€ãºã解å床ã«å¿ããŠãããŒãžã®ã¬ã€ã¢ãŠãããã¶ã€ã³ãèªåçã«èª¿æŽãããããšãæå³ããŸããããã«ããããŠãŒã¶ãŒã¯ã©ã®ããã€ã¹ã䜿çšããŠããæé©ãªé²èŠ§äœéšãåŸãããšãã§ããŸãã
5.3 ãã¬ãŒã ã¯ãŒã¯ã®å©çš
ãŠã§ããã¶ã€ã³ãã¬ã€ã¢ãŠãã®äœæãå¹ççã«è¡ãããã«ãå€ãã®éçºè ã¯ãã¬ãŒã ã¯ãŒã¯ãå©çšããŸãããã¬ãŒã ã¯ãŒã¯ã¯ãäºåã«å®çŸ©ãããã³ãŒãã®ã»ããã§ããããããããŒã¹ã«ããŠããŒãžãæ§ç¯ããããšãã§ããŸããäŸãã°ãBootstrapãFoundationãªã©ã®ãã¬ãŒã ã¯ãŒã¯ã¯ãã¬ã¹ãã³ã·ããã¶ã€ã³ãç°¡åã«å®è£ ããããã®ããŒã«ãã³ã³ããŒãã³ããæäŸããŸããããã«ãããæéãç¯çŽããäžè²«æ§ã®ãããã¶ã€ã³ãç°¡åã«å®çŸããããšãã§ããŸãã
6. å®è·µïŒã·ã³ãã«ãªãŠã§ãããŒãžã®äœæ
ãŠã§ãããŒãžã®äœæã¯ãåå¿è ã«ãšã£ãŠã¯é£ãããã«æãããããããŸããããåºæ¬çãªç¥èãšããŒã«ãããã°èª°ã§ãç°¡åã«å§ããããšãã§ããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãã·ã³ãã«ãªãŠã§ãããŒãžã®äœæããå ¬éãŸã§ã®æé ãå®è·µçã«è§£èª¬ããŸãã
6.1 å¿ èŠãªããŒã«ãšç°å¢ã®æºå
ãŠã§ãããŒãžãäœæããããã«ã¯ãããã¹ããšãã£ã¿ãšãã©ãŠã¶ãå¿ èŠã§ããããã¹ããšãã£ã¿ã¯ãVSCodeãSublime Textãªã©ã®å°çšã®ãã®ã䜿çšãããšãã³ãŒãã®èšè¿°ããããããªããŸãããŸãããã©ãŠã¶ã¯ããŒãžã®è¡šç€ºã確èªããããã«äœ¿çšããŸããGoogle ChromeãFirefoxãªã©ã®äž»èŠãªãã©ãŠã¶ãçšæããŠãããšè¯ãã§ãããã
6.2 ã³ãŒãã®æžãæ¹ãšãã¹ãæ¹æ³
ãŠã§ãããŒãžã®åºæ¬ã¯ãHTMLã§æ§é ãäœæããCSSã§ãã¶ã€ã³ãæœãããšã§ããããã¹ããšãã£ã¿ã䜿çšããŠãHTMLãšCSSã®ã³ãŒããèšè¿°ããŸããã³ãŒããå®æãããããã©ãŠã¶ã䜿çšããŠããŒãžã®è¡šç€ºã確èªããŸãããã®æãF5ããŒãæŒããããã©ãŠã¶ã®æŽæ°ãã¿ã³ãã¯ãªãã¯ããããšã§ãææ°ã®ã³ãŒãã«åºã¥ããããŒãžã®è¡šç€ºã確èªããããšãã§ããŸãã
6.3 å ¬éãŸã§ã®ã¹ããã
ãŠã§ãããŒãžã®äœæãå®äºãããã次ã¯å ¬éã®æºåãããŸãããŸãããŠã§ããã¹ãã£ã³ã°ãµãŒãã¹ãéžã³ããã¡ã€ã³åãååŸããŸãã次ã«ãFTPã¯ã©ã€ã¢ã³ãã䜿çšããŠãäœæãããŠã§ãããŒãžã®ãã¡ã€ã«ããã¹ãã£ã³ã°ãµãŒãã¹ã«ã¢ããããŒãããŸããããã«ãããã€ã³ã¿ãŒãããäžã§ããŒãžãå ¬éãããäžçäžã®äººã ãã¢ã¯ã»ã¹ããããšãã§ããããã«ãªããŸãã
7. ãŸãšããšæ¬¡ã®ã¹ããã
ãã®èšäºãéããŠãHTMLã®åºæ¬ããå®è·µçãªãŠã§ãããŒãžã®äœææ¹æ³ãŸã§ãåŠã³ãŸãããããããããã¯ãããŸã§å ¥éã¬ãã«ã®å 容ã§ãããŠã§ãéçºã®äžçã¯åºãããããªãåŠç¿ãšå®è·µãå¿ èŠã§ãããã®ã»ã¯ã·ã§ã³ã§ã¯ãä»åŸã®åŠç¿ã®ãã€ã³ããæšå¥šãªãœãŒã¹ãå®è·µãéããŠã®ã¹ãã«ã¢ããã®æ¹æ³ã«ã€ããŠè§£èª¬ããŸãã
7.1 HTMLåŠç¿ã®ãã€ã³ã
HTMLãå¹æçã«åŠã¶ããã®æãéèŠãªãã€ã³ãã¯ãå®è·µã§ããçè«ã ãã§ãªããå®éã«ã³ãŒããæžãããã©ãŠã¶ã§è¡šç€ºã確èªããããšã§ãç解ãæ·±ãŸããŸãããŸãããšã©ãŒãçºçããå Žåã¯ãããã解決ããããã»ã¹ãéããŠãããã«å€ãã®ããšãåŠã¶ããšãã§ããŸãã
7.2 ãããªãåŠç¿ãªãœãŒã¹
ãŠã§ãéçºã«é¢ããç¥èã¯æ¥ã æŽæ°ãããŠããŸãããã®ãããææ°ã®æ å ±ãæè¡ãåŠã¶ããã®ãªãœãŒã¹ãæ¢ãç¶ããããšãéèŠã§ãããªã³ã©ã€ã³ã«ã¯å€ãã®ãã¥ãŒããªã¢ã«ãããã¥ã¡ã³ãããããŸããç¹ã«ãMDN Web DocsãW3Schoolsã¯ãåå¿è ããäžçŽè ãŸã§ã®åŠç¿ã«åœ¹ç«ã€ãªãœãŒã¹ãšããŠåºãæšå¥šãããŠããŸãã
7.3 å®è·µãéããŠã®ã¹ãã«ã¢ãã
ç¥èãå®éã®ãããžã§ã¯ãã«é©çšããããšã§ãã¹ãã«ã磚ãããšãã§ããŸããäŸãã°ãèªåã®ããŒããã©ãªãªãµã€ããäœæãããå人ã家æã®ããã®ãŠã§ããµã€ããå¶äœãããªã©ãå°ããªãããžã§ã¯ãããå§ããããšãããããããŸãããŸãããªãŒãã³ãœãŒã¹ãããžã§ã¯ãã«åå ããããšã§ãä»ã®éçºè ãšååããŠäœæ¥ãé²ããçµéšãç©ãããšãã§ããŸãã