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

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

ࣗݾ঺հ ✦ ૳໺ ࿨໵ @miniturbo ✦ גࣜձࣾΨΠΞοΫε  ٕज़։ൃ෦ ॴଐ ✦
ϚʔΫΞοϓΤϯδχΞ  WebϓϩάϥϚʔ  ΠϯϑϥΤϯδχΞ

ݚमͷ໨త ✦ ݚमΛ௨ͯ͡ҎԼͷεΩϧΛ਎ʹ͚ͭ·͠ΐ͏ ✦ HTMLɺCSSɺJavaScriptͷجૅ஌ࣝΛֶͼɺ ॻ͖ਐΊΒΕΔΑ͏ʹͳΔ

ݚमͷྲྀΕ ✦ ݚम͸ɺҎԼͷྲྀΕʹԊͬͯਐΊ·͢ ✦ ߨٛʢ90෼ʣ ✦ HTMLͷجૅΛֶͿ ✦ CSSͷجૅΛֶͿ ✦
JavaScriptͷجૅΛֶͿ ✦ ٳܜʢ10෼ʣ ✦ ԋशʢ60෼ʣ

͸͡ΊΔલʹ ✦ ߨٛͷ్தʹ͍͔ͭ͘ͷ࿅ श໰୊͕͋Γ·͢ ✦ ԼهͷGitϦϙδτϦΛΫ ϩʔϯͯ͠࿅श໰୊Λ࢝ΊΒ ΕΔΑ͏ʹ͓͖ͯ͠·͠ΐ ͏  https://github.com/gaiax/
html-css-javascript-training- 2018

HTMLͷجૅΛֶͿ

HTMLͱ͸

HTMLͱ͸ ✦ ΢Σϒϖʔδͷߏ଄Λهड़͢ΔͨΊͷϚʔΫ ΞοϓݴޠͰ͢ ✦ HTMLʹΑͬͯهड़͞Εͨ΢Σϒϖʔδ͸ϋΠ ύʔςΩετͱݺ͹Εɺผͷ΢Σϒϖʔδͱ ؔ࿈෇͚Δ͜ͱ͕Ͱ͖·͢ HTML …
HyperText Markup Languageͷུ

ϚʔΫΞοϓ ✦ จॻʹؚ·ΕΔݟग़͠΍ஈམɺڧௐͳͲͱ ͍ͬͨߏ଄΍ҙຯΛଊ͑ͯɺίϯϐϡʔλʔ ͕ਖ਼͘͠ղऍͰ͖ΔΑ͏ҹ෇͚͢Δ͜ͱΛ ϚʔΫΞοϓͱ͍͍·͢

ϋΠύʔςΩετ ✦ ैདྷͷςΩετΛ௒͑ ͨߴػೳͳςΩετΛ ϋΠύʔςΩετͱݺ ͼ·͢ ✦ ϋΠύʔϦϯΫΛར༻ ͯ͠ςΩετͱผͷς Ωετ౳Λؔ࿈෇͚Δ
͜ͱ͕Ͱ͖·͢ ωί ωίʹؔ͢ΔςΩετ ಈ෺ʹؔ͢ΔςΩετ ωίͷը૾ ࠷΋༗໊ͳϋΠύʔςΩετ͸World Wide Web (WWW)

HTMLͷόʔδϣϯ ✦ HTMLʹ͸ɺHTML5΍HTML 4.01ɺXHTMLͳͲ͍ͭ͘ ͔ͷόʔδϣϯ͕͋Γ·͢ ✦ 2018೥5݄࣌఺Ͱ͸ɺHTML 5.2͕Ұ൪৽͍͠όʔδϣ ϯͱͯ͠W3CΑΓ࢓༷͕קࠂ͞Ε͍ͯ·͢ ✦
ओཁϒϥ΢βʔͰ͸HTML5͕΄΅αϙʔτ͞Ε͍ͯΔ ͨΊɺࠓ೔࣌఺Ͱ͸HTML5ΛֶͿ͜ͱΛ͓קΊ͠·͢ W3C … Webٕज़ͷඪ४ԽΛਐΊΔඇӦརஂମ

HTMLͷॻ͖ํ

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

Qཁૉ λάͱཁૉ ✦ λά͸ཁૉܕΛ<>ͰғΜ Ͱද͠·͢ ✦ ಺༰Λ։࢝λάͱऴྃλά ͰғΜͰϚʔΫΞοϓͨ͠ ΋ͷΛཁૉͱݺͼ·͢ ✦
ཁૉͷ಺༰ʹ͸ଞͷཁૉΛ ؚΊΔʢೖΕࢠʣ͜ͱ͕Ͱ ͖·͢ <p> จষ </p> ։࢝λά ऴྃλά ಺༰ p͸ஈམ (paragraph) Λද͢ λά <p> ཁૉܕ ཁૉͷೖΕࢠ <p>  <strong>…</strong>  </p>

ଐੑ ✦ ཁૉʹؔ͢Δ௥Ճ৘ ใΛଐੑͱͯ࣋ͨ͠ ͤΔ͜ͱ͕Ͱ͖·͢ ✦ ͢΂ͯͷཁૉͰڞ௨ ͳάϩʔόϧଐੑͱ ͦͷཁૉݻ༗ͷଐੑ ͕ଘࡏ͠·͢
IUNMཁૉͷMBOHଐੑ <html lang="ja">

ۭཁૉ ✦ ಺༰ͷͳ͍ཁૉΛۭ ཁૉͱݺͼ·͢ ✦ ऴྃλά͸লུ͞Ε  ։࢝λάͷΈͰද͠ ·͢ ۭཁૉ <br> 
<img src="…"> brཁૉ͸վߦ (break) Λද͢  imgཁૉ͸ը૾ (image) Λද͢

HTMLͷجຊߏ੒ ✦ HTMLͷجຊతͳߏ੒ Λݟ͍͖ͯ·͠ΐ͏ <!DOCTYPE html> <html lang="ja"> <head> <meta
charset="UTF-8"> <title>ϖʔδλΠτϧ</title> </head> <body> ϖʔδ಺༰ </body> </html>

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

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

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

metaཁૉ ✦ ϖʔδͷ༷ʑͳϝλσʔλ Λද͢ཁૉͰ͢ ✦ ୅දతͳϝλσʔλʹϖʔ δͷจࣈίʔυ͕͋Γ·͢ ✦ charsetଐੑʹΑΔจࣈίʔ υͷࢦఆ͸headཁૉ಺ͷҰ
൪࠷ॳʹࢦఆ͢ΔͱΑ͍Ͱ ͠ΐ͏ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ϖʔδλΠτϧ</title> </head> <body> ϖʔδ಺༰ </body> </html>

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

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

πϦʔߏ଄ ✦ HTMLͰهड़͞Εͨϖʔδ͸ɺhtml ཁૉΛى఺ͱͨ͠ཁૉͷπϦʔߏ ଄ͱͯ͠ද͢͜ͱ͕Ͱ͖·͢ ✦ ͜ͷπϦʔߏ଄͸ɺઌͰొ৔͢Δ CSS΍JavaScriptΛ༻͍ͯཁૉΛબ ୒ɾૢ࡞͢Δ্ͰΑ͘༻͍ΒΕ· ͢
✦ ιʔείʔυ͔ΒπϦʔߏ଄ΛΠϝʔ δͰ͖ΔΑ͏ʹ͓ͯ͘͠ͱྑ͍Ͱ ͠ΐ͏ πϦʔߏ଄ IUNM IFBE NFUB UJUMF CPEZ ಺༰

࿅श1.1 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>{໊લ}ͷϒϩά</title> </head>
<body> ϒϩάͷ಺༰ </body> </html> ✦ index.htmlΛΤσΟ λʔͰ։͍ͯιʔε ίʔυΛ֬ೝͯ͠Έ ·͠ΐ͏ ✦ ϒϥ΢βʔͰදࣔ͠ ͯΈ·͠ΐ͏

จষͷߏ଄Խ

จষΛߏ଄Խ͢Δ ✦ ϖʔδʹදࣔ͢ΔจষΛهड़͢Δࡍ͸ɺจষͷߏ଄ ʹ஫໨ͯ͠ద੾ʹϚʔΫΞοϓ͢Δ͜ͱ͕ॏཁͰ͢ ✓ จষͷ಺༰ΛΘ͔Γ΍ࣔͨ͘͢͠ݟग़͠Λ͚ͭΔ ✓ จষΛ͍͔ͭ͘ͷஈམͷू·ΓͰߏ੒͢Δ ✓ ͋Δఔ౓ͷ௕͍จষΛষ΍અʢηΫγϣϯʣ͝ͱ
ʹ۠੾Δ ✦ ηϚϯςΟοΫͳHTMLΛ৺͕͚·͠ΐ͏ ηϚϯςΟοΫ ... ίϯϐϡʔλʹจॻͷ࣋ͭҙຯΛਖ਼͘͠ղऍͤ͞Δ͜ͱ͕Ͱ͖Δ

h1ʙh6ཁૉ ✦ ݟग़͠Λද͢ཁૉͰ ͢ ✦ จষͷݟग़͠Ϩϕϧ ʹ߹Θͤͯh1͔Βॱ ൪ʹ࢖༻͠·͢ <body> <h1>େݟग़͠</h1>
େݟग़͠ͷ಺༰ <h2>தݟग़͠</h2> தݟग़͠ͷ಺༰1 தݟग़͠ͷ಺༰2 <h3>খݟग़͠</h3> খݟग़͠ͷ಺༰ </body>

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

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

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

จষͷΞ΢τϥΠϯ ✦ จষΛద੾ʹϚʔΫΞοϓ͢ΔͱɺηΫγϣ ϯͱݟग़͠ʹΑͬͯΞ΢τϥΠϯʢจষߏ ଄ʣ͕ܗ੒͞Ε·͢ ✦ Ξ΢τϥΠϯ͸ɺϒϥ΢βʔͰͷදࣔʹӨڹ ͢Δ͜ͱ͸͋Γ·ͤΜ͕ɺηϚϯςΟοΫͳ HTMLΛهड़͢Δ্Ͱҙࣝ͢ΔͱΑ͍Ͱ͠ΐ͏

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

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

࿅श1.2 ✦ ࿅श1.1ͷHTMLͷ bodyཁૉ಺ʹɺӈʹ ࣔ͢จষΛهड़͠· ͠ΐ͏ ✦ Ξ΢τϥΠϯΛ֬ೝ ͯ͠Έ·͠ΐ͏ {໊લ}ͷϒϩά 
{໊લ}ͷϒϩάͰ͢ ɹهࣄҰཡ ɹɹ2018೥5݄10೔ͷهࣄ  ɹɹࠓ೔͸HTMLʹֶ͍ͭͯͼ  ɹɹ·ͨ͠ɻ େݟग़͠ ஈམ ηΫγϣϯ ηΫγϣϯ খݟग़͠ தݟग़͠ ஈམ

ಛผͳηΫγϣϯ ✦ ઌ΄Ͳ঺հͨ͠sectionཁૉͷଞʹɺಛผͳҙ ຯΛ࣋ͬͨηΫγϣϯΛද͢ཁૉ͕͋Γ·͢ ✦ จষΛߏ଄Խ͢Δࡍɺ·ͣ͸ಛผͳηΫγϣ ϯ͔Ͳ͏͔ΛݟۃΊɺ֘౰͠ͳ͍৔߹͸ sectionཁૉͰද͢ͱΑ͍Ͱ͠ΐ͏

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>

navཁૉ ✦ ϖʔδͷओཁͳφϏήʔγϣ ϯηΫγϣϯͰ͋Δ͜ͱΛ ද͢ཁૉͰ͢ ✦ αΠτͷϦϯΫҰཡ΍ɺϖʔ δ಺ͷϦϯΫҰཡͳͲؚ͕ ·Ε·͢ ✦
͢΂ͯͷϦϯΫΛؚΊΔඞ ཁ͸͋Γ·ͤΜ <body> ... <nav> <ul> <li>αΠτϦϯΫ1</li> <li>αΠτϦϯΫ2</li> <li>αΠτϦϯΫ3</li> </ul> </nav> ... </body> ul, li ... ϦετͱϦετͷ߲໨Λද͢ཁૉ

asideཁૉ ✦ ϝΠϯίϯςϯπ͔Β ੾Γ཭͢͜ͱ͕Ͱ͖Δ ηΫγϣϯͰ͋Δ͜ͱ Λද͢ཁૉͰ͢ ✦ ͍ΘΏΔαΠυόʔ΍ ϝΠϯهࣄ಺ͷίϥϜ ෦෼ɺิ଍৘ใͳͲ͕
͋ͨΓ·͢ <body> ... <article> <h2>χϡʔεهࣄ</h2> <p>χϡʔεهࣄͷ಺༰1</p> <p>χϡʔεهࣄͷ಺༰2</p> <aside> <h3>ίϥϜ</h3> <p>ίϥϜͷ಺༰</p> </aside> </article> </body>

࿅श1.3 ✦ ࿅श1.2ͷHTMLΛҎԼͷΑ͏ʹมߋ͠·͠ΐ͏ ✦ 1ͭͷهࣄΛද͢ηΫγϣϯΛarticleཁૉʹมߋ͠·͠ΐ͏ ✦ هࣄҰཡηΫγϣϯͷલʹҎԼͷ3ͭͷϦϯΫΛάϩʔόϧφϏήʔγϣϯͱͯ͠ هड़͠·͠ΐ͏ ✦ τοϓ
✦ ৽ணهࣄ ✦ ΧςΰϦʔ ✦ هࣄҰཡηΫγϣϯͷޙʹҎԼͷݟग़͠ͱஈམΛؚΉαΠυόʔΛهड़͠·͠ΐ͏ ✦ ݟग़͠ɿϓϩϑΟʔϧ ✦ ஈམɿ{໊લ}Ͱ͢ɻ

ͦͷଞͷจষͷߏ଄Խ ✦ ઌ΄Ͳ·ͰͷηΫγϣϯҎ֎ʹ΋ɺจষͷߏ ଄Λࣔ͢ཁૉ͕ଘࡏ͠·͢ ✦ ͜ΕΒ͸Ξ΢τϥΠϯ͸ܗ੒͠·ͤΜ͕ɺจ ষʹద੾ͳҙຯ͚ͮΛ͢Δ͜ͱ͕Ͱ͖·͢

headerཁૉ ✦ ௚ۙͷηΫγϣϯʹର ͢Δϔομʔʢಋೖత ͳίϯςϯπʣΛද͢ ཁૉͰ͢ ✦ ݟग़͠ͷଞʹɺϩΰ΍ φϏήʔγϣϯɺݕࡧ ϑΥʔϜͳͲ΋ؚΊΔ
͜ͱ͕Ͱ͖·͢ <body> <header> <h1>େݟग़͠</h1> </header> <main> <p>಺༰</p> </main> <footer> <small> ©2018 example.com </small> </footer> </body>

mainཁૉ ✦ ͦͷϖʔδͷओཁͳ ಺༰Λද͢ཁૉͰ͢ ✦ ϖʔδʹ͸1ͭͷmain ཁૉͷΈهड़͢Δ͜ ͱ͕Ͱ͖·͢ <body> <header>
<h1>େݟग़͠</h1> </header> <main> <p>಺༰</p> </main> <footer> <small> ©2018 example.com </small> </footer> </body> small ... ஶ࡞ݖදهΛද͢ཁૉ

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

࿅श1-4 ✦ ࿅श1-3ͷHTMLΛҎԼͷΑ͏ʹมߋ͠·͠ΐ͏ ✦ େݟग़͔͠ΒάϩʔόϧφϏήʔγϣϯ·ͰΛϖʔδ શମͷϔομʔͱͯ͠هड़͠·͠ΐ͏ ✦ هࣄҰཡΛओཁͳ಺༰ͱͯ͠هड़͠·͠ΐ͏ ✦ ҎԼͷίϐʔϥΠτΛϖʔδશମͷϑολʔͱͯ͠ه
ड़͠·͠ΐ͏ ✦ ίϐʔϥΠτɿ©2018 {໊લ}

Α͘࢖ΘΕΔཁૉ

Α͘࢖ΘΕΔཁૉ ✦ ϋΠύʔϦϯΫΛද͢ཁૉ ✦ a ✦ ը૾ͷຒΊࠐΈΛද͢ཁૉ ✦ img ✦
ϦετΛද͢ཁૉ ✦ ul, ol, li ✦ දܗࣜͷσʔλΛද͢ཁૉ ✦ table, tr, th, td ✦ αʔόʔʹ৘ใΛૹ৴͢ΔͨΊͷϑΥʔϜΛද͢ཁૉ ✦ form, input, select, textarea

ίϯςϯπϞσϧ ✦ HTML5Ͱ͸ɺͲͷཁૉʹଞͷཁૉΛؚΊΒΕΔ͔͕ఆ ٛ͞Ε͓ͯΓɺ͜ΕΛίϯςϯπϞσϧͱݺͼ·͢ ✦ จষΛߏ଄Խ͍ͯ͘͠ࡍ͸ɺίϯςϯπϞσϧʹ஫໨͠ ͯਖ਼͍͠ϚʔΫΞοϓΛ৺͕͚·͠ΐ͏ ✦ ࢀߟɿHTML5 ίϯςϯπϞσϧ
ΨΠυ  https://webgoto.net/html5/

CSSͷجૅΛֶͿ

CSSͱ͸

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

CSSͷόʔδϣϯ ✦ CSSʹ΋ɺHTMLͱಉ༷ʹCSS1΍CSS 2.1ɺCSS3ͳ Ͳ͍͔ͭ͘ͷόʔδϣϯ͕͋Γ·͢ ✦ ͨͩ͠ɺ࠷৽൛Ͱ͋ΔCSS3ͷରԠঢ়گ͸ओཁͳϒϥ ΢βʔͰ΋·ͪ·ͪͳͨΊɺ࢖༻͢Δࡍ͸஫ҙ͢Δ ඞཁ͕͋Γ·͢ ✦
جຊతͳߏจ΍ߟ͑ํ͸֤όʔδϣϯͰมΘΔ͜ͱ ͸͋Γ·ͤΜ

CSSͷॻ͖ํ

ηϨΫλʔͱϓϩύςΟͱ஋ ✦ σβΠϯͷద༻ઌΛηϨΫ λʔͰࢦఆ͠·͢ ✦ ԿͷσβΠϯΛద༻͢Δ͔ ΛϓϩύςΟͰࢦఆ͠· ͢ ✦ σβΠϯΛͲͷΑ͏ʹద༻
͢Δ͔Λ஋Ͱࢦఆ͠·͢ h1 { color: red; } ηϨΫλʔ ϓϩύςΟ ஋

ϧʔϧͱએݴ ✦ ϓϩύςΟͱ஋ͷ૊Έ߹Θ ͤΛએݴͱݺͼ·͢ ✦ એݴ͸{ }Ͱද͞Εͨએݴϒ ϩοΫͷதʹෳ਺ఆٛͰ͖ ·͢ ✦
ηϨΫλʔͱએݴϒϩοΫ ͷ૊Έ߹ΘͤΛϧʔϧͱݺ ͼ·͢ ϧʔϧ h1 {  padding: 8px;  color: red;  font-size: 16px;  } એݴ એݴ એݴ

ཁૉܕηϨΫλʔ ✦ ηϨΫλʔʹ͸༷ʑͳࢦఆํ ๏͕͋Γ·͢ ✦ جຊతͳηϨΫλʔͷ1ͭʹɺ HTMLͷཁૉܕΛࢦఆ͢Δཁૉ ܕηϨΫλʔ͕͋Γ·͢ ✦ ࢦఆ͞ΕͨཁૉܕʹҰக͢Δ
͢΂ͯͷཁૉΛద༻ઌͱͯ͠ બ୒͠·͢ ཁૉܕηϨΫλʔ h1 {  color: red;  } ཁૉܕ

ΫϥεηϨΫλʔͱIDηϨΫλʔ ✦ ΫϥεηϨΫλʔ͸class ଐੑʹΑͬͯࢦఆ͞ΕͨΫ ϥε໊Λ࣋ͭ͢΂ͯͷཁૉ Λબ୒͠·͢ ✦ IDηϨΫλʔ΋ಉ༷ʹidଐ ੑʹΑͬͯࢦఆ͞ΕͨIDΛ ࣋ͭཁૉΛબ୒͠·͢
ΫϥεηϨΫλʔ .heading {  color: red;  } Ϋϥε໊ *%ηϨΫλʔ #page-heading {  color: red;  } *%

classଐੑͱidଐੑ ✦ classଐੑͱidଐੑ͸͢΂ͯͷཁૉͰ ར༻Ͱ͖ΔάϩʔόϧଐੑͰ͋Γɺ ཁૉʹΫϥε໊΍IDΛࢦఆ͢Δ͜ͱ ͕Ͱ͖·͢ ✦ ͜ΕΒ͸͍ͣΕ΋CSS΍JavaScript ͰཁૉΛࣝผɾબ୒͢Δࡍʹར༻͢ ΔଐੑͰ͢
✦ ͨͩ͠ɺidଐੑʹΑͬͯ༩͑ͨID͸ ϖʔδ಺Ͱ1͚ͭͩʹͳΔΑ͏ʹؾ Λ͚ͭ·͠ΐ͏ <h1 class="heading"> <h1 id="page-heading"> Ϋϥε໊ *%

ٙࣅΫϥε ✦ ٙࣅΫϥε͸ࠓ·ͰͷηϨΫλʔ ʹ෇Ճ͢ΔΩʔϫʔυͰ͢ ✦ ηϨΫλʔʹΑͬͯબ୒͞Εͨ ཁૉͷ͏ͪɺٙࣅΫϥεʹΑͬ ͯࢦఆ͞Εͨಛఆͷঢ়ଶʹ͋Δ ཁૉͷΈΛબ୒͠·͢ ✦
ﬁrst-child ... Ұ൪ઌ಄ͷཁૉ ✦ hover ... Ϛ΢εΧʔιϧ͕ॏ ͳ͍ͬͯΔཁૉ ٙࣅΫϥε h1:hover {  color: red;  } ٙࣅΫϥε

ͦͷଞͷηϨΫλʔ ✦ ͦͷଞʹ΋༷ʑͳηϨΫλʔ΍Ωʔϫʔυ͕͋Γ·͢ ✦ શশηϨΫλʔ ✦ HTML্ͷ͢΂ͯͷཁૉΛબ୒͠·͢ ✦ ଐੑηϨΫλʔ ✦
ࢦఆ͞Εͨଐੑ΍ͦͷ஋ʹج͍ͮͯཁૉΛબ୒͠·͢ ✦ ٙࣅཁૉ ✦ બ୒ͨ͠ཁૉͷҰ෦෼ͷΈΛબ୒͢ΔΩʔϫʔυͰ͢

ෳ਺ηϨΫλʔͱ݁߹ࢠ ✦ ηϨΫλʔΛΧϯϚ۠੾Γ Ͱෳ਺ࢦఆͯ͠·ͱΊͯએ ݴϒϩοΫΛࢦఆ͢Δ͜ͱ ͕Ͱ͖·͢ ✦ ·ͨɺηϨΫλʔಉ࢜Λ݁ ߹ࢠͰ૊Έ߹ΘͤΔ͜ͱ ͰɺಛఆͷηϨΫλʔͷΈ
બ୒͢Δ͜ͱ͕Ͱ͖ΔΑ͏ ʹͳΓ·͢ ෳ਺ηϨΫλʔͷࢦఆ h1, h2 { ... } BSUJDMFཁૉͷࢠଙཁૉͱͳΔIཁૉ article h1 { ... } BSUJDMFཁૉͷࢠཁૉͱͳΔIཁૉ article > h1 { ... } IཁૉͷܑఋཁૉͰ௚ޙʹ͋ΔIཁૉ h1 + h2 { ... }

Χεέʔυͱܧঝ ✦ ෳ਺ͷϧʔϧ͕1ཁૉʹରͯ͠ҟͳΔσβΠϯΛద༻ ͢ΔࡍɺΧεέʔυͱݺ͹ΕΔํ๏Ͱ༏ઌॱҐ͕ܾ ·Γ·͢ ✦ ༏ઌॱҐ͸ɺCSSͷهड़৔ॴ΍ηϨΫλͷࢦఆํ๏ ͳͲ͔Βܾ·Γ·͢ ✦ ·ͨɺจࣈαΠζ΍จࣈ৭ͳͲͷҰ෦ͷϓϩύςΟ
͸਌ཁૉ͔Βࢠཁૉ΁ͱܧঝ͞Ε·͢

هड़͢Δ৔ॴ ✦ CSS͸ҎԼͷ3ՕॴͰهड़͢Δ͜ͱ͕Ͱ͖·͢ 1.linkཁૉͰࢦఆ͞ΕͨCSSϑΝΠϧ 2.headཁૉ಺ͷstyleཁૉͷ಺༰ 3.֤ཁૉͷstyleଐੑͷ஋ ✦ ͜ͷݚमͰ͸ɺ1൪ͷํ๏Ͱهड़͍͖ͯ͠·͢

࿅श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͸จࣈαΠζΛมߋ͢Δ

ཁૉͱϘοΫε

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

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

ཁૉͷ෯ͱߴ͞ ✦ ϘοΫεʹ͸෯΍ߴ͞΋ࢦఆ͢ Δ͜ͱ͕Ͱ͖·͢ ✦ ෯͸widthϓϩύςΟͰɺߴ͞ ͸heightϓϩύςΟͰͦΕͧΕ ࢦఆͰ͖·͢ ✦ ෯ͱߴ͞ΛϘοΫεϞσϧͷͲ
ͷ෦෼ͱͯ͠ఆٛ͢Δ͔͸ɺ box-sizingϓϩύςΟͷࢦఆʹ Αܾͬͯ·Γ·͢ ϚʔδϯྖҬ ཁૉͷ֎ଆͷ༨ന ϘʔμʔྖҬ ཁૉͷ࿮ઢ ύσΟϯάྖҬ ཁૉͷ಺ଆͷ༨ന ίϯςϯπྖҬ  ཁૉͷ಺༰

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

box-sizing: border-box; ✦ box-sizingϓϩύςΟʹ border-box Λࢦఆͨ͠৔߹ɺࢦఆͨ͠෯ͱߴ͞͸ ϘʔμʔྖҬ·Ͱద༻͞Ε·͢ ✦ ྫ͑͹ɺwidth: 100px;ͱpadding-
left: 10px;Λࢦఆͨ͠৔߹ɺύσΟϯ άྖҬ͸෯ʹؚ·Εͯܭࢉ͞ΕΔͨΊɺ ϘοΫεશମͷ෯͸100pxͱͳΓ·͢ ✦ CSSͰϨΠΞ΢τΛ૊Ή৔߹ɺ border-boxΛࢦఆͨ͠ํ͕౎߹͕ྑ ͍͜ͱ͕ଟ͍Ͱ͠ΐ͏ ϚʔδϯྖҬ ཁૉͷ֎ଆͷ༨ന ϘʔμʔྖҬ ཁૉͷ࿮ઢ ύσΟϯάྖҬ ཁૉͷ಺ଆͷ༨ന ίϯςϯπྖҬ  ཁૉͷ಺༰ ෯ ߴ͞

ཁૉͷഎܠ ✦ ϘοΫεʹ͸എܠ৭ ΍എܠը૾΋ࢦఆ͢ Δ͜ͱ͕Ͱ͖·͢ ✦ ࢦఆͨ͠എܠ͸ύ σΟϯάྖҬ·Ͱద ༻͞Ε·͢ ϚʔδϯྖҬ
ཁૉͷ֎ଆͷ༨ന ϘʔμʔྖҬ ཁૉͷ࿮ઢ ύσΟϯάྖҬ ཁૉͷ಺ଆͷ༨ന ίϯςϯπྖҬ  ཁૉͷ಺༰

ཁૉͷάϧʔϓԽ ✦ ݟͨ໨΍σβΠϯΛద༻͢Δࡍɺ จॻߏ଄ͱ͸ؔ܎ͳ͘ཁૉΛά ϧʔϓԽ͍͕ͨ࣌͋͠Γ·͢ ✦ ͦͷࡍ͸ɺdivཁૉͷ಺༰ͱ͠ ؚͯΊΔ͜ͱͰάϧʔϓԽ͢Δ ͜ͱ͕Ͱ͖·͢ ✦
ଞʹద੾ͳҙຯΛද͢ཁૉ͕͋ Δ৔߹͸ͦͪΒΛ࢖༻͠·͠ΐ ͏ <body> <div class="some-section"> <section> ... </section> <section> ... </section> </div> <section> ... </section> </body>

࿅श2-2 ✦ ࿅श2-1ͷHTMLΛҎԼͷΑ͏ʹσβΠϯ͠·͠ΐ͏ ✦ ϔομʔ ✦ จࣈ৭Λ#fffʹ͠·͠ΐ͏ ✦ എܠ৭Λ#002654ʹ͠·͠ΐ͏ ✦
༨നΛ্Լʹ16pxɺࠨӈʹ64pxऔΓ·͠ΐ͏ ✦ ϔομʔͷେݟग़͠ ✦ จࣈαΠζΛ1.5remʹ͠·͠ΐ͏ ✦ ίϯςϯπʢهࣄҰཡηΫγϣϯͱαΠυόʔʣ ✦ ༨നΛ্Լʹ32pxɺࠨӈʹ64pxऔΓ·͠ΐ͏ ✦ ϑολʔ ✦ จࣈ৭Λ#fffʹ͠·͠ΐ͏ ✦ എܠ৭Λ#444ʹ͠·͠ΐ͏ ✦ ༨നΛ্Լʹ16pxɺࠨӈʹ64pxऔΓ·͠ΐ͏

ϘοΫεͷछྨ ✦ ϘοΫεʹ͸͍͔ͭ͘ͷछྨ͕͋Γɺཁૉຖʹॳ ظ஋͕ܾ·͍ͬͯ·͢ ✦ blockʢϒϩοΫϘοΫεʣ ✦ ্͔ΒԼ΁ॎํ޲ʹ഑ஔ͞ΕΔ ✦ ϘοΫεͷલޙʹඞͣվߦ͕ೖΔ
✦ inlineʢΠϯϥΠϯϘοΫεʣ ✦ ࠨ͔Βӈ΁ԣํ޲ʹ഑ஔ͞ΕΔ ✦ ෯ɾߴ͞ɾ্ԼͷϚʔδϯΛࢦఆͰ͖ͳ ͍ ✦ none ✦ දࣔ͞Εͳ͍ ✦ ϒϩοΫͷछྨ͸displayϓϩύςΟʹΑͬͯࢦ ఆ͢Δ͜ͱ΋Ͱ͖·͢ ϒϩοΫϘοΫε ϒϩοΫϘοΫε ϒϩοΫϘοΫε ΠϯϥΠϯϘοΫε ΠϯϥΠ ΠϯϥΠϯϘοΫε ϯϘοΫε ΠϯϥΠϯϘοΫε ΠϯϥΠϯϘοΫε

࿅श2-3 ✦ ࿅श2-2ͷHTMLΛҎԼͷΑ͏ʹσ βΠϯ͠·͠ΐ͏ ✦ άϩʔόϧφϏͷulཁૉ ✦ ΠϯϥΠϯϘοΫεʹ͠·͠ΐ ͏ ✦
άϩʔόϧφϏͷliཁૉ ✦ ΠϯϥΠϯϘοΫεʹ͠·͠ΐ ͏ ✦ ༨നΛࠨʹ32pxऔΓ·͠ΐ ͏

Ϛʔδϯͷ૬ࡴ ✦ ͍͔ͭ͘ͷ৚݅ԼͰ͸ɺϘοΫε ʹࢦఆ্ͨ͠ԼͷϚʔδϯ͸૬ࡴ ͞ΕΔ͜ͱ͕͋Γ·͢ ✦ ྫ͑͹ྡ઀͢Δ2ͭͷϘοΫε͕ ଘࡏ͢Δ৔߹ɺͦΕͧΕʹࢦఆ͠ ্ͨԼͷϚʔδϯ͸૬ࡴ͞Εɺେ ͖͍Ϛʔδϯ͕༗ޮͱͳΓ·͢
✦ ϘοΫεΛѻ͏্Ͱ͓֮͑ͯ͘ͱ ͍͍Ͱ͠ΐ͏ ্ԼʹϚʔδϯΛQY ্ԼʹϚʔδϯΛQY margin-bottom: 10px; margin-top: 30px; margin-top: 10px; margin-bottom: 30px;

ϘοΫεͷϨΠΞ΢τ

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

flexbox ✦ flexboxΛ༻͍ͯϨΠΞ΢τΛ࡞੒͢Δࡍɺ flexίϯςφͱflexΞΠςϜͷ2ͭͷཁૉ͕ ొ৔͠·͢ ✦ ϨΠΞ΢τΛఆ͍ٛͨ͠ෳ਺ͷϘοΫε͕ ͋Δ৔߹ɺͦΕΒͷཁૉΛͦΕͧΕflexΞ ΠςϜͱ͠·͢ ✦
ͦͯ͠ɺflexΞΠςϜΛؚΉ਌ཁૉΛflexί ϯςφͱ͠·͢ ✦ flexboxͰ͸ɺflexίϯςφͷதͰflexΞΠ ςϜͷҐஔ΍ฒͼΛࢦఆͯ͠ϨΠΞ΢τΛ ࡞͍ͬͯ͘͜ͱʹͳΓ·͢ ϘοΫεͷ਌ཁૉ ϘοΫε ϘοΫε ϘοΫε qFYίϯςφ qFYΞΠςϜ qFYΞΠςϜ qFYΞΠςϜ

display: flex; ✦ ਌ཁૉʹରͯ͠ display: flex; Λࢦఆ͢Δ͜ͱͰ flexίϯςφʹ͢Δ͜ͱ ͕Ͱ͖·͢ ✦
·ͨɺflexίϯςφͷࢠ ཁૉ͸ࣗಈతʹflexΞΠ ςϜʹͳΓ·͢ qFYίϯςφ qFY  ΞΠςϜ qFY  ΞΠςϜ qFY  ΞΠςϜ EJTQMBZqFY

ओ࣠ͱަࠩ࣠ ✦ flexίϯςφʹ͸ओ࣠ͱަࠩ࣠ͷ 2ͭͷ͕࣠͋Γ·͢ ✦ flexΞΠςϜ͸ओ࣠ʹԊͬͯฒ΂ ͯ഑ஔ͞ΕɺݸʑͷflexΞΠςϜ ͸ަ্ࠩ࣠ͷҐஔΛࢦఆ͢Δ͜ͱ ͕Ͱ͖·͢ ✦
flexboxͰ͸ɺσϑΥϧτͰओ࣠ ͕ਫฏͳͨΊɺ֤ϘοΫε͸ԣฒ ͼͰදࣔ͞Ε·͢ qFYίϯςφ qFY  ΞΠςϜ qFY  ΞΠςϜ qFY  ΞΠςϜ ओ࣠ ަࠩ࣠

࿅श2-4 ✦ ࿅श2-3ͷHTMLΛҎԼͷ Α͏ʹσβΠϯ͠·͠ΐ ͏ ✦ ϔομʔͷେݟग़͠ɺ ঺հจɺάϩʔόϧφ Ϗήʔγϣϯ ✦
ԣฒͼʹ͠·͠ΐ͏ ✦ ༨നΛ0ʹ͠·͠ΐ͏

flexΞΠςϜΛ৳͹͢ ✦ flexΞΠςϜΛओ࣠ʹԊͬͯ ഑ஔͨ͠ࡍɺflexίϯςφʹ ༨ന͕͋Δ৔߹͸flexΞΠς ϜΛ৳͹͢͜ͱ͕Ͱ͖·͢ ✦ ࢦఆํ๏͸ෳ਺͋Γ·͕͢ɺ 1ͭ͸৳͹͍ͨ͠flexΞΠς Ϝʹ
flex: auto; Λࢦఆ͢Δ ͜ͱͰ৳͹͢͜ͱ͕Ͱ͖·͢ qFYίϯςφ qFY  ΞΠςϜ qFY  ΞΠςϜ qFYBVUP qFY  ΞΠςϜ qFY  ΞΠςϜ qFY  ΞΠςϜ qFY  ΞΠςϜ

ަࠩ࣠ͷҐஔΛἧ͑Δ ✦ flexίϯςφͷalign-itemsϓ ϩύςΟΛࢦఆ͢Δ͜ͱͰ flexΞΠςϜΛަࠩ࣠ʹԊͬͯ ҐஔΛἧ͑Δ͜ͱ͕Ͱ͖·͢ ✦ ·ͨɺݸʑͷflexΞΠςϜͷ align-selfϓϩύςΟΛࢦఆ͢ Δ͜ͱͰݸผʹҐஔΛࢦఆ͢
Δ͜ͱ΋ՄೳͰ͢ qFYίϯςφ qFY  ΞΠςϜ qFY  ΞΠςϜ qFY  ΞΠςϜ BMJHOJUFNTDFOUFS BMJHOTFMGFOE

࿅श2-5 ✦ ࿅श2-4ͷHTMLΛҎԼͷΑ͏ʹσβΠϯ ͠·͠ΐ͏ ✦ ϔομʔ ✦ ֤ﬂexΞΠςϜΛަࠩ࣠ʹԊͬͯ baselineͰἧ͑·͠ΐ͏ ✦
ϔομʔͷ঺հจ ✦ ԣʹ࠷େ·Ͱ৳͹͠·͠ΐ͏ ✦ ༨നΛࠨʹ16pxऔΓ·͠ΐ͏ ✦ ϔομʔͷάϩʔόϧφϏήʔγϣϯ ✦ ަࠩ࣠ʹԊͬͯcenterͰἧ͑· ͠ΐ͏

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

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

flexboxͷೖΕࢠ ✦ flexbox͸ೖΕࢠʹ͢Δ͜ͱ͕ Ͱ͖·͢ ✦ flexΞΠςϜ಺ͷཁૉ΍flexΞ ΠςϜࣗମΛผͷflexίϯςφ ͱͯ͠ࢦఆ͢Δ͜ͱ͕Ͱ͖·͢ ✦ ͜ΕʹΑΓɺෳࡶͳϨΠΞ΢τ
΋γϯϓϧʹهड़͢Δ͜ͱ͕Ͱ ͖·͢ qFYίϯςφ qFYΞΠςϜ qFYΞΠςϜ͔ͭqFYίϯςφ qFYΞΠςϜ qFY  ΞΠςϜ qFYΞΠςϜ qFY  ΞΠςϜ EJTQMBZqFY EJTQMBZqFY

࿅श2-6 ✦ ࿅श2-5ͷHTMLΛҎԼͷΑ͏ʹσβΠϯ͠·͠ΐ͏ ✦ ϔομʔͱίϯςϯπͱϑολʔ ✦ ﬂexΞΠςϜͱͯ͠վΊͯॎʹฒ΂·͠ΐ͏ ✦ ίϯςϯπͷओཁͳ಺༰ͱαΠυόʔ ✦
ԣฒͼʹ͠·͠ΐ͏ ✦ ओཁͳ಺༰ͱαΠυόʔͷؒʹ༨നΛ16pxऔΓ· ͠ΐ͏ ✦ ίϯςϯπͷओཁͳ಺༰ ✦ ԣʹ࠷େ·Ͱ৳͹͠·͠ΐ͏ ✦ എܠ৭Λ#fffʹ͠·͠ΐ͏ ✦ ༨നΛ্Լࠨӈʹ16pxऔΓ·͠ΐ͏ ✦ border-radius: 8px; Λࢦఆ͠·͠ΐ͏ ✦ ίϯςϯπͷαΠυόʔ ✦ എܠ৭Λ#fffʹ͠·͠ΐ͏ ✦ ༨നΛ্Լࠨӈʹ16pxऔΓ·͠ΐ͏ ✦ border-radius: 8px; Λࢦఆ͠·͠ΐ͏ border-radius ... ࿮ઢͷ࢛۱ͷ֯Λؙ͘͢Δ

εςΟοΩʔϑολʔ ✦ ϖʔδͷ಺༰͕গͳ͍৔߹Ͱ΋ϖʔ δͷԼ෦ʹݻఆ͞Ε͍ͯΔϑολʔ ΛεςΟοΩʔϑολʔͱݺͼ·͢ ✦ ﬂexboxΛ༻͍Ε͹εςΟοΩʔ ϑολʔ΋γϯϓϧʹදݱ͢Δ͜ͱ ͕ՄೳͰ͢ ✦
ͨͩ͠ɺﬂexίϯςφʢbodyʣͷ࠷ খͷߴ͞Λmin-heightϓϩύςΟͰ 100vhʹࢦఆ͠ͳ͚Ε͹ͳΓ·ͤΜ qFYίϯςφ CPEZ qFYΞΠςϜ ϔομʔ qFYΞΠςϜ ಺༰ qFYΞΠςϜ ϑολʔ qFYBVUP NJOIFJHIUWI vh ... ϒϥ΢βͷදࣔྖҬʢviewportʣͷߴ͞Ͱ͋Γɺ1vh͸ߴ͞1%ʹ૬౰͢Δ

࿅श2-7 ✦ ࿅श2-6ͷHTMLΛҎ ԼͷΑ͏ʹσβΠϯ ͠·͠ΐ͏ ✦ ϑολʔ ✦ εςΟοΩʔϑο λʔʹ͠·͠ΐ
͏

Α͘࢖ΘΕΔϓϩύςΟ

Α͘࢖ΘΕΔϓϩύςΟ ✦ ϘοΫεͷ࿮ઢͷ࢛۱ͷ֯Λؙ͘͢Δ ✦ border-radius ✦ ϘοΫε͔Β͸Έग़ͨ಺༰ͷදࣔํ๏Λࢦఆ͢Δ ✦ overﬂow ✦
ϘοΫεͷҐஔΛઈର|૬ର࠲ඪͰࢦఆ͢Δ ✦ position, top, right, bottom, left, z-index ✦ ϘοΫε಺ͷΠϯϥΠϯϘοΫεͷจࣈدͤΛࢦఆ͢Δ ✦ text-align ✦ ϘοΫεͷಁ໌౓Λࢦఆ͢Δ ✦ opacity ✦ ϘοΫεʹӨΛ͚ͭΔ ✦ box-shadow

JavaScriptͷجૅΛֶͿ

JavaScriptͱ͸

JavaScriptͱ͸ ✦ ΢ΣϒϖʔδͷΠϯλϥΫςΟϒͳૢ࡞Λ࣮ݱ͢ΔͨΊͷϓϩά ϥϛϯάݴޠͰ͢ ✦ ࠷ۙͰ͸্ه༻్ʹͱͲ·Βͣɺ༷ʑͳ؀ڥͰ࣮ߦ͞ΕΔݴޠͱ ͳ͍ͬͯ·͢ ✦ ϒϥ΢βʔ্Ͱ࣮ߦ͞ΕΔJavaScript ✦
αʔόʔ্Ͱ࣮ߦ͞ΕΔJavaScriptʢNode.jsͳͲʣ ✦ Ϋϥ΢υͰ࣮ߦ͞ΕΔJavaScriptʢGoogle Apps ScriptͳͲʣ ✦ ͜ͷݚमͰ͸ɺϒϥ΢βʔ্Ͱ࣮ߦ͞ΕΔJavaScriptΛѻ͍·͢

JavaScriptͷόʔδϣϯ ✦ JavaScriptͷඪ४࢓༷͸ECMAScriptͱݺ͹Ε͓ͯΓɺ ࠓ೔Ͱ͸ຖ೥όʔδϣϯ͕վగ͞ΕΔΑ͏ʹͳΓ·ͨ͠ ✦ ࠓ೔࣌఺Ͱ͸ECMAScript 2017͕࠷৽ͱͳΓ·͕͢ɺओ ཁͳϒϥ΢βʔͰ΋ରԠঢ়گ͸·ͪ·ͪͰ͢ ✦ ݱ࣌఺Ͱ͸ɺ࢖༻͢Δߏจɾػೳ͕ରԠ͍ͯ͠Δ͔ৗʹ
֬ೝͭͭ͠ɺ৔߹ʹΑͬͯ͸τϥϯεύΠϥʔͳͲΛར ༻͢Δͷ͕޷·͍͠Ͱ͠ΐ͏ τϥϯεύΠϥʔ ... ͜͜Ͱ͸ECMAScriptͷ࠷৽όʔδϣϯͷߏจ͔Βաڈόʔδϣϯͷίʔυʹม׵͢Δ͜ͱΛࢦ͢

JavaScriptͷॻ͖ํ

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

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

scriptཁૉͷҐஔ ✦ JavaScript͸ɺscriptཁૉͷ಺༰ͱͯ͠هड़͢Δ͔ɺผ ϑΝΠϧʹهड़ͯ͠srcଐੑͰURIΛࢦఆ͢Δ͜ͱͰ࣮ߦ͞ ͤΔ͜ͱ͕Ͱ͖·͢ ✦ ͨͩ͠ɺscriptཁૉͷҐஔΛHTMLͷͲͷҐஔʹ഑ஔ͢Δ ͔Ͱڍಈ͕มΘ͖ͬͯ·͢ͷͰؾΛ͚ͭ·͠ΐ͏ ✦ ࢀߟɿεΫϦϓτ഑ஔͱϖʔδ଎౓ 
http://contentloaded.com/dom-ready/

࿅श3-1 console.log('Hello, JavaScript!'); ✦ script.jsΛΤσΟλʔͰ ։͍ͯιʔείʔυΛ ֬ೝͯ͠Έ·͠ΐ͏ ✦ ࿅श2-7ͷHTMLʹӈͷ scriptཁૉΛهड़ͯ͠
JavaScriptΛಡΈࠐΈ ·͠ΐ͏ <body> ... <script src="script.js"></ script> </body> console.log() ... ୈҰҾ਺Ͱࢦఆͨ͠ϝοηʔδΛίϯιʔϧ্ʹग़ྗ͢Δؔ਺

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ͷུ

ϊʔυͷऔಘ ✦ ϊʔυΛऔಘ͢Δࡍ͸ documentΦϒδΣΫτͷ֤ϝ ιουΛར༻͠·͢ ✦ ϝιουຖʹऔಘ͍ͨ͠ϊʔυ ͷࢦఆํ๏͕ҟͳΓ·͢ ✦ ·ͨɺϝιουʹΑͬͯ͸ෳ਺
ͷཁૉͷίϨΫγϣϯ͕ฦ٫͞ ΕΔ͜ͱʹ஫ҙ͠·͠ΐ͏ // IDΛࢦఆͯ͠1ͭऔಘ͢Δ document.getElementById('ID'); // Ϋϥε໊Λࢦఆͯ͠ෳ਺औಘ͢Δ document.getElementsByClassName('Ϋϥε ໊'); // ཁૉλΠϓΛࢦఆͯ͠ෳ਺औಘ͢Δ document.getElementsByTagName('ཁૉλΠ ϓ'); // CSSηϨΫλʔΛࢦఆͯ͠1ͭऔಘ͢Δ document.querySelector('CSSηϨΫλʔ'); // CSSηϨΫλʔΛࢦఆͯ͠ෳ਺औಘ͢Δ document.querySelectorAll('CSSηϨΫλ ʔ');

ϊʔυͷૢ࡞ ✦ औಘͨ͠ϊʔυͷϝιου΍ ϓϩύςΟΛར༻͢Δ͜ͱͰ ϊʔυΛૢ࡞͢Δ͜ͱ͕Ͱ͖ ·͢ ✦ ৽͍͠ϊʔυΛ࡞੒ͯ͠௥Ճ ͢Δ͜ͱ΋ՄೳͰ͢ ✦
ଞʹ΋ɺଐੑ΍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); // []

࿅श3-2 ✦ ։ൃπʔϧͷίϯιʔϧ্ͰҎԼͷ಺༰Λࢼͯ͠Έ ·͠ΐ͏ ✦ h1ཁૉͷϊʔυΛऔಘ͠·͠ΐ͏ ✦ articleཁૉ಺ͷ࠷ޙͷҐஔʹ৽͍͠ஈམΛ௥Ճ͠ ·͠ΐ͏ ✦
αΠυόʔʹsidebarΫϥεΛ௥Ճ͠·͠ΐ͏

Πϕϯτͱඇಉظॲཧ

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

ΠϕϯτϦεφʔͷొ࿥ ✦ ΠϕϯτϦεφʔ͸ɺૢ࡞͠ ͨର৅ʢಛఆͷཁૉ΍ϖʔ δɺ΢Οϯυ΢ͳͲʣΛࢦ ఆͯ͠ొ࿥͠·͢ ✦ ର৅ΦϒδΣΫτͷ addEventListenerϝιου ʹΠϕϯτͷछྨͱίʔϧ
όοΫؔ਺Λࢦఆ͢Δ͜ͱ Ͱొ࿥Ͱ͖·͢ // buttonཁૉΛΫϦοΫͨ͠ࡍʹ࣮ߦ͞ΕΔ button.addEventListener('click', function() { console.log('Ϙλϯ͕ΫϦοΫ͞Ε·ͨ͠'); }); // ΢Οϯυ΢ͷαΠζΛมߋͨ͠ࡍʹ࣮ߦ͞ΕΔ window.addEventListener('resize', function() { console.log('΢Οϯυ΢͕ϦαΠζ͞Ε·ͨ͠'); }); // DOMπϦʔͷߏங͕׬ྃͨ͠ࡍʹ࣮ߦ͞ΕΔ document.addEventListener('DOMContentLoaded', function() { console.log('DOMπϦʔ͕ߏங͞Ε·ͨ͠'); }); window ... ϖʔδΛද͍ࣔͯ͠Δ΢Οϯυ΢Λૢ࡞͢ΔΦϒδΣΫτ͔ͭάϩʔόϧΦϒδΣΫτ

ίʔϧόοΫؔ਺ ✦ JavaScriptͰ͸ɺؔ਺Λݺͼग़ ͢ࡍʹҾ਺ͱͯ͠ଞͷؔ਺Λ౉ ͢͜ͱ͕Ͱ͖·͢ ✦ ݺͼग़͠ઌͷؔ਺Ͱ͸ɺ࣮ߦத ʹҾ਺ͱͯ͠౉͞Εͨؔ਺Λ࣮ ߦ͢Δ͜ͱ͕Ͱ͖·͢ ✦
͜ͷΑ͏ͳҾ਺ͱͯ͠౉͞ΕΔ ؔ਺ͷ͜ͱΛίʔϧόοΫؔ਺ ͱݺͼ·͢ function foo(callbackFunction) { // 2. ԿΒ͔ͷॲཧ... // 3. ίʔϧόοΫؔ਺Λ࣮ߦ͢Δ callbackFunction('׬ྃ'); } // 1. fooΛ࣮ߦ͢Δ foo(function(message) { // 4. ׬ྃ ͱग़ྗ͞ΕΔ console.log(message); }); JavaScriptͷؔ਺͸ୈҰڃΦϒδΣΫτͰ͋ΔͨΊɺ୅ೖ΍ʢҾ਺΍໭Γ஋ͱͯ͠ͷʣड͚౉͠ͳͲ͕ߦ͑Δ

ඇಉظॲཧ ✦ ΠϕϯτϦεφʔΛొ࿥ͨ͠ࡍɺ ࣮ࡍʹΠϕϯτ͕ൃੜ͢Δ·Ͱॲ ཧΛࢭΊΔ͜ͱ͸ͳ͘ɺޙଓͷॲ ཧΛ࣮ߦ͍͖ͯ͠·͢ ✦ ΠϕϯτϦεφʔʹొ࿥ͨ͠ίʔ ϧόοΫؔ਺͸ɺΠϕϯτ͕ൃੜ ͨ͠ࡍʹඇಉظతʹ࣮ߦ͞ΕΔ͜
ͱʹͳΓ·͢ ✦ JavaScriptͰ͸ɺ͜͏͍ͬͨඇಉ ظॲཧ͕ଟ͘ొ৔͠·͢ // 1 ಉظతʹ࣮ߦ͞ΕΔ console.log('Ϙλϯ͕ΫϦοΫ͞Ε·ͨ͠'); // 2 ΠϕϯτϦεφʔͷొ࿥͚ͩߦ͏ button.addEventListener('click', function() { // 4 ඇಉظ࣮ߦ͞ΕΔ console.log('Ϙλϯ͕ΫϦοΫ͞Ε·ͨ͠'); }); // 3 ಉظతʹ࣮ߦ͞ΕΔ console.log('Ϙλϯ͕ΫϦοΫ͞Ε·ͨ͠');

࿅श3-3 ✦ ࿅श3-2ͷCSSͱJSΛҎԼͷΑ͏ʹมߋ͠· ͠ΐ͏ ✦ CSSʹԼهͷϧʔϧΛΛ௥Ճ͠·͠ΐ͏  .hidden { display: none;
} ✦ αΠυόʔΛΫϦοΫͨ͠Β൷ධ࣌ʹͳΔΑ ͏ʹͯ͠Έ·͠ΐ͏

ίʔϧόοΫ஍ࠈ ✦ ඇಉظॲཧΛ௚ྻʹ࣮ߦ͢Δ ৔߹ɺίʔϧόοΫؔ਺ͷத Ͱ࣍ͷඇಉظॲཧΛݺͿඞཁ ͕͋Γ·͢ ✦ ͦͷ݁Ռɺؔ਺ͷωετ͕ਂ ͘ͳͬͯՄಡੑ͕མͪͯ͠· ͍·͢
✦ ͜ΕΛίʔϧόοΫ஍ࠈͱݺ Ϳ͜ͱ͕͋Γ·͢ // 1. asyncAΛ࣮ߦ͢Δ asyncA(function() { // 2. asyncAͷ׬ྃޙʹ // asyncBΛ࣮ߦ͢Δ asyncB(function() { // 3. asyncBͷ׬ྃޙʹ // asyncCΛ࣮ߦ͢Δ asyncC(function() { // 4. asyncC͕׬ྃ͢Δ }); }); });

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 ... ඇಉظॲཧΛந৅Խͨ͠ΦϒδΣΫτͱɺͦΕΛૢ࡞͢Δ࢓૊Έͷ͜ͱ

ඇಉظ௨৴ ✦ JavaScriptͰ͸ɺϖʔδΛ࠶ಡࠐ͢Δ͜ͱͳ͘ɺ֎෦ͷαʔ όʔͱHTTP௨৴Λߦ͏͜ͱ͕Ͱ͖·͢ ✦ ͜ΕʹΑΓɺ֎෦ͷαʔόʔͱ৘ใΛ΍ΓͱΓ͠ɺऔಘͨ͠σʔ λΛݩʹϖʔδΛγʔϜϨεʹॻ͖׵͑Δ͜ͱ͕ՄೳʹͳΓ· ͢ ✦ ͜ͷΑ͏ͳɺJavaScriptͷඇಉظ௨৴ͱHTMLɺCSSΛ૊Έ߹
ΘͤͯΠϯλϥΫςΟϒͳϖʔδΛߏங͢Δٕज़ͷ͜ͱΛAjax ͱݺͼ·͢ Ajax ... Asynchronous JavaScript + XMLͷུ

Fetch API ✦ ࠷ۙͰ͸ɺFetch APIΛར༻ͯ͠ඇಉظ௨৴Λߦ ͏͜ͱ͕ଟ͘ͳ͖ͬͯ·ͨ͠ ✦ ͜Ε͸ɺैདྷ࢖ΘΕ͖ͯͨXMLHttpRequestͱൺ ΂ͯΑΓγϯϓϧ͔ͭڧྗͳ΋ͷʹͳ͍ͬͯ·͢ ✦
Fetch API͕ར༻Ͱ͖ͳ͍؀ڥͰ͸ϙϦϑΟϧΛ ࢖༻͢ΔͱΑ͍Ͱ͠ΐ͏ ϙϦϑΟϧ ... ࠷৽ͷػೳΛαϙʔτ͍ͯ͠ͳ͍؀ڥʹରͯͦ͠ͷػೳΛ࢖༻Ͱ͖ΔΑ͏ʹ͢Δίʔυͷ͜ͱ

ϦΫΤετͱϨεϙϯε ✦ 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); });

࿅श3-4 ✦ ࿅श3-3ͷHTMLΛҎԼͷΑ͏ʹมߋ͠·͠ΐ͏ ✦ هࣄҰཡηΫγϣϯ಺ͷ࠷ޙʹʮ΋ͬͱݟΔʯจݴ Λ௥Ճ͠·͠ΐ͏ ✦ ʮ΋ͬͱݟΔʯจݴΛΫϦοΫͨ͠ࡍʹɺඇಉظ௨ ৴Ͱarticle.htmlΛಡΈࠐΈɺԼͷίʔυΛࢀߟʹ͠ ͳ͕Βத਎ͷHTMLจࣈྻΛʮ΋ͬͱݟΔʯจݴͷख
લʹ௥Ճ͠·͠ΐ͏  readMore.insertAdjacentHTML('beforebegin', htmlStr); insertAdjacentHTML() ... ୈҰҾ਺Ͱࢦఆͨ͠ҐஔʹୈೋҾ਺Ͱࢦఆͨ͠จࣈྻΛHTMLʹม׵ͯ͠௥Ճ͢Δ

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

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

More Decks by norinux

Other Decks in Education

Featured

Transcript

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

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