Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

HTMLͷجૅΛֶͿ

Slide 7

Slide 7 text

HTMLͱ͸

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

HTMLͷॻ͖ํ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Qཁૉ λάͱཁૉ ✦ λά͸ཁૉܕΛ<>ͰғΜ Ͱද͠·͢ ✦ ಺༰Λ։࢝λάͱऴྃλά ͰғΜͰϚʔΫΞοϓͨ͠ ΋ͷΛཁૉͱݺͼ·͢ ✦ ཁૉͷ಺༰ʹ͸ଞͷཁૉΛ ؚΊΔʢೖΕࢠʣ͜ͱ͕Ͱ ͖·͢

จষ

։࢝λά ऴྃλά ಺༰ p͸ஈམ (paragraph) Λද͢ λά

ཁૉܕ ཁૉͷೖΕࢠ


 …


Slide 15

Slide 15 text

ଐੑ ✦ ཁૉʹؔ͢Δ௥Ճ৘ ใΛଐੑͱͯ࣋ͨ͠ ͤΔ͜ͱ͕Ͱ͖·͢ ✦ ͢΂ͯͷཁૉͰڞ௨ ͳάϩʔόϧଐੑͱ ͦͷཁૉݻ༗ͷଐੑ ͕ଘࡏ͠·͢ IUNMཁૉͷMBOHଐੑ

Slide 16

Slide 16 text

ۭཁૉ ✦ ಺༰ͷͳ͍ཁૉΛۭ ཁૉͱݺͼ·͢ ✦ ऴྃλά͸লུ͞Ε
 ։࢝λάͷΈͰද͠ ·͢ ۭཁૉ

 brཁૉ͸վߦ (break) Λද͢
 imgཁૉ͸ը૾ (image) Λද͢

Slide 17

Slide 17 text

HTMLͷجຊߏ੒ ✦ HTMLͷجຊతͳߏ੒ Λݟ͍͖ͯ·͠ΐ͏ ϖʔδλΠτϧ ϖʔδ಺༰

Slide 18

Slide 18 text

DOCTYPEએݴ ✦ ͲͷόʔδϣϯHTML Ͱهड़͞Ε͍ͯΔ͔ Λ๯಄Ͱએݴ͠·͢ ✦ HTML5Ͱ͸࣮࣭͓· ͡ͳ͍ͷΑ͏ͳ΋ͷ ʹͳ͍ͬͯ·͢ ϖʔδλΠτϧ ϖʔδ಺༰

Slide 19

Slide 19 text

htmlཁૉ ✦ Ұ൪֎ଆʹ഑ஔ͞Ε ΔཁૉͰ͢ʢϧʔτ ཁૉͱݺ͹Ε·͢ʣ ✦ ͦͷϖʔδ͕Ͳͷݴ ޠͰهड़͞Ε͍ͯΔ ͔ΛlangଐੑͰද͠ ·͢ ϖʔδλΠτϧ ϖʔδ಺༰

Slide 20

Slide 20 text

headཁૉ ✦ ϖʔδͷϝλσʔλ Λද͢ཁૉΛؚΊͨ ཁૉͰ͢ ✦ htmlཁૉͷ௚Լʹ1ͭ ͚ͩهड़͠·͢ ϖʔδλΠτϧ ϖʔδ಺༰

Slide 21

Slide 21 text

metaཁૉ ✦ ϖʔδͷ༷ʑͳϝλσʔλ Λද͢ཁૉͰ͢ ✦ ୅දతͳϝλσʔλʹϖʔ δͷจࣈίʔυ͕͋Γ·͢ ✦ charsetଐੑʹΑΔจࣈίʔ υͷࢦఆ͸headཁૉ಺ͷҰ ൪࠷ॳʹࢦఆ͢ΔͱΑ͍Ͱ ͠ΐ͏ ϖʔδλΠτϧ ϖʔδ಺༰

Slide 22

Slide 22 text

titleཁૉ ✦ ϖʔδͷλΠτϧΛ ද͢ཁૉͰ͢ ✦ ͦͷϖʔδͷ಺༰Λ ۩ମతʹදͨ͠Θ͔ Γ΍͍͢λΠτϧΛ ͚ͭΔΑ͏ʹ͠· ͠ΐ͏ ϖʔδλΠτϧ ϖʔδ಺༰

Slide 23

Slide 23 text

bodyཁૉ ✦ ࣮ࡍʹදࣔ͞ΕΔϖʔ δͷ಺༰ΛؚΊͨཁ ૉͰ͢ ✦ htmlཁૉͷ௚Լʹ headཁૉʹଓ͍ͯ1 ͚ͭͩهड़͠·͢ ϖʔδλΠτϧ ϖʔδ಺༰

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

࿅श1.1 {໊લ}ͷϒϩά ϒϩάͷ಺༰ ✦ index.htmlΛΤσΟ λʔͰ։͍ͯιʔε ίʔυΛ֬ೝͯ͠Έ ·͠ΐ͏ ✦ ϒϥ΢βʔͰදࣔ͠ ͯΈ·͠ΐ͏

Slide 26

Slide 26 text

จষͷߏ଄Խ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

h1ʙh6ཁૉ ✦ ݟग़͠Λද͢ཁૉͰ ͢ ✦ จষͷݟग़͠Ϩϕϧ ʹ߹Θͤͯh1͔Βॱ ൪ʹ࢖༻͠·͢

େݟग़͠

େݟग़͠ͷ಺༰

தݟग़͠

தݟग़͠ͷ಺༰1 தݟग़͠ͷ಺༰2

খݟग़͠

খݟग़͠ͷ಺༰

Slide 29

Slide 29 text

pཁૉ ✦ ஈམΛද͢ཁૉͰ͢ ✦ จষΛվߦ͢Δࡍ͸ɺ ৽͍͠ஈམͱͯ͠෼ ͚ͯهड़͢ΔͱΑ͍ Ͱ͠ΐ͏

େݟग़͠

େݟग़͠ͷ಺༰

தݟग़͠

தݟग़͠ͷ಺༰1

தݟग़͠ͷ಺༰2

খݟग़͠

খݟग़͠ͷ಺༰

Slide 30

Slide 30 text

sectionཁૉ ✦ จষͷষ΍અʢηΫ γϣϯʣΛද͢ཁૉ Ͱ͢ ✦ sectionཁૉͷೖΕࢠ ʹΑͬͯষ΍અͷ֊ ૚ԽΛද͠·͢

େݟग़͠

େݟग़͠ͷ಺༰

தݟग़͠

தݟग़͠ͷ಺༰1

தݟग़͠ͷ಺༰2

খݟग़͠

খݟग़͠ͷ಺༰

Slide 31

Slide 31 text

ηΫγϣχϯάϧʔτ ✦ bodyཁૉ͸ͦͷจষશ ମͷηΫγϣϯʢηΫ γϣχϯάϧʔτʣͱ ͳΓ·͢ ✦ bodyཁૉͷ௚Լͷ sectionཁૉ͸লུͯ͠ ΋͔·͍·ͤΜ

େݟग़͠

...(಺༰)...

தݟग़͠

...(಺༰)...

...(಺༰)...

খݟग़͠

...(಺༰)...

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

େݟग़͠

େݟग़͠ͷ಺༰

χϡʔεهࣄ

χϡʔεهࣄͷ಺༰1

χϡʔεهࣄͷ಺༰2

খݟग़͠

খݟग़͠ͷ಺༰

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

asideཁૉ ✦ ϝΠϯίϯςϯπ͔Β ੾Γ཭͢͜ͱ͕Ͱ͖Δ ηΫγϣϯͰ͋Δ͜ͱ Λද͢ཁૉͰ͢ ✦ ͍ΘΏΔαΠυόʔ΍ ϝΠϯهࣄ಺ͷίϥϜ ෦෼ɺิ଍৘ใͳͲ͕ ͋ͨΓ·͢ ...

χϡʔεهࣄ

χϡʔεهࣄͷ಺༰1

χϡʔεهࣄͷ಺༰2

ίϥϜ

ίϥϜͷ಺༰

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

େݟग़͠

಺༰

©2018 example.com

Slide 43

Slide 43 text

mainཁૉ ✦ ͦͷϖʔδͷओཁͳ ಺༰Λද͢ཁૉͰ͢ ✦ ϖʔδʹ͸1ͭͷmain ཁૉͷΈهड़͢Δ͜ ͱ͕Ͱ͖·͢

େݟग़͠

಺༰

©2018 example.com small ... ஶ࡞ݖදهΛද͢ཁૉ

Slide 44

Slide 44 text

footerཁૉ ✦ ௚ۙͷηΫγϣϯʹର ͢ΔϑολʔΛද͢ཁ ૉͰ͢ ✦ ϑολʔʹ͸ɺͦͷη Ϋγϣϯͷஶ࡞ऀʹؔ ͢Δ৘ใ΍ؔ࿈υΩϡ ϝϯτ΁ͷϦϯΫ౳Λ ؚΊΔ͜ͱ͕Ͱ͖·͢

େݟग़͠

಺༰

©2018 example.com

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Α͘࢖ΘΕΔཁૉ

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

CSSͷجૅΛֶͿ

Slide 50

Slide 50 text

CSSͱ͸

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

CSSͷॻ͖ํ

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Ϋϥε໊ *%

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

࿅श2-1 body { margin: 0; background-color: #f6f6f6; color: #333; font-size: 16px; } ✦ style.cssΛΤσΟλʔ Ͱ։͍ͯιʔείʔυ Λ֬ೝͯ͠Έ·͠ΐ͏ ✦ ࿅श1-4ͷHTMLʹӈͷ linkཁૉΛهड़ͯ͠CSS ΛಡΈࠐΈ·͠ΐ͏ ... background-colorϓϩύςΟ͸എܠ৭ɺcolorϓϩύςΟ͸จࣈ৭ɺfont-size͸จࣈαΠζΛมߋ͢Δ

Slide 65

Slide 65 text

ཁૉͱϘοΫε

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

ϘοΫεͷϨΠΞ΢τ

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Α͘࢖ΘΕΔϓϩύςΟ

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

JavaScriptͷجૅΛֶͿ

Slide 95

Slide 95 text

JavaScriptͱ͸

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

JavaScriptͷॻ͖ํ

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

DOM

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

Πϕϯτͱඇಉظॲཧ

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

Ajax

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

ԋश