Pro Yearly is on sale from $80 to $50! »

2018年新卒エンジニア研修 JS・HTML・CSS

 2018年新卒エンジニア研修 JS・HTML・CSS

07d2f262fd910920293599896683c2b2?s=128

Yoshinori Sasaki

May 10, 2018
Tweet

Transcript

  1. HTML / CSS / JS ͷجૅΛֶͿ 2018.05.10 ৽ೖࣾһݚम@GRID

  2. ࣗݾ঺հ ✦ ૳໺ ࿨໵ @miniturbo ✦ גࣜձࣾΨΠΞοΫε
 ٕज़։ൃ෦ ॴଐ ✦

    ϚʔΫΞοϓΤϯδχΞ
 WebϓϩάϥϚʔ
 ΠϯϑϥΤϯδχΞ
  3. ݚमͷ໨త ✦ ݚमΛ௨ͯ͡ҎԼͷεΩϧΛ਎ʹ͚ͭ·͠ΐ͏ ✦ HTMLɺCSSɺJavaScriptͷجૅ஌ࣝΛֶͼɺ ॻ͖ਐΊΒΕΔΑ͏ʹͳΔ

  4. ݚमͷྲྀΕ ✦ ݚम͸ɺҎԼͷྲྀΕʹԊͬͯਐΊ·͢ ✦ ߨٛʢ90෼ʣ ✦ HTMLͷجૅΛֶͿ ✦ CSSͷجૅΛֶͿ ✦

    JavaScriptͷجૅΛֶͿ ✦ ٳܜʢ10෼ʣ ✦ ԋशʢ60෼ʣ
  5. ͸͡ΊΔલʹ ✦ ߨٛͷ్தʹ͍͔ͭ͘ͷ࿅ श໰୊͕͋Γ·͢ ✦ ԼهͷGitϦϙδτϦΛΫ ϩʔϯͯ͠࿅श໰୊Λ࢝ΊΒ ΕΔΑ͏ʹ͓͖ͯ͠·͠ΐ ͏
 https://github.com/gaiax/

    html-css-javascript-training- 2018
  6. HTMLͷجૅΛֶͿ

  7. HTMLͱ͸

  8. HTMLͱ͸ ✦ ΢Σϒϖʔδͷߏ଄Λهड़͢ΔͨΊͷϚʔΫ ΞοϓݴޠͰ͢ ✦ HTMLʹΑͬͯهड़͞Εͨ΢Σϒϖʔδ͸ϋΠ ύʔςΩετͱݺ͹Εɺผͷ΢Σϒϖʔδͱ ؔ࿈෇͚Δ͜ͱ͕Ͱ͖·͢ HTML …

    HyperText Markup Languageͷུ
  9. ϚʔΫΞοϓ ✦ จॻʹؚ·ΕΔݟग़͠΍ஈམɺڧௐͳͲͱ ͍ͬͨߏ଄΍ҙຯΛଊ͑ͯɺίϯϐϡʔλʔ ͕ਖ਼͘͠ղऍͰ͖ΔΑ͏ҹ෇͚͢Δ͜ͱΛ ϚʔΫΞοϓͱ͍͍·͢

  10. ϋΠύʔςΩετ ✦ ैདྷͷςΩετΛ௒͑ ͨߴػೳͳςΩετΛ ϋΠύʔςΩετͱݺ ͼ·͢ ✦ ϋΠύʔϦϯΫΛར༻ ͯ͠ςΩετͱผͷς Ωετ౳Λؔ࿈෇͚Δ

    ͜ͱ͕Ͱ͖·͢ ωί ωίʹؔ͢ΔςΩετ ಈ෺ʹؔ͢ΔςΩετ ωίͷը૾ ࠷΋༗໊ͳϋΠύʔςΩετ͸World Wide Web (WWW)
  11. HTMLͷόʔδϣϯ ✦ HTMLʹ͸ɺHTML5΍HTML 4.01ɺXHTMLͳͲ͍ͭ͘ ͔ͷόʔδϣϯ͕͋Γ·͢ ✦ 2018೥5݄࣌఺Ͱ͸ɺHTML 5.2͕Ұ൪৽͍͠όʔδϣ ϯͱͯ͠W3CΑΓ࢓༷͕קࠂ͞Ε͍ͯ·͢ ✦

    ओཁϒϥ΢βʔͰ͸HTML5͕΄΅αϙʔτ͞Ε͍ͯΔ ͨΊɺࠓ೔࣌఺Ͱ͸HTML5ΛֶͿ͜ͱΛ͓קΊ͠·͢ W3C … Webٕज़ͷඪ४ԽΛਐΊΔඇӦརஂମ
  12. HTMLͷॻ͖ํ

  13. HTMLͷॻ͖ํ ✦ HTMLͰ͸ɺ΢Σϒϖʔδʹදࣔ͢Δ಺༰Λλ άͱݺ͹ΕΔ໨ҹͰғ͏͜ͱͰཁૉͱݺ͹Ε Δ෦඼ʹ͍͖ͯ͠·͢ ✦ ཁૉΛ૊Έ߹ΘͤΔ͜ͱͰ΢ΣϒϖʔδΛߏ ੒͢Δ͜ͱ͕Ͱ͖·͢

  14. Qཁૉ λάͱཁૉ ✦ λά͸ཁૉܕΛ<>ͰғΜ Ͱද͠·͢ ✦ ಺༰Λ։࢝λάͱऴྃλά ͰғΜͰϚʔΫΞοϓͨ͠ ΋ͷΛཁૉͱݺͼ·͢ ✦

    ཁૉͷ಺༰ʹ͸ଞͷཁૉΛ ؚΊΔʢೖΕࢠʣ͜ͱ͕Ͱ ͖·͢ <p> จষ </p> ։࢝λά ऴྃλά ಺༰ p͸ஈམ (paragraph) Λද͢ λά <p> ཁૉܕ ཁૉͷೖΕࢠ <p>
 <strong>…</strong>
 </p>
  15. ଐੑ ✦ ཁૉʹؔ͢Δ௥Ճ৘ ใΛଐੑͱͯ࣋ͨ͠ ͤΔ͜ͱ͕Ͱ͖·͢ ✦ ͢΂ͯͷཁૉͰڞ௨ ͳάϩʔόϧଐੑͱ ͦͷཁૉݻ༗ͷଐੑ ͕ଘࡏ͠·͢

    IUNMཁૉͷMBOHଐੑ <html lang="ja">
  16. ۭཁૉ ✦ ಺༰ͷͳ͍ཁૉΛۭ ཁૉͱݺͼ·͢ ✦ ऴྃλά͸লུ͞Ε
 ։࢝λάͷΈͰද͠ ·͢ ۭཁૉ <br>


    <img src="…"> brཁૉ͸վߦ (break) Λද͢
 imgཁૉ͸ը૾ (image) Λද͢
  17. HTMLͷجຊߏ੒ ✦ HTMLͷجຊతͳߏ੒ Λݟ͍͖ͯ·͠ΐ͏ <!DOCTYPE html> <html lang="ja"> <head> <meta

    charset="UTF-8"> <title>ϖʔδλΠτϧ</title> </head> <body> ϖʔδ಺༰ </body> </html>
  18. DOCTYPEએݴ ✦ ͲͷόʔδϣϯHTML Ͱهड़͞Ε͍ͯΔ͔ Λ๯಄Ͱએݴ͠·͢ ✦ HTML5Ͱ͸࣮࣭͓· ͡ͳ͍ͷΑ͏ͳ΋ͷ ʹͳ͍ͬͯ·͢ <!DOCTYPE

    html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ϖʔδλΠτϧ</title> </head> <body> ϖʔδ಺༰ </body> </html>
  19. htmlཁૉ ✦ Ұ൪֎ଆʹ഑ஔ͞Ε ΔཁૉͰ͢ʢϧʔτ ཁૉͱݺ͹Ε·͢ʣ ✦ ͦͷϖʔδ͕Ͳͷݴ ޠͰهड़͞Ε͍ͯΔ ͔ΛlangଐੑͰද͠ ·͢

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ϖʔδλΠτϧ</title> </head> <body> ϖʔδ಺༰ </body> </html>
  20. headཁૉ ✦ ϖʔδͷϝλσʔλ Λද͢ཁૉΛؚΊͨ ཁૉͰ͢ ✦ htmlཁૉͷ௚Լʹ1ͭ ͚ͩهड़͠·͢ <!DOCTYPE html>

    <html lang="ja"> <head> <meta charset="UTF-8"> <title>ϖʔδλΠτϧ</title> </head> <body> ϖʔδ಺༰ </body> </html>
  21. metaཁૉ ✦ ϖʔδͷ༷ʑͳϝλσʔλ Λද͢ཁૉͰ͢ ✦ ୅දతͳϝλσʔλʹϖʔ δͷจࣈίʔυ͕͋Γ·͢ ✦ charsetଐੑʹΑΔจࣈίʔ υͷࢦఆ͸headཁૉ಺ͷҰ

    ൪࠷ॳʹࢦఆ͢ΔͱΑ͍Ͱ ͠ΐ͏ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ϖʔδλΠτϧ</title> </head> <body> ϖʔδ಺༰ </body> </html>
  22. titleཁૉ ✦ ϖʔδͷλΠτϧΛ ද͢ཁૉͰ͢ ✦ ͦͷϖʔδͷ಺༰Λ ۩ମతʹදͨ͠Θ͔ Γ΍͍͢λΠτϧΛ ͚ͭΔΑ͏ʹ͠· ͠ΐ͏

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ϖʔδλΠτϧ</title> </head> <body> ϖʔδ಺༰ </body> </html>
  23. bodyཁૉ ✦ ࣮ࡍʹදࣔ͞ΕΔϖʔ δͷ಺༰ΛؚΊͨཁ ૉͰ͢ ✦ htmlཁૉͷ௚Լʹ headཁૉʹଓ͍ͯ1 ͚ͭͩهड़͠·͢ <!DOCTYPE

    html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ϖʔδλΠτϧ</title> </head> <body> ϖʔδ಺༰ </body> </html>
  24. πϦʔߏ଄ ✦ HTMLͰهड़͞Εͨϖʔδ͸ɺhtml ཁૉΛى఺ͱͨ͠ཁૉͷπϦʔߏ ଄ͱͯ͠ද͢͜ͱ͕Ͱ͖·͢ ✦ ͜ͷπϦʔߏ଄͸ɺઌͰొ৔͢Δ CSS΍JavaScriptΛ༻͍ͯཁૉΛબ ୒ɾૢ࡞͢Δ্ͰΑ͘༻͍ΒΕ· ͢

    ✦ ιʔείʔυ͔ΒπϦʔߏ଄ΛΠϝʔ δͰ͖ΔΑ͏ʹ͓ͯ͘͠ͱྑ͍Ͱ ͠ΐ͏ πϦʔߏ଄ IUNM IFBE NFUB UJUMF CPEZ ಺༰
  25. ࿅श1.1 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>{໊લ}ͷϒϩά</title> </head>

    <body> ϒϩάͷ಺༰ </body> </html> ✦ index.htmlΛΤσΟ λʔͰ։͍ͯιʔε ίʔυΛ֬ೝͯ͠Έ ·͠ΐ͏ ✦ ϒϥ΢βʔͰදࣔ͠ ͯΈ·͠ΐ͏
  26. จষͷߏ଄Խ

  27. จষΛߏ଄Խ͢Δ ✦ ϖʔδʹදࣔ͢ΔจষΛهड़͢Δࡍ͸ɺจষͷߏ଄ ʹ஫໨ͯ͠ద੾ʹϚʔΫΞοϓ͢Δ͜ͱ͕ॏཁͰ͢ ✓ จষͷ಺༰ΛΘ͔Γ΍ࣔͨ͘͢͠ݟग़͠Λ͚ͭΔ ✓ จষΛ͍͔ͭ͘ͷஈམͷू·ΓͰߏ੒͢Δ ✓ ͋Δఔ౓ͷ௕͍จষΛষ΍અʢηΫγϣϯʣ͝ͱ

    ʹ۠੾Δ ✦ ηϚϯςΟοΫͳHTMLΛ৺͕͚·͠ΐ͏ ηϚϯςΟοΫ ... ίϯϐϡʔλʹจॻͷ࣋ͭҙຯΛਖ਼͘͠ղऍͤ͞Δ͜ͱ͕Ͱ͖Δ
  28. h1ʙh6ཁૉ ✦ ݟग़͠Λද͢ཁૉͰ ͢ ✦ จষͷݟग़͠Ϩϕϧ ʹ߹Θͤͯh1͔Βॱ ൪ʹ࢖༻͠·͢ <body> <h1>େݟग़͠</h1>

    େݟग़͠ͷ಺༰ <h2>தݟग़͠</h2> தݟग़͠ͷ಺༰1 தݟग़͠ͷ಺༰2 <h3>খݟग़͠</h3> খݟग़͠ͷ಺༰ </body>
  29. pཁૉ ✦ ஈམΛද͢ཁૉͰ͢ ✦ จষΛվߦ͢Δࡍ͸ɺ ৽͍͠ஈམͱͯ͠෼ ͚ͯهड़͢ΔͱΑ͍ Ͱ͠ΐ͏ <body> <h1>େݟग़͠</h1>

    <p>େݟग़͠ͷ಺༰</p> <h2>தݟग़͠</h2> <p>தݟग़͠ͷ಺༰1</p> <p>தݟग़͠ͷ಺༰2</p> <h3>খݟग़͠</h3> <p>খݟग़͠ͷ಺༰</p> </body>
  30. sectionཁૉ ✦ จষͷষ΍અʢηΫ γϣϯʣΛද͢ཁૉ Ͱ͢ ✦ sectionཁૉͷೖΕࢠ ʹΑͬͯষ΍અͷ֊ ૚ԽΛද͠·͢ <body>

    <h1>େݟग़͠</h1> <p>େݟग़͠ͷ಺༰</p> <section> <h2>தݟग़͠</h2> <p>தݟग़͠ͷ಺༰1</p> <p>தݟग़͠ͷ಺༰2</p> <section> <h3>খݟग़͠</h3> <p>খݟग़͠ͷ಺༰</p> </section> </section> </body>
  31. ηΫγϣχϯάϧʔτ ✦ bodyཁૉ͸ͦͷจষશ ମͷηΫγϣϯʢηΫ γϣχϯάϧʔτʣͱ ͳΓ·͢ ✦ bodyཁૉͷ௚Լͷ sectionཁૉ͸লུͯ͠ ΋͔·͍·ͤΜ

    <body> <h1>େݟग़͠</h1> <p>...(಺༰)...</p> <section> <h2>தݟग़͠</h2> <p>...(಺༰)...</p> <p>...(಺༰)...</p> <section> <h3>খݟग़͠</h3> <p>...(಺༰)...</p> </section> </section> </body>
  32. จষͷΞ΢τϥΠϯ ✦ จষΛద੾ʹϚʔΫΞοϓ͢ΔͱɺηΫγϣ ϯͱݟग़͠ʹΑͬͯΞ΢τϥΠϯʢจষߏ ଄ʣ͕ܗ੒͞Ε·͢ ✦ Ξ΢τϥΠϯ͸ɺϒϥ΢βʔͰͷදࣔʹӨڹ ͢Δ͜ͱ͸͋Γ·ͤΜ͕ɺηϚϯςΟοΫͳ HTMLΛهड़͢Δ্Ͱҙࣝ͢ΔͱΑ͍Ͱ͠ΐ͏

  33. Ξ΢τϥΠϯͷྫ https://gaiax.qiita.com/k_shibuya/items/c95754cf7f7a4c49c97b

  34. ࿅श1.2 ✦ ࿅श1.1ͷHTMLͷ bodyཁૉ಺ʹɺӈʹ ࣔ͢จষΛهड़͠· ͠ΐ͏ ✦ Ξ΢τϥΠϯΛ֬ೝ ͯ͠Έ·͠ΐ͏ {໊લ}ͷϒϩά


    {໊લ}ͷϒϩάͰ͢ ɹهࣄҰཡ ɹɹ2018೥5݄10೔ͷهࣄ
 ɹɹࠓ೔͸HTMLʹֶ͍ͭͯͼ
 ɹɹ·ͨ͠ɻ
  35. ࿅श1.2 ✦ ࿅श1.1ͷHTMLͷ bodyཁૉ಺ʹɺӈʹ ࣔ͢จষΛهड़͠· ͠ΐ͏ ✦ Ξ΢τϥΠϯΛ֬ೝ ͯ͠Έ·͠ΐ͏ {໊લ}ͷϒϩά


    {໊લ}ͷϒϩάͰ͢ ɹهࣄҰཡ ɹɹ2018೥5݄10೔ͷهࣄ
 ɹɹࠓ೔͸HTMLʹֶ͍ͭͯͼ
 ɹɹ·ͨ͠ɻ େݟग़͠ ஈམ ηΫγϣϯ ηΫγϣϯ খݟग़͠ தݟग़͠ ஈམ
  36. ಛผͳηΫγϣϯ ✦ ઌ΄Ͳ঺հͨ͠sectionཁૉͷଞʹɺಛผͳҙ ຯΛ࣋ͬͨηΫγϣϯΛද͢ཁૉ͕͋Γ·͢ ✦ จষΛߏ଄Խ͢Δࡍɺ·ͣ͸ಛผͳηΫγϣ ϯ͔Ͳ͏͔ΛݟۃΊɺ֘౰͠ͳ͍৔߹͸ sectionཁૉͰද͢ͱΑ͍Ͱ͠ΐ͏

  37. articleཁૉ ✦ χϡʔεαΠτͷ1ͭͷهࣄ ΍ϒϩάهࣄͳͲɺͦͷͻͱ ·ͱ·ΓͰಠཱͨ͠ηΫγϣ ϯͰ͋Δ͜ͱΛද͢ཁૉͰ͢ ✦ ୯ମϖʔδʹ੾Γग़ͤͨΓɺ RSSϑΟʔυͳͲͰ഑৴Ͱ͖ Δ৔߹͸articleཁૉͱͳΔ৔

    ߹͕ଟ͍Ͱ͠ΐ͏ <body> <h1>େݟग़͠</h1> <p>େݟग़͠ͷ಺༰</p> <article> <h2>χϡʔεهࣄ</h2> <p>χϡʔεهࣄͷ಺༰1</p> <p>χϡʔεهࣄͷ಺༰2</p> <section> <h3>খݟग़͠</h3> <p>খݟग़͠ͷ಺༰</p> </section> </article> </body>
  38. navཁૉ ✦ ϖʔδͷओཁͳφϏήʔγϣ ϯηΫγϣϯͰ͋Δ͜ͱΛ ද͢ཁૉͰ͢ ✦ αΠτͷϦϯΫҰཡ΍ɺϖʔ δ಺ͷϦϯΫҰཡͳͲؚ͕ ·Ε·͢ ✦

    ͢΂ͯͷϦϯΫΛؚΊΔඞ ཁ͸͋Γ·ͤΜ <body> ... <nav> <ul> <li>αΠτϦϯΫ1</li> <li>αΠτϦϯΫ2</li> <li>αΠτϦϯΫ3</li> </ul> </nav> ... </body> ul, li ... ϦετͱϦετͷ߲໨Λද͢ཁૉ
  39. asideཁૉ ✦ ϝΠϯίϯςϯπ͔Β ੾Γ཭͢͜ͱ͕Ͱ͖Δ ηΫγϣϯͰ͋Δ͜ͱ Λද͢ཁૉͰ͢ ✦ ͍ΘΏΔαΠυόʔ΍ ϝΠϯهࣄ಺ͷίϥϜ ෦෼ɺิ଍৘ใͳͲ͕

    ͋ͨΓ·͢ <body> ... <article> <h2>χϡʔεهࣄ</h2> <p>χϡʔεهࣄͷ಺༰1</p> <p>χϡʔεهࣄͷ಺༰2</p> <aside> <h3>ίϥϜ</h3> <p>ίϥϜͷ಺༰</p> </aside> </article> </body>
  40. ࿅श1.3 ✦ ࿅श1.2ͷHTMLΛҎԼͷΑ͏ʹมߋ͠·͠ΐ͏ ✦ 1ͭͷهࣄΛද͢ηΫγϣϯΛarticleཁૉʹมߋ͠·͠ΐ͏ ✦ هࣄҰཡηΫγϣϯͷલʹҎԼͷ3ͭͷϦϯΫΛάϩʔόϧφϏήʔγϣϯͱͯ͠ هड़͠·͠ΐ͏ ✦ τοϓ

    ✦ ৽ணهࣄ ✦ ΧςΰϦʔ ✦ هࣄҰཡηΫγϣϯͷޙʹҎԼͷݟग़͠ͱஈམΛؚΉαΠυόʔΛهड़͠·͠ΐ͏ ✦ ݟग़͠ɿϓϩϑΟʔϧ ✦ ஈམɿ{໊લ}Ͱ͢ɻ
  41. ͦͷଞͷจষͷߏ଄Խ ✦ ઌ΄Ͳ·ͰͷηΫγϣϯҎ֎ʹ΋ɺจষͷߏ ଄Λࣔ͢ཁૉ͕ଘࡏ͠·͢ ✦ ͜ΕΒ͸Ξ΢τϥΠϯ͸ܗ੒͠·ͤΜ͕ɺจ ষʹద੾ͳҙຯ͚ͮΛ͢Δ͜ͱ͕Ͱ͖·͢

  42. headerཁૉ ✦ ௚ۙͷηΫγϣϯʹର ͢Δϔομʔʢಋೖత ͳίϯςϯπʣΛද͢ ཁૉͰ͢ ✦ ݟग़͠ͷଞʹɺϩΰ΍ φϏήʔγϣϯɺݕࡧ ϑΥʔϜͳͲ΋ؚΊΔ

    ͜ͱ͕Ͱ͖·͢ <body> <header> <h1>େݟग़͠</h1> </header> <main> <p>಺༰</p> </main> <footer> <small> ©2018 example.com </small> </footer> </body>
  43. mainཁૉ ✦ ͦͷϖʔδͷओཁͳ ಺༰Λද͢ཁૉͰ͢ ✦ ϖʔδʹ͸1ͭͷmain ཁૉͷΈهड़͢Δ͜ ͱ͕Ͱ͖·͢ <body> <header>

    <h1>େݟग़͠</h1> </header> <main> <p>಺༰</p> </main> <footer> <small> ©2018 example.com </small> </footer> </body> small ... ஶ࡞ݖදهΛද͢ཁૉ
  44. footerཁૉ ✦ ௚ۙͷηΫγϣϯʹର ͢ΔϑολʔΛද͢ཁ ૉͰ͢ ✦ ϑολʔʹ͸ɺͦͷη Ϋγϣϯͷஶ࡞ऀʹؔ ͢Δ৘ใ΍ؔ࿈υΩϡ ϝϯτ΁ͷϦϯΫ౳Λ

    ؚΊΔ͜ͱ͕Ͱ͖·͢ <body> <header> <h1>େݟग़͠</h1> </header> <main> <p>಺༰</p> </main> <footer> <small> ©2018 example.com </small> </footer> </body>
  45. ࿅श1-4 ✦ ࿅श1-3ͷHTMLΛҎԼͷΑ͏ʹมߋ͠·͠ΐ͏ ✦ େݟग़͔͠ΒάϩʔόϧφϏήʔγϣϯ·ͰΛϖʔδ શମͷϔομʔͱͯ͠هड़͠·͠ΐ͏ ✦ هࣄҰཡΛओཁͳ಺༰ͱͯ͠هड़͠·͠ΐ͏ ✦ ҎԼͷίϐʔϥΠτΛϖʔδશମͷϑολʔͱͯ͠ه

    ड़͠·͠ΐ͏ ✦ ίϐʔϥΠτɿ©2018 {໊લ}
  46. Α͘࢖ΘΕΔཁૉ

  47. Α͘࢖ΘΕΔཁૉ ✦ ϋΠύʔϦϯΫΛද͢ཁૉ ✦ a ✦ ը૾ͷຒΊࠐΈΛද͢ཁૉ ✦ img ✦

    ϦετΛද͢ཁૉ ✦ ul, ol, li ✦ දܗࣜͷσʔλΛද͢ཁૉ ✦ table, tr, th, td ✦ αʔόʔʹ৘ใΛૹ৴͢ΔͨΊͷϑΥʔϜΛද͢ཁૉ ✦ form, input, select, textarea
  48. ίϯςϯπϞσϧ ✦ HTML5Ͱ͸ɺͲͷཁૉʹଞͷཁૉΛؚΊΒΕΔ͔͕ఆ ٛ͞Ε͓ͯΓɺ͜ΕΛίϯςϯπϞσϧͱݺͼ·͢ ✦ จষΛߏ଄Խ͍ͯ͘͠ࡍ͸ɺίϯςϯπϞσϧʹ஫໨͠ ͯਖ਼͍͠ϚʔΫΞοϓΛ৺͕͚·͠ΐ͏ ✦ ࢀߟɿHTML5 ίϯςϯπϞσϧ

    ΨΠυ
 https://webgoto.net/html5/
  49. CSSͷجૅΛֶͿ

  50. CSSͱ͸

  51. CSSͱ͸ ✦ ΢Σϒϖʔδͷݟͨ໨ʢσβΠϯʣΛهड़͢ ΔͨΊͷελΠϧγʔτݴޠͰ͢ ✦ HTML͕ϖʔδΛߏ଄Խ͢Δͷʹର͠ɺCSS͸ ͲͷΑ͏ʹը໘্ʹදࣔ͢Δ͔Λࢦࣔ͠·͢ CSS … Cascading

    Style Sheetsͷུ
  52. CSSͷόʔδϣϯ ✦ CSSʹ΋ɺHTMLͱಉ༷ʹCSS1΍CSS 2.1ɺCSS3ͳ Ͳ͍͔ͭ͘ͷόʔδϣϯ͕͋Γ·͢ ✦ ͨͩ͠ɺ࠷৽൛Ͱ͋ΔCSS3ͷରԠঢ়گ͸ओཁͳϒϥ ΢βʔͰ΋·ͪ·ͪͳͨΊɺ࢖༻͢Δࡍ͸஫ҙ͢Δ ඞཁ͕͋Γ·͢ ✦

    جຊతͳߏจ΍ߟ͑ํ͸֤όʔδϣϯͰมΘΔ͜ͱ ͸͋Γ·ͤΜ
  53. CSSͷॻ͖ํ

  54. ηϨΫλʔͱϓϩύςΟͱ஋ ✦ σβΠϯͷద༻ઌΛηϨΫ λʔͰࢦఆ͠·͢ ✦ ԿͷσβΠϯΛద༻͢Δ͔ ΛϓϩύςΟͰࢦఆ͠· ͢ ✦ σβΠϯΛͲͷΑ͏ʹద༻

    ͢Δ͔Λ஋Ͱࢦఆ͠·͢ h1 { color: red; } ηϨΫλʔ ϓϩύςΟ ஋
  55. ϧʔϧͱએݴ ✦ ϓϩύςΟͱ஋ͷ૊Έ߹Θ ͤΛએݴͱݺͼ·͢ ✦ એݴ͸{ }Ͱද͞Εͨએݴϒ ϩοΫͷதʹෳ਺ఆٛͰ͖ ·͢ ✦

    ηϨΫλʔͱએݴϒϩοΫ ͷ૊Έ߹ΘͤΛϧʔϧͱݺ ͼ·͢ ϧʔϧ h1 {
 padding: 8px;
 color: red;
 font-size: 16px;
 } એݴ એݴ એݴ
  56. ཁૉܕηϨΫλʔ ✦ ηϨΫλʔʹ͸༷ʑͳࢦఆํ ๏͕͋Γ·͢ ✦ جຊతͳηϨΫλʔͷ1ͭʹɺ HTMLͷཁૉܕΛࢦఆ͢Δཁૉ ܕηϨΫλʔ͕͋Γ·͢ ✦ ࢦఆ͞ΕͨཁૉܕʹҰக͢Δ

    ͢΂ͯͷཁૉΛద༻ઌͱͯ͠ બ୒͠·͢ ཁૉܕηϨΫλʔ h1 {
 color: red;
 } ཁૉܕ
  57. ΫϥεηϨΫλʔͱIDηϨΫλʔ ✦ ΫϥεηϨΫλʔ͸class ଐੑʹΑͬͯࢦఆ͞ΕͨΫ ϥε໊Λ࣋ͭ͢΂ͯͷཁૉ Λબ୒͠·͢ ✦ IDηϨΫλʔ΋ಉ༷ʹidଐ ੑʹΑͬͯࢦఆ͞ΕͨIDΛ ࣋ͭཁૉΛબ୒͠·͢

    ΫϥεηϨΫλʔ .heading {
 color: red;
 } Ϋϥε໊ *%ηϨΫλʔ #page-heading {
 color: red;
 } *%
  58. classଐੑͱidଐੑ ✦ classଐੑͱidଐੑ͸͢΂ͯͷཁૉͰ ར༻Ͱ͖ΔάϩʔόϧଐੑͰ͋Γɺ ཁૉʹΫϥε໊΍IDΛࢦఆ͢Δ͜ͱ ͕Ͱ͖·͢ ✦ ͜ΕΒ͸͍ͣΕ΋CSS΍JavaScript ͰཁૉΛࣝผɾબ୒͢Δࡍʹར༻͢ ΔଐੑͰ͢

    ✦ ͨͩ͠ɺidଐੑʹΑͬͯ༩͑ͨID͸ ϖʔδ಺Ͱ1͚ͭͩʹͳΔΑ͏ʹؾ Λ͚ͭ·͠ΐ͏ <h1 class="heading"> <h1 id="page-heading"> Ϋϥε໊ *%
  59. ٙࣅΫϥε ✦ ٙࣅΫϥε͸ࠓ·ͰͷηϨΫλʔ ʹ෇Ճ͢ΔΩʔϫʔυͰ͢ ✦ ηϨΫλʔʹΑͬͯબ୒͞Εͨ ཁૉͷ͏ͪɺٙࣅΫϥεʹΑͬ ͯࢦఆ͞Εͨಛఆͷঢ়ଶʹ͋Δ ཁૉͷΈΛબ୒͠·͢ ✦

    first-child ... Ұ൪ઌ಄ͷཁૉ ✦ hover ... Ϛ΢εΧʔιϧ͕ॏ ͳ͍ͬͯΔཁૉ ٙࣅΫϥε h1:hover {
 color: red;
 } ٙࣅΫϥε
  60. ͦͷଞͷηϨΫλʔ ✦ ͦͷଞʹ΋༷ʑͳηϨΫλʔ΍Ωʔϫʔυ͕͋Γ·͢ ✦ શশηϨΫλʔ ✦ HTML্ͷ͢΂ͯͷཁૉΛબ୒͠·͢ ✦ ଐੑηϨΫλʔ ✦

    ࢦఆ͞Εͨଐੑ΍ͦͷ஋ʹج͍ͮͯཁૉΛબ୒͠·͢ ✦ ٙࣅཁૉ ✦ બ୒ͨ͠ཁૉͷҰ෦෼ͷΈΛબ୒͢ΔΩʔϫʔυͰ͢
  61. ෳ਺ηϨΫλʔͱ݁߹ࢠ ✦ ηϨΫλʔΛΧϯϚ۠੾Γ Ͱෳ਺ࢦఆͯ͠·ͱΊͯએ ݴϒϩοΫΛࢦఆ͢Δ͜ͱ ͕Ͱ͖·͢ ✦ ·ͨɺηϨΫλʔಉ࢜Λ݁ ߹ࢠͰ૊Έ߹ΘͤΔ͜ͱ ͰɺಛఆͷηϨΫλʔͷΈ

    બ୒͢Δ͜ͱ͕Ͱ͖ΔΑ͏ ʹͳΓ·͢ ෳ਺ηϨΫλʔͷࢦఆ h1, h2 { ... } BSUJDMFཁૉͷࢠଙཁૉͱͳΔIཁૉ article h1 { ... } BSUJDMFཁૉͷࢠཁૉͱͳΔIཁૉ article > h1 { ... } IཁૉͷܑఋཁૉͰ௚ޙʹ͋ΔIཁૉ h1 + h2 { ... }
  62. Χεέʔυͱܧঝ ✦ ෳ਺ͷϧʔϧ͕1ཁૉʹରͯ͠ҟͳΔσβΠϯΛద༻ ͢ΔࡍɺΧεέʔυͱݺ͹ΕΔํ๏Ͱ༏ઌॱҐ͕ܾ ·Γ·͢ ✦ ༏ઌॱҐ͸ɺCSSͷهड़৔ॴ΍ηϨΫλͷࢦఆํ๏ ͳͲ͔Βܾ·Γ·͢ ✦ ·ͨɺจࣈαΠζ΍จࣈ৭ͳͲͷҰ෦ͷϓϩύςΟ

    ͸਌ཁૉ͔Βࢠཁૉ΁ͱܧঝ͞Ε·͢
  63. هड़͢Δ৔ॴ ✦ CSS͸ҎԼͷ3ՕॴͰهड़͢Δ͜ͱ͕Ͱ͖·͢ 1.linkཁૉͰࢦఆ͞ΕͨCSSϑΝΠϧ 2.headཁૉ಺ͷstyleཁૉͷ಺༰ 3.֤ཁૉͷstyleଐੑͷ஋ ✦ ͜ͷݚमͰ͸ɺ1൪ͷํ๏Ͱهड़͍͖ͯ͠·͢

  64. ࿅श2-1 body { margin: 0; background-color: #f6f6f6; color: #333; font-size:

    16px; } ✦ style.cssΛΤσΟλʔ Ͱ։͍ͯιʔείʔυ Λ֬ೝͯ͠Έ·͠ΐ͏ ✦ ࿅श1-4ͷHTMLʹӈͷ linkཁૉΛهड़ͯ͠CSS ΛಡΈࠐΈ·͠ΐ͏ <head> ... <link rel="stylesheet" href="style.css"> </head> background-colorϓϩύςΟ͸എܠ৭ɺcolorϓϩύςΟ͸จࣈ৭ɺfont-size͸จࣈαΠζΛมߋ͢Δ
  65. ཁૉͱϘοΫε

  66. ϘοΫε ✦ ϒϥ΢β͸HTMLͷཁૉΛը໘্ʹදࣔ͢Δ ࡍɺCSSͷϘοΫεϞσϧʹج͍ͮͯͦΕͧΕ ͷཁૉΛ௕ํܗͷϘοΫεͱͯ͠දࣔ͠·͢ ✦ ͦΕͧΕͷϘοΫεʹରͯ͠෯΍ߴ͞ɺ༨ നɺ࿮ઢɺഎܠͳͲ༷ʑͳελΠϧΛࢦఆ͢ Δ͜ͱ͕Ͱ͖·͢

  67. ϘοΫεϞσϧ ✦ CSSͷϘοΫεϞσϧ͸ӈਤͷ4ͭͷྖ ҬͰߏ੒͞Ε͍ͯ·͢ ✦ ཁૉͷ಺༰ʹ࿮ઢΛ͚ͭΔ৔߹͸border ϓϩύςΟͰϘʔμʔྖҬΛࢦఆ͠·͢ ✦ ཁૉͷ࿮ઢͷ֎ଆʹ༨നΛऔΔ৔߹͸ marginϓϩύςΟͰϚʔδϯྖҬΛࢦఆ

    ͠·͢ ✦ ࿮ઢͱ಺༰ͱͷؒʹ༨നΛऔΔ৔߹͸ paddingϓϩύςΟͰύσΟϯάྖҬΛ ࢦఆ͠·͢ ϚʔδϯྖҬ ཁૉͷ֎ଆͷ༨ന ϘʔμʔྖҬ ཁૉͷ࿮ઢ ύσΟϯάྖҬ ཁૉͷ಺ଆͷ༨ന ίϯςϯπྖҬ
  ཁૉͷ಺༰
  68. ཁૉͷ෯ͱߴ͞ ✦ ϘοΫεʹ͸෯΍ߴ͞΋ࢦఆ͢ Δ͜ͱ͕Ͱ͖·͢ ✦ ෯͸widthϓϩύςΟͰɺߴ͞ ͸heightϓϩύςΟͰͦΕͧΕ ࢦఆͰ͖·͢ ✦ ෯ͱߴ͞ΛϘοΫεϞσϧͷͲ

    ͷ෦෼ͱͯ͠ఆٛ͢Δ͔͸ɺ box-sizingϓϩύςΟͷࢦఆʹ Αܾͬͯ·Γ·͢ ϚʔδϯྖҬ ཁૉͷ֎ଆͷ༨ന ϘʔμʔྖҬ ཁૉͷ࿮ઢ ύσΟϯάྖҬ ཁૉͷ಺ଆͷ༨ന ίϯςϯπྖҬ
  ཁૉͷ಺༰
  69. box-sizing: content-box; ✦ box-sizingϓϩύςΟʹ content-boxΛࢦఆͨ͠৔߹ɺ ࢦఆͨ͠෯ͱߴ͞͸ίϯςϯ πྖҬͷΈʹద༻͞Ε·͢ ✦ ྫ͑͹ɺwidth: 100px;ͱ

    padding-left: 10px;Λࢦఆ͠ ͨ৔߹ɺϘοΫεશମͷ෯͸ 110pxͱͳΓ·͢ ϚʔδϯྖҬ ཁૉͷ֎ଆͷ༨ന ϘʔμʔྖҬ ཁૉͷ࿮ઢ ύσΟϯάྖҬ ཁૉͷ಺ଆͷ༨ന ίϯςϯπྖҬ
  ཁૉͷ಺༰ ෯ ߴ͞
  70. box-sizing: border-box; ✦ box-sizingϓϩύςΟʹ border-box Λࢦఆͨ͠৔߹ɺࢦఆͨ͠෯ͱߴ͞͸ ϘʔμʔྖҬ·Ͱద༻͞Ε·͢ ✦ ྫ͑͹ɺwidth: 100px;ͱpadding-

    left: 10px;Λࢦఆͨ͠৔߹ɺύσΟϯ άྖҬ͸෯ʹؚ·Εͯܭࢉ͞ΕΔͨΊɺ ϘοΫεશମͷ෯͸100pxͱͳΓ·͢ ✦ CSSͰϨΠΞ΢τΛ૊Ή৔߹ɺ border-boxΛࢦఆͨ͠ํ͕౎߹͕ྑ ͍͜ͱ͕ଟ͍Ͱ͠ΐ͏ ϚʔδϯྖҬ ཁૉͷ֎ଆͷ༨ന ϘʔμʔྖҬ ཁૉͷ࿮ઢ ύσΟϯάྖҬ ཁૉͷ಺ଆͷ༨ന ίϯςϯπྖҬ
  ཁૉͷ಺༰ ෯ ߴ͞
  71. ཁૉͷഎܠ ✦ ϘοΫεʹ͸എܠ৭ ΍എܠը૾΋ࢦఆ͢ Δ͜ͱ͕Ͱ͖·͢ ✦ ࢦఆͨ͠എܠ͸ύ σΟϯάྖҬ·Ͱద ༻͞Ε·͢ ϚʔδϯྖҬ

    ཁૉͷ֎ଆͷ༨ന ϘʔμʔྖҬ ཁૉͷ࿮ઢ ύσΟϯάྖҬ ཁૉͷ಺ଆͷ༨ന ίϯςϯπྖҬ
  ཁૉͷ಺༰
  72. ཁૉͷάϧʔϓԽ ✦ ݟͨ໨΍σβΠϯΛద༻͢Δࡍɺ จॻߏ଄ͱ͸ؔ܎ͳ͘ཁૉΛά ϧʔϓԽ͍͕ͨ࣌͋͠Γ·͢ ✦ ͦͷࡍ͸ɺdivཁૉͷ಺༰ͱ͠ ؚͯΊΔ͜ͱͰάϧʔϓԽ͢Δ ͜ͱ͕Ͱ͖·͢ ✦

    ଞʹద੾ͳҙຯΛද͢ཁૉ͕͋ Δ৔߹͸ͦͪΒΛ࢖༻͠·͠ΐ ͏ <body> <div class="some-section"> <section> ... </section> <section> ... </section> </div> <section> ... </section> </body>
  73. ࿅श2-2 ✦ ࿅श2-1ͷHTMLΛҎԼͷΑ͏ʹσβΠϯ͠·͠ΐ͏ ✦ ϔομʔ ✦ จࣈ৭Λ#fffʹ͠·͠ΐ͏ ✦ എܠ৭Λ#002654ʹ͠·͠ΐ͏ ✦

    ༨നΛ্Լʹ16pxɺࠨӈʹ64pxऔΓ·͠ΐ͏ ✦ ϔομʔͷେݟग़͠ ✦ จࣈαΠζΛ1.5remʹ͠·͠ΐ͏ ✦ ίϯςϯπʢهࣄҰཡηΫγϣϯͱαΠυόʔʣ ✦ ༨നΛ্Լʹ32pxɺࠨӈʹ64pxऔΓ·͠ΐ͏ ✦ ϑολʔ ✦ จࣈ৭Λ#fffʹ͠·͠ΐ͏ ✦ എܠ৭Λ#444ʹ͠·͠ΐ͏ ✦ ༨നΛ্Լʹ16pxɺࠨӈʹ64pxऔΓ·͠ΐ͏
  74. ϘοΫεͷछྨ ✦ ϘοΫεʹ͸͍͔ͭ͘ͷछྨ͕͋Γɺཁૉຖʹॳ ظ஋͕ܾ·͍ͬͯ·͢ ✦ blockʢϒϩοΫϘοΫεʣ ✦ ্͔ΒԼ΁ॎํ޲ʹ഑ஔ͞ΕΔ ✦ ϘοΫεͷલޙʹඞͣվߦ͕ೖΔ

    ✦ inlineʢΠϯϥΠϯϘοΫεʣ ✦ ࠨ͔Βӈ΁ԣํ޲ʹ഑ஔ͞ΕΔ ✦ ෯ɾߴ͞ɾ্ԼͷϚʔδϯΛࢦఆͰ͖ͳ ͍ ✦ none ✦ දࣔ͞Εͳ͍ ✦ ϒϩοΫͷछྨ͸displayϓϩύςΟʹΑͬͯࢦ ఆ͢Δ͜ͱ΋Ͱ͖·͢ ϒϩοΫϘοΫε ϒϩοΫϘοΫε ϒϩοΫϘοΫε ΠϯϥΠϯϘοΫε ΠϯϥΠ ΠϯϥΠϯϘοΫε ϯϘοΫε ΠϯϥΠϯϘοΫε ΠϯϥΠϯϘοΫε
  75. ࿅श2-3 ✦ ࿅श2-2ͷHTMLΛҎԼͷΑ͏ʹσ βΠϯ͠·͠ΐ͏ ✦ άϩʔόϧφϏͷulཁૉ ✦ ΠϯϥΠϯϘοΫεʹ͠·͠ΐ ͏ ✦

    άϩʔόϧφϏͷliཁૉ ✦ ΠϯϥΠϯϘοΫεʹ͠·͠ΐ ͏ ✦ ༨നΛࠨʹ32pxऔΓ·͠ΐ ͏
  76. Ϛʔδϯͷ૬ࡴ ✦ ͍͔ͭ͘ͷ৚݅ԼͰ͸ɺϘοΫε ʹࢦఆ্ͨ͠ԼͷϚʔδϯ͸૬ࡴ ͞ΕΔ͜ͱ͕͋Γ·͢ ✦ ྫ͑͹ྡ઀͢Δ2ͭͷϘοΫε͕ ଘࡏ͢Δ৔߹ɺͦΕͧΕʹࢦఆ͠ ্ͨԼͷϚʔδϯ͸૬ࡴ͞Εɺେ ͖͍Ϛʔδϯ͕༗ޮͱͳΓ·͢

    ✦ ϘοΫεΛѻ͏্Ͱ͓֮͑ͯ͘ͱ ͍͍Ͱ͠ΐ͏ ্ԼʹϚʔδϯΛQY ্ԼʹϚʔδϯΛQY margin-bottom: 10px; margin-top: 30px; margin-top: 10px; margin-bottom: 30px;
  77. ϘοΫεͷϨΠΞ΢τ

  78. ϘοΫεͷϨΠΞ΢τ ✦ CSSͰ͸ෳ਺ͷϘοΫεΛ૊Έ߹Θͤͯ഑ஔ͢Δ͜ͱ Ͱɺஈ૊ΈͳͲͷϨΠΞ΢τΛ࡞Γ·͢ ✦ ࠷ۙͰ͸ɺैདྷͱൺ΂ͯΑΓ௚ײతͰॊೈͳflexbox Λ༻͍ͯϨΠΞ΢τΛ࡞͍ͬͯ͘͜ͱ͕ଟ͘ͳ͖ͬͯ ·ͨ͠ ✦ ओཁϒϥ΢βʔ΋΄΅αϙʔτ͍ͯ͠ΔͨΊɺࠓ೔࣌

    ఺Ͱ͸flexboxΛར༻͢Δ͜ͱΛ͓͢͢Ί͠·͢
  79. flexbox ✦ flexboxΛ༻͍ͯϨΠΞ΢τΛ࡞੒͢Δࡍɺ flexίϯςφͱflexΞΠςϜͷ2ͭͷཁૉ͕ ొ৔͠·͢ ✦ ϨΠΞ΢τΛఆ͍ٛͨ͠ෳ਺ͷϘοΫε͕ ͋Δ৔߹ɺͦΕΒͷཁૉΛͦΕͧΕflexΞ ΠςϜͱ͠·͢ ✦

    ͦͯ͠ɺflexΞΠςϜΛؚΉ਌ཁૉΛflexί ϯςφͱ͠·͢ ✦ flexboxͰ͸ɺflexίϯςφͷதͰflexΞΠ ςϜͷҐஔ΍ฒͼΛࢦఆͯ͠ϨΠΞ΢τΛ ࡞͍ͬͯ͘͜ͱʹͳΓ·͢ ϘοΫεͷ਌ཁૉ ϘοΫε ϘοΫε ϘοΫε qFYίϯςφ qFYΞΠςϜ qFYΞΠςϜ qFYΞΠςϜ
  80. display: flex; ✦ ਌ཁૉʹରͯ͠ display: flex; Λࢦఆ͢Δ͜ͱͰ flexίϯςφʹ͢Δ͜ͱ ͕Ͱ͖·͢ ✦

    ·ͨɺflexίϯςφͷࢠ ཁૉ͸ࣗಈతʹflexΞΠ ςϜʹͳΓ·͢ qFYίϯςφ qFY
 ΞΠςϜ qFY
 ΞΠςϜ qFY
 ΞΠςϜ EJTQMBZqFY
  81. ओ࣠ͱަࠩ࣠ ✦ flexίϯςφʹ͸ओ࣠ͱަࠩ࣠ͷ 2ͭͷ͕࣠͋Γ·͢ ✦ flexΞΠςϜ͸ओ࣠ʹԊͬͯฒ΂ ͯ഑ஔ͞ΕɺݸʑͷflexΞΠςϜ ͸ަ্ࠩ࣠ͷҐஔΛࢦఆ͢Δ͜ͱ ͕Ͱ͖·͢ ✦

    flexboxͰ͸ɺσϑΥϧτͰओ࣠ ͕ਫฏͳͨΊɺ֤ϘοΫε͸ԣฒ ͼͰදࣔ͞Ε·͢ qFYίϯςφ qFY
 ΞΠςϜ qFY
 ΞΠςϜ qFY
 ΞΠςϜ ओ࣠ ަࠩ࣠
  82. ࿅श2-4 ✦ ࿅श2-3ͷHTMLΛҎԼͷ Α͏ʹσβΠϯ͠·͠ΐ ͏ ✦ ϔομʔͷେݟग़͠ɺ ঺հจɺάϩʔόϧφ Ϗήʔγϣϯ ✦

    ԣฒͼʹ͠·͠ΐ͏ ✦ ༨നΛ0ʹ͠·͠ΐ͏
  83. flexΞΠςϜΛ৳͹͢ ✦ flexΞΠςϜΛओ࣠ʹԊͬͯ ഑ஔͨ͠ࡍɺflexίϯςφʹ ༨ന͕͋Δ৔߹͸flexΞΠς ϜΛ৳͹͢͜ͱ͕Ͱ͖·͢ ✦ ࢦఆํ๏͸ෳ਺͋Γ·͕͢ɺ 1ͭ͸৳͹͍ͨ͠flexΞΠς Ϝʹ

    flex: auto; Λࢦఆ͢Δ ͜ͱͰ৳͹͢͜ͱ͕Ͱ͖·͢ qFYίϯςφ qFY
 ΞΠςϜ qFY
 ΞΠςϜ qFYBVUP qFY
 ΞΠςϜ qFY
 ΞΠςϜ qFY
 ΞΠςϜ qFY
 ΞΠςϜ
  84. ަࠩ࣠ͷҐஔΛἧ͑Δ ✦ flexίϯςφͷalign-itemsϓ ϩύςΟΛࢦఆ͢Δ͜ͱͰ flexΞΠςϜΛަࠩ࣠ʹԊͬͯ ҐஔΛἧ͑Δ͜ͱ͕Ͱ͖·͢ ✦ ·ͨɺݸʑͷflexΞΠςϜͷ align-selfϓϩύςΟΛࢦఆ͢ Δ͜ͱͰݸผʹҐஔΛࢦఆ͢

    Δ͜ͱ΋ՄೳͰ͢ qFYίϯςφ qFY
 ΞΠςϜ qFY
 ΞΠςϜ qFY
 ΞΠςϜ BMJHOJUFNTDFOUFS BMJHOTFMGFOE
  85. ࿅श2-5 ✦ ࿅श2-4ͷHTMLΛҎԼͷΑ͏ʹσβΠϯ ͠·͠ΐ͏ ✦ ϔομʔ ✦ ֤flexΞΠςϜΛަࠩ࣠ʹԊͬͯ baselineͰἧ͑·͠ΐ͏ ✦

    ϔομʔͷ঺հจ ✦ ԣʹ࠷େ·Ͱ৳͹͠·͠ΐ͏ ✦ ༨നΛࠨʹ16pxऔΓ·͠ΐ͏ ✦ ϔομʔͷάϩʔόϧφϏήʔγϣϯ ✦ ަࠩ࣠ʹԊͬͯcenterͰἧ͑· ͠ΐ͏
  86. ओ࣠ͱަࠩ࣠ΛೖΕସ͑Δ ✦ flex-directionϓϩύςΟͰओ ࣠ͷํ޲Λࢦఆ͢Δ͜ͱͰओ ࣠ͱަࠩ࣠ΛೖΕସ͑Δ͜ͱ ͕Ͱ͖·͢ ✦ rowͷ৔߹ɺओ࣠ͷํ޲͸ਫ ฏʹͳΓ·͢ʢσϑΥϧτʣ ✦

    columnͷ৔߹ɺओ࣠ͷํ޲ ͸ਨ௚ʹͳΓ·͢ qFYίϯςφ ओ࣠ ަࠩ࣠ qFYEJSFDUJPOSPX
  87. ओ࣠ͱަࠩ࣠ΛೖΕସ͑Δ ✦ flex-directionϓϩύςΟͰओ ࣠ͷํ޲Λࢦఆ͢Δ͜ͱͰओ ࣠ͱަࠩ࣠ΛೖΕସ͑Δ͜ͱ ͕Ͱ͖·͢ ✦ rowͷ৔߹ɺओ࣠ͷํ޲͸ਫ ฏʹͳΓ·͢ʢσϑΥϧτʣ ✦

    columnͷ৔߹ɺओ࣠ͷํ޲ ͸ਨ௚ʹͳΓ·͢ qFYίϯςφ ަࠩ࣠ ओ࣠ qFYEJSFDUJPODPMVNO
  88. flexboxͷೖΕࢠ ✦ flexbox͸ೖΕࢠʹ͢Δ͜ͱ͕ Ͱ͖·͢ ✦ flexΞΠςϜ಺ͷཁૉ΍flexΞ ΠςϜࣗମΛผͷflexίϯςφ ͱͯ͠ࢦఆ͢Δ͜ͱ͕Ͱ͖·͢ ✦ ͜ΕʹΑΓɺෳࡶͳϨΠΞ΢τ

    ΋γϯϓϧʹهड़͢Δ͜ͱ͕Ͱ ͖·͢ qFYίϯςφ qFYΞΠςϜ qFYΞΠςϜ͔ͭqFYίϯςφ qFYΞΠςϜ qFY
 ΞΠςϜ qFYΞΠςϜ qFY
 ΞΠςϜ EJTQMBZqFY EJTQMBZqFY
  89. ࿅श2-6 ✦ ࿅श2-5ͷHTMLΛҎԼͷΑ͏ʹσβΠϯ͠·͠ΐ͏ ✦ ϔομʔͱίϯςϯπͱϑολʔ ✦ flexΞΠςϜͱͯ͠վΊͯॎʹฒ΂·͠ΐ͏ ✦ ίϯςϯπͷओཁͳ಺༰ͱαΠυόʔ ✦

    ԣฒͼʹ͠·͠ΐ͏ ✦ ओཁͳ಺༰ͱαΠυόʔͷؒʹ༨നΛ16pxऔΓ· ͠ΐ͏ ✦ ίϯςϯπͷओཁͳ಺༰ ✦ ԣʹ࠷େ·Ͱ৳͹͠·͠ΐ͏ ✦ എܠ৭Λ#fffʹ͠·͠ΐ͏ ✦ ༨നΛ্Լࠨӈʹ16pxऔΓ·͠ΐ͏ ✦ border-radius: 8px; Λࢦఆ͠·͠ΐ͏ ✦ ίϯςϯπͷαΠυόʔ ✦ എܠ৭Λ#fffʹ͠·͠ΐ͏ ✦ ༨നΛ্Լࠨӈʹ16pxऔΓ·͠ΐ͏ ✦ border-radius: 8px; Λࢦఆ͠·͠ΐ͏ border-radius ... ࿮ઢͷ࢛۱ͷ֯Λؙ͘͢Δ
  90. εςΟοΩʔϑολʔ ✦ ϖʔδͷ಺༰͕গͳ͍৔߹Ͱ΋ϖʔ δͷԼ෦ʹݻఆ͞Ε͍ͯΔϑολʔ ΛεςΟοΩʔϑολʔͱݺͼ·͢ ✦ flexboxΛ༻͍Ε͹εςΟοΩʔ ϑολʔ΋γϯϓϧʹදݱ͢Δ͜ͱ ͕ՄೳͰ͢ ✦

    ͨͩ͠ɺflexίϯςφʢbodyʣͷ࠷ খͷߴ͞Λmin-heightϓϩύςΟͰ 100vhʹࢦఆ͠ͳ͚Ε͹ͳΓ·ͤΜ qFYίϯςφ CPEZ qFYΞΠςϜ ϔομʔ qFYΞΠςϜ ಺༰ qFYΞΠςϜ ϑολʔ qFYBVUP NJOIFJHIUWI vh ... ϒϥ΢βͷදࣔྖҬʢviewportʣͷߴ͞Ͱ͋Γɺ1vh͸ߴ͞1%ʹ૬౰͢Δ
  91. ࿅श2-7 ✦ ࿅श2-6ͷHTMLΛҎ ԼͷΑ͏ʹσβΠϯ ͠·͠ΐ͏ ✦ ϑολʔ ✦ εςΟοΩʔϑο λʔʹ͠·͠ΐ

    ͏
  92. Α͘࢖ΘΕΔϓϩύςΟ

  93. Α͘࢖ΘΕΔϓϩύςΟ ✦ ϘοΫεͷ࿮ઢͷ࢛۱ͷ֯Λؙ͘͢Δ ✦ border-radius ✦ ϘοΫε͔Β͸Έग़ͨ಺༰ͷදࣔํ๏Λࢦఆ͢Δ ✦ overflow ✦

    ϘοΫεͷҐஔΛઈର|૬ର࠲ඪͰࢦఆ͢Δ ✦ position, top, right, bottom, left, z-index ✦ ϘοΫε಺ͷΠϯϥΠϯϘοΫεͷจࣈدͤΛࢦఆ͢Δ ✦ text-align ✦ ϘοΫεͷಁ໌౓Λࢦఆ͢Δ ✦ opacity ✦ ϘοΫεʹӨΛ͚ͭΔ ✦ box-shadow
  94. JavaScriptͷجૅΛֶͿ

  95. JavaScriptͱ͸

  96. JavaScriptͱ͸ ✦ ΢ΣϒϖʔδͷΠϯλϥΫςΟϒͳૢ࡞Λ࣮ݱ͢ΔͨΊͷϓϩά ϥϛϯάݴޠͰ͢ ✦ ࠷ۙͰ͸্ه༻్ʹͱͲ·Βͣɺ༷ʑͳ؀ڥͰ࣮ߦ͞ΕΔݴޠͱ ͳ͍ͬͯ·͢ ✦ ϒϥ΢βʔ্Ͱ࣮ߦ͞ΕΔJavaScript ✦

    αʔόʔ্Ͱ࣮ߦ͞ΕΔJavaScriptʢNode.jsͳͲʣ ✦ Ϋϥ΢υͰ࣮ߦ͞ΕΔJavaScriptʢGoogle Apps ScriptͳͲʣ ✦ ͜ͷݚमͰ͸ɺϒϥ΢βʔ্Ͱ࣮ߦ͞ΕΔJavaScriptΛѻ͍·͢
  97. JavaScriptͷόʔδϣϯ ✦ JavaScriptͷඪ४࢓༷͸ECMAScriptͱݺ͹Ε͓ͯΓɺ ࠓ೔Ͱ͸ຖ೥όʔδϣϯ͕վగ͞ΕΔΑ͏ʹͳΓ·ͨ͠ ✦ ࠓ೔࣌఺Ͱ͸ECMAScript 2017͕࠷৽ͱͳΓ·͕͢ɺओ ཁͳϒϥ΢βʔͰ΋ରԠঢ়گ͸·ͪ·ͪͰ͢ ✦ ݱ࣌఺Ͱ͸ɺ࢖༻͢Δߏจɾػೳ͕ରԠ͍ͯ͠Δ͔ৗʹ

    ֬ೝͭͭ͠ɺ৔߹ʹΑͬͯ͸τϥϯεύΠϥʔͳͲΛར ༻͢Δͷ͕޷·͍͠Ͱ͠ΐ͏ τϥϯεύΠϥʔ ... ͜͜Ͱ͸ECMAScriptͷ࠷৽όʔδϣϯͷߏจ͔Βաڈόʔδϣϯͷίʔυʹม׵͢Δ͜ͱΛࢦ͢
  98. JavaScriptͷॻ͖ํ

  99. جຊతͳߏจ ✦ JavaScriptͷجຊతͳߏจʹ͍ͭͯ͸͜͜Ͱ͸ ׂѪ͠·͢ ✦ ΑΓৄ͘͠஌Γ͍ͨํ͸ɺMDNͷJavaScript ΨΠυΛಡΈਐΊ·͠ΐ͏ ✦ https://developer.mozilla.org/ja/docs/ Web/JavaScript/Guide

  100. ΦϒδΣΫτࢦ޲ͱϓϩτλΠϓ ✦ JavaScript͸͍ΘΏΔΫϥεϕʔεͳݴޠͰ͸͋Γ·ͤΜ ✦ ͦͷ͔ΘΓʹɺϓϩτλΠϓͱݺ͹ΕΔ΋ͷΛ༻͍ͯΦ ϒδΣΫτࢦ޲ϓϩάϥϛϯάΛߦ͍·͢ ✦ ͜ͷ෦෼ʹ͍ͭͯ΋ࠓճ͸ׂѪ͠·͕͢ɺৄ͘͠஌Γͨ ͍ํ͸ԼهͷεϥΠυΛࢀরͯ͠Έ·͠ΐ͏ ✦

    https://www.slideshare.net/yuka2py/ javascript-23768378
  101. scriptཁૉͷҐஔ ✦ JavaScript͸ɺscriptཁૉͷ಺༰ͱͯ͠هड़͢Δ͔ɺผ ϑΝΠϧʹهड़ͯ͠srcଐੑͰURIΛࢦఆ͢Δ͜ͱͰ࣮ߦ͞ ͤΔ͜ͱ͕Ͱ͖·͢ ✦ ͨͩ͠ɺscriptཁૉͷҐஔΛHTMLͷͲͷҐஔʹ഑ஔ͢Δ ͔Ͱڍಈ͕มΘ͖ͬͯ·͢ͷͰؾΛ͚ͭ·͠ΐ͏ ✦ ࢀߟɿεΫϦϓτ഑ஔͱϖʔδ଎౓


    http://contentloaded.com/dom-ready/
  102. ࿅श3-1 console.log('Hello, JavaScript!'); ✦ script.jsΛΤσΟλʔͰ ։͍ͯιʔείʔυΛ ֬ೝͯ͠Έ·͠ΐ͏ ✦ ࿅श2-7ͷHTMLʹӈͷ scriptཁૉΛهड़ͯ͠

    JavaScriptΛಡΈࠐΈ ·͠ΐ͏ <body> ... <script src="script.js"></ script> </body> console.log() ... ୈҰҾ਺Ͱࢦఆͨ͠ϝοηʔδΛίϯιʔϧ্ʹग़ྗ͢Δؔ਺
  103. DOM

  104. DOMͱ͸ ✦ JavaScript͔ΒHTMLΛૢ࡞͢ΔͨΊͷ ΠϯλʔϑΣΠεʢAPIʣͰ͢ ✦ HTMLͷπϦʔߏ଄Λݩʹɺ֤ཁૉʹର Ԡ͢ΔϊʔυͰߏ੒͞ΕͨDOMπϦʔ Λఏڙ͠·͢ ✦ JavaScript͔ΒDOMπϦʔͷ֤ϊʔυΛ

    ૢ࡞͢Δ͜ͱͰɺHTML্ͷରԠ͢Δཁ ૉ͕มߋ͞Ε·͢ ✦ ·ͨɺhtmlϊʔυͷ਌ʹ͸ϖʔδΛද͢ documentΦϒδΣΫτ͕ଘࡏ͠·͢ )5.-ͷπϦʔߏ଄ͱ%0.πϦʔ IUNM IFBE NFUB UJUMF CPEZ ಺༰ IUNM IFBE NFUB UJUMF CPEZ UFYU %PDVNFOU EPDVNFOU DOM ... Document Object Modelͷུ
  105. ϊʔυͷऔಘ ✦ ϊʔυΛऔಘ͢Δࡍ͸ documentΦϒδΣΫτͷ֤ϝ ιουΛར༻͠·͢ ✦ ϝιουຖʹऔಘ͍ͨ͠ϊʔυ ͷࢦఆํ๏͕ҟͳΓ·͢ ✦ ·ͨɺϝιουʹΑͬͯ͸ෳ਺

    ͷཁૉͷίϨΫγϣϯ͕ฦ٫͞ ΕΔ͜ͱʹ஫ҙ͠·͠ΐ͏ // IDΛࢦఆͯ͠1ͭऔಘ͢Δ document.getElementById('ID'); // Ϋϥε໊Λࢦఆͯ͠ෳ਺औಘ͢Δ document.getElementsByClassName('Ϋϥε ໊'); // ཁૉλΠϓΛࢦఆͯ͠ෳ਺औಘ͢Δ document.getElementsByTagName('ཁૉλΠ ϓ'); // CSSηϨΫλʔΛࢦఆͯ͠1ͭऔಘ͢Δ document.querySelector('CSSηϨΫλʔ'); // CSSηϨΫλʔΛࢦఆͯ͠ෳ਺औಘ͢Δ document.querySelectorAll('CSSηϨΫλ ʔ');
  106. ϊʔυͷૢ࡞ ✦ औಘͨ͠ϊʔυͷϝιου΍ ϓϩύςΟΛར༻͢Δ͜ͱͰ ϊʔυΛૢ࡞͢Δ͜ͱ͕Ͱ͖ ·͢ ✦ ৽͍͠ϊʔυΛ࡞੒ͯ͠௥Ճ ͢Δ͜ͱ΋ՄೳͰ͢ ✦

    ଞʹ΋ɺଐੑ΍IDɺΫϥε໊ ͷऔಘɾมߋͳͲΛߦ͑·͢ // h1ཁૉͷ಺༰Λมߋ͢Δ const h1 = document.querySelector('h1'); h1.textContent = '৽͍͠ݟग़͠'; console.log(h1.textContent); // ৽͍͠ݟग़͠ // spanཁૉΛ࡞੒ͯ͠h1ཁૉ಺ʹ௥Ճ͢Δ const span = document.createElement('span'); span.textContent = 'αϒݟग़͠'; h1.appendChild(span); // h1ཁૉͷtitleଐੑΛมߋɾऔಘ͢Δ h1.setAttribute('title', '৽͍͠λΠτϧ'); h1.getAttribute('title'); // ৽͍͠λΠτϧ // h1ཁૉͷIDΛมߋɾऔಘ͢Δ h1.id = 'new_id'; console.log(h1.id); // new_id // h1ཁૉͷΫϥε໊Λ௥Ճɾ࡟আɾऔಘ͢Δ h1.classList.add('new_class'); console.log(h1.classList); // ['new_class'] h1.classList.remove('new_class'); console.log(h1.classList); // []
  107. ࿅श3-2 ✦ ։ൃπʔϧͷίϯιʔϧ্ͰҎԼͷ಺༰Λࢼͯ͠Έ ·͠ΐ͏ ✦ h1ཁૉͷϊʔυΛऔಘ͠·͠ΐ͏ ✦ articleཁૉ಺ͷ࠷ޙͷҐஔʹ৽͍͠ஈམΛ௥Ճ͠ ·͠ΐ͏ ✦

    αΠυόʔʹsidebarΫϥεΛ௥Ճ͠·͠ΐ͏
  108. Πϕϯτͱඇಉظॲཧ

  109. جຊతͳߏจ ✦ DOMʹ͸ɺϢʔβʔͷૢ࡞ʹԠͯ͡Πϕϯτ Λൃੜͤ͞Δػೳ͕͋Γ·͢ ✦ ͞ΒʹɺΠϕϯτϦεφʔͱݺ͹ΕΔ΋ͷΛ ͋Β͔͡Ίొ࿥͓ͯ͘͜͠ͱͰɺΠϕϯτ͕ ൃੜͨ͠ࡍʹಛఆͷίʔυΛ࣮ߦ͢Δ͜ͱ͕ Ͱ͖·͢

  110. ΠϕϯτϦεφʔͷొ࿥ ✦ ΠϕϯτϦεφʔ͸ɺૢ࡞͠ ͨର৅ʢಛఆͷཁૉ΍ϖʔ δɺ΢Οϯυ΢ͳͲʣΛࢦ ఆͯ͠ొ࿥͠·͢ ✦ ର৅ΦϒδΣΫτͷ addEventListenerϝιου ʹΠϕϯτͷछྨͱίʔϧ

    όοΫؔ਺Λࢦఆ͢Δ͜ͱ Ͱొ࿥Ͱ͖·͢ // buttonཁૉΛΫϦοΫͨ͠ࡍʹ࣮ߦ͞ΕΔ button.addEventListener('click', function() { console.log('Ϙλϯ͕ΫϦοΫ͞Ε·ͨ͠'); }); // ΢Οϯυ΢ͷαΠζΛมߋͨ͠ࡍʹ࣮ߦ͞ΕΔ window.addEventListener('resize', function() { console.log('΢Οϯυ΢͕ϦαΠζ͞Ε·ͨ͠'); }); // DOMπϦʔͷߏங͕׬ྃͨ͠ࡍʹ࣮ߦ͞ΕΔ document.addEventListener('DOMContentLoaded', function() { console.log('DOMπϦʔ͕ߏங͞Ε·ͨ͠'); }); window ... ϖʔδΛද͍ࣔͯ͠Δ΢Οϯυ΢Λૢ࡞͢ΔΦϒδΣΫτ͔ͭάϩʔόϧΦϒδΣΫτ
  111. ίʔϧόοΫؔ਺ ✦ JavaScriptͰ͸ɺؔ਺Λݺͼग़ ͢ࡍʹҾ਺ͱͯ͠ଞͷؔ਺Λ౉ ͢͜ͱ͕Ͱ͖·͢ ✦ ݺͼग़͠ઌͷؔ਺Ͱ͸ɺ࣮ߦத ʹҾ਺ͱͯ͠౉͞Εͨؔ਺Λ࣮ ߦ͢Δ͜ͱ͕Ͱ͖·͢ ✦

    ͜ͷΑ͏ͳҾ਺ͱͯ͠౉͞ΕΔ ؔ਺ͷ͜ͱΛίʔϧόοΫؔ਺ ͱݺͼ·͢ function foo(callbackFunction) { // 2. ԿΒ͔ͷॲཧ... // 3. ίʔϧόοΫؔ਺Λ࣮ߦ͢Δ callbackFunction('׬ྃ'); } // 1. fooΛ࣮ߦ͢Δ foo(function(message) { // 4. ׬ྃ ͱग़ྗ͞ΕΔ console.log(message); }); JavaScriptͷؔ਺͸ୈҰڃΦϒδΣΫτͰ͋ΔͨΊɺ୅ೖ΍ʢҾ਺΍໭Γ஋ͱͯ͠ͷʣड͚౉͠ͳͲ͕ߦ͑Δ
  112. ඇಉظॲཧ ✦ ΠϕϯτϦεφʔΛొ࿥ͨ͠ࡍɺ ࣮ࡍʹΠϕϯτ͕ൃੜ͢Δ·Ͱॲ ཧΛࢭΊΔ͜ͱ͸ͳ͘ɺޙଓͷॲ ཧΛ࣮ߦ͍͖ͯ͠·͢ ✦ ΠϕϯτϦεφʔʹొ࿥ͨ͠ίʔ ϧόοΫؔ਺͸ɺΠϕϯτ͕ൃੜ ͨ͠ࡍʹඇಉظతʹ࣮ߦ͞ΕΔ͜

    ͱʹͳΓ·͢ ✦ JavaScriptͰ͸ɺ͜͏͍ͬͨඇಉ ظॲཧ͕ଟ͘ొ৔͠·͢ // 1 ಉظతʹ࣮ߦ͞ΕΔ console.log('Ϙλϯ͕ΫϦοΫ͞Ε·ͨ͠'); // 2 ΠϕϯτϦεφʔͷొ࿥͚ͩߦ͏ button.addEventListener('click', function() { // 4 ඇಉظ࣮ߦ͞ΕΔ console.log('Ϙλϯ͕ΫϦοΫ͞Ε·ͨ͠'); }); // 3 ಉظతʹ࣮ߦ͞ΕΔ console.log('Ϙλϯ͕ΫϦοΫ͞Ε·ͨ͠');
  113. ࿅श3-3 ✦ ࿅श3-2ͷCSSͱJSΛҎԼͷΑ͏ʹมߋ͠· ͠ΐ͏ ✦ CSSʹԼهͷϧʔϧΛΛ௥Ճ͠·͠ΐ͏
 .hidden { display: none;

    } ✦ αΠυόʔΛΫϦοΫͨ͠Β൷ධ࣌ʹͳΔΑ ͏ʹͯ͠Έ·͠ΐ͏
  114. ίʔϧόοΫ஍ࠈ ✦ ඇಉظॲཧΛ௚ྻʹ࣮ߦ͢Δ ৔߹ɺίʔϧόοΫؔ਺ͷத Ͱ࣍ͷඇಉظॲཧΛݺͿඞཁ ͕͋Γ·͢ ✦ ͦͷ݁Ռɺؔ਺ͷωετ͕ਂ ͘ͳͬͯՄಡੑ͕མͪͯ͠· ͍·͢

    ✦ ͜ΕΛίʔϧόοΫ஍ࠈͱݺ Ϳ͜ͱ͕͋Γ·͢ // 1. asyncAΛ࣮ߦ͢Δ asyncA(function() { // 2. asyncAͷ׬ྃޙʹ // asyncBΛ࣮ߦ͢Δ asyncB(function() { // 3. asyncBͷ׬ྃޙʹ // asyncCΛ࣮ߦ͢Δ asyncC(function() { // 4. asyncC͕׬ྃ͢Δ }); }); });
  115. Promise ✦ ࠷ۙͰ͸ɺPromiseΛར༻ͯ͠ඇಉظॲ ཧΛ؆ܿʹهड़Ͱ͖ΔΑ͏ʹͳΓ·͠ ͨ ✦ ͋Β͔͡ΊthenϝιουͰίʔϧόο Ϋؔ਺Λ࣮ߦ͍ͨ͠ॱʹొ࿥͢Δͱͦ ͷॱ௨Γʹ௚ྻʹ࣮ߦ͞Ε͍͖ͯ·͢ ✦

    Մಡੑ΋޲্͢ΔͨΊɺͥͻ͓֮͑ͯ ͘ͱྑ͍Ͱ͠ΐ͏ ✦ ࢀߟɿJavaScript Promiseͷຊ
 http://azu.github.io/promises-book/ // 1. PromiseΦϒδΣΫτΛ࡞੒͢Δ Promise.resolve() // 2. ίʔϧόοΫؔ਺Λొ࿥͢Δ .then(function() { asyncA() }) .then(function() { asyncB() }) .then(function() { asyncC() }) // 3. ొ࿥ͨ͠ॱʹඇಉظͰݺ͹ΕΔ Promise ... ඇಉظॲཧΛந৅Խͨ͠ΦϒδΣΫτͱɺͦΕΛૢ࡞͢Δ࢓૊Έͷ͜ͱ
  116. Ajax

  117. ඇಉظ௨৴ ✦ JavaScriptͰ͸ɺϖʔδΛ࠶ಡࠐ͢Δ͜ͱͳ͘ɺ֎෦ͷαʔ όʔͱHTTP௨৴Λߦ͏͜ͱ͕Ͱ͖·͢ ✦ ͜ΕʹΑΓɺ֎෦ͷαʔόʔͱ৘ใΛ΍ΓͱΓ͠ɺऔಘͨ͠σʔ λΛݩʹϖʔδΛγʔϜϨεʹॻ͖׵͑Δ͜ͱ͕ՄೳʹͳΓ· ͢ ✦ ͜ͷΑ͏ͳɺJavaScriptͷඇಉظ௨৴ͱHTMLɺCSSΛ૊Έ߹

    ΘͤͯΠϯλϥΫςΟϒͳϖʔδΛߏங͢Δٕज़ͷ͜ͱΛAjax ͱݺͼ·͢ Ajax ... Asynchronous JavaScript + XMLͷུ
  118. Fetch API ✦ ࠷ۙͰ͸ɺFetch APIΛར༻ͯ͠ඇಉظ௨৴Λߦ ͏͜ͱ͕ଟ͘ͳ͖ͬͯ·ͨ͠ ✦ ͜Ε͸ɺैདྷ࢖ΘΕ͖ͯͨXMLHttpRequestͱൺ ΂ͯΑΓγϯϓϧ͔ͭڧྗͳ΋ͷʹͳ͍ͬͯ·͢ ✦

    Fetch API͕ར༻Ͱ͖ͳ͍؀ڥͰ͸ϙϦϑΟϧΛ ࢖༻͢ΔͱΑ͍Ͱ͠ΐ͏ ϙϦϑΟϧ ... ࠷৽ͷػೳΛαϙʔτ͍ͯ͠ͳ͍؀ڥʹରͯͦ͠ͷػೳΛ࢖༻Ͱ͖ΔΑ͏ʹ͢Δίʔυͷ͜ͱ
  119. ϦΫΤετͱϨεϙϯε ✦ fetchϝιουΛ࢖༻ͯ͠ϦΫΤετΛ։ ࢝͠·͢ ✦ fetchϝιου͸PromiseΦϒδΣΫτΛฦ ͢ͷͰɺϦΫΤετ׬ྃޙʹ࣮ߦ͢Δίʔ ϧόοΫؔ਺ΛthenϝιουͰొ࿥͍ͯ͠ ͖·͢ ✦

    ࠷ॳͷίʔϧόοΫؔ਺ʹ͸ResponseΦ ϒδΣΫτ͕౉͞Ε·͢ ✦ औಘͨ͠σʔλͷܗࣜʹԊͬͯϝιουΛ ࣮ߦͯ͠ฦ٫͢Δͱɺ࣍ͷίʔϧόοΫؔ ਺ʹऔಘͨ͠σʔλࣗମ͕౉͞Ε·͢ // ୈ1Ҿ਺ʹURIΛࢦఆ͢Δ fetch('http://example.com') .then(function(res) { // return res.json(); return res.text(); }) .then(function(html) { // HTML͕ग़ྗ͞ΕΔ console.log(html); });
  120. ࿅श3-4 ✦ ࿅श3-3ͷHTMLΛҎԼͷΑ͏ʹมߋ͠·͠ΐ͏ ✦ هࣄҰཡηΫγϣϯ಺ͷ࠷ޙʹʮ΋ͬͱݟΔʯจݴ Λ௥Ճ͠·͠ΐ͏ ✦ ʮ΋ͬͱݟΔʯจݴΛΫϦοΫͨ͠ࡍʹɺඇಉظ௨ ৴Ͱarticle.htmlΛಡΈࠐΈɺԼͷίʔυΛࢀߟʹ͠ ͳ͕Βத਎ͷHTMLจࣈྻΛʮ΋ͬͱݟΔʯจݴͷख

    લʹ௥Ճ͠·͠ΐ͏
 readMore.insertAdjacentHTML('beforebegin', htmlStr); insertAdjacentHTML() ... ୈҰҾ਺Ͱࢦఆͨ͠ҐஔʹୈೋҾ਺Ͱࢦఆͨ͠จࣈྻΛHTMLʹม׵ͯ͠௥Ճ͢Δ
  121. ԋश