Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2018年新卒エンジニア研修 JS・HTML・CSS
Search
norinux
May 10, 2018
Education
0
130
2018年新卒エンジニア研修 JS・HTML・CSS
norinux
May 10, 2018
Tweet
Share
More Decks by norinux
See All by norinux
NoCode開発で「オウ、ノーー!
norinux
0
900
インターネット基礎講座
norinux
0
110
スタートアップスタジオ流の開発プロセス
norinux
0
55
会社で書いてるコードも「OSSで公開しちゃえ!」ってしたいからそうした話 in OSS開発してる(したい)エンジニア交流会 /gx-oss-guideline-at-techmeetups
norinux
0
410
My Lightning Talk 「副業している(したい) エンジニア交流会 #2」
norinux
0
140
エンジニア流? こだわりのミーティング手法
norinux
1
130
スタートアップスタジオでの検証フェーズと技術
norinux
0
530
2018年新卒エンジニア研修 プログラミング研修【公開版】
norinux
0
64
2018年新卒エンジニア研修 セキュリティ
norinux
0
77
Other Decks in Education
See All in Education
自己紹介 / who-am-i
yasulab
PRO
2
4.6k
1127
cbtlibrary
0
190
5 Things Every L&D Pro Should Steal from Marketing
tmiket
0
160
Flinga
matleenalaakso
2
14k
地図を活用した関西シビックテック事例紹介
barsaka2
0
180
Pen-based Interaction - Lecture 4 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.6k
統計学に必要な数学(線形代数含む)
kosugitti
0
280
Informasi Program Coding Camp 2025 powered by DBS Foundation
codingcamp2025
0
160
Data Representation - Lecture 3 - Information Visualisation (4019538FNR)
signer
PRO
1
2.2k
Use Cases and Course Review - Lecture 8 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
880
Sanapilvet opetuksessa
matleenalaakso
0
31k
リバースバケットリスト 〜 「死ぬまでにやることリスト」の欠点と対処法
takibi333
0
130
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
40k
Music & Morning Musume
bryan
46
6.4k
The Invisible Side of Design
smashingmag
299
50k
Visualization
eitanlees
146
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Scaling GitHub
holman
459
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Bash Introduction
62gerente
611
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
How GitHub (no longer) Works
holman
314
140k
GraphQLとの向き合い方2022年版
quramy
44
14k
Transcript
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ʹɺHTML5HTML 4.01ɺXHTMLͳͲ͍ͭ͘ ͔ͷόʔδϣϯ͕͋Γ·͢ ✦ 20185݄࣌Ͱɺ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 ཁૉΛىͱͨ͠ཁૉͷπϦʔߏ ͱͯ͠ද͢͜ͱ͕Ͱ͖·͢ ✦ ͜ͷπϦʔߏɺઌͰొ͢Δ CSSJavaScriptΛ༻͍ͯཁૉΛબ ɾૢ࡞͢Δ্ͰΑ͘༻͍ΒΕ· ͢
✦ ιʔείʔυ͔ΒπϦʔߏΛΠϝʔ δͰ͖ΔΑ͏ʹ͓ͯ͘͠ͱྑ͍Ͱ ͠ΐ͏ πϦʔߏ 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ཁૉʹɺӈʹ ࣔ͢จষΛهड़͠· ͠ΐ͏ ✦ ΞτϥΠϯΛ֬ೝ ͯ͠Έ·͠ΐ͏ {໊લ}ͷϒϩά
{໊લ}ͷϒϩάͰ͢ ɹهࣄҰཡ ɹɹ20185݄10ͷهࣄ ɹɹࠓHTMLʹֶ͍ͭͯͼ ɹɹ·ͨ͠ɻ
࿅श1.2 ✦ ࿅श1.1ͷHTMLͷ bodyཁૉʹɺӈʹ ࣔ͢จষΛهड़͠· ͠ΐ͏ ✦ ΞτϥΠϯΛ֬ೝ ͯ͠Έ·͠ΐ͏ {໊લ}ͷϒϩά
{໊લ}ͷϒϩάͰ͢ ɹهࣄҰཡ ɹɹ20185݄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ͱಉ༷ʹCSS1CSS 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Λࢦఆ͢Δ͜ͱ ͕Ͱ͖·͢ ✦ ͜ΕΒ͍ͣΕCSSJavaScript ͰཁૉΛࣝผɾબ͢Δࡍʹར༻͢ ΔଐੑͰ͢
✦ ͨͩ͠ɺidଐੑʹΑͬͯ༩͑ͨID ϖʔδͰ1͚ͭͩʹͳΔΑ͏ʹؾ Λ͚ͭ·͠ΐ͏ <h1 class="heading"> <h1 id="page-heading"> Ϋϥε໊ *%
ٙࣅΫϥε ✦ ٙࣅΫϥεࠓ·ͰͷηϨΫλʔ ʹՃ͢ΔΩʔϫʔυͰ͢ ✦ ηϨΫλʔʹΑͬͯબ͞Εͨ ཁૉͷ͏ͪɺٙࣅΫϥεʹΑͬ ͯࢦఆ͞Εͨಛఆͷঢ়ଶʹ͋Δ ཁૉͷΈΛબ͠·͢ ✦
first-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ͰෳͷϘοΫεΛΈ߹Θͤͯஔ͢Δ͜ͱ ͰɺஈΈͳͲͷϨΠΞτΛ࡞Γ·͢ ✦ ࠷ۙͰɺैདྷͱൺͯΑΓײతͰॊೈͳflexbox Λ༻͍ͯϨΠΞτΛ࡞͍ͬͯ͘͜ͱ͕ଟ͘ͳ͖ͬͯ ·ͨ͠ ✦ ओཁϒϥβʔ΄΅αϙʔτ͍ͯ͠ΔͨΊɺࠓ࣌
ͰflexboxΛར༻͢Δ͜ͱΛ͓͢͢Ί͠·͢
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ΛҎԼͷΑ͏ʹσβΠϯ ͠·͠ΐ͏ ✦ ϔομʔ ✦ ֤flexΞΠςϜΛަࠩ࣠ʹԊͬͯ baselineͰἧ͑·͠ΐ͏ ✦
ϔομʔͷհจ ✦ ԣʹ࠷େ·Ͱ৳͠·͠ΐ͏ ✦ ༨നΛࠨʹ16pxऔΓ·͠ΐ͏ ✦ ϔομʔͷάϩʔόϧφϏήʔγϣϯ ✦ ަࠩ࣠ʹԊͬͯcenterͰἧ͑· ͠ΐ͏
ओ࣠ͱަࠩ࣠ΛೖΕସ͑Δ ✦ flex-directionϓϩύςΟͰओ ࣠ͷํΛࢦఆ͢Δ͜ͱͰओ ࣠ͱަࠩ࣠ΛೖΕସ͑Δ͜ͱ ͕Ͱ͖·͢ ✦ rowͷ߹ɺओ࣠ͷํਫ ฏʹͳΓ·͢ʢσϑΥϧτʣ ✦
columnͷ߹ɺओ࣠ͷํ ਨʹͳΓ·͢ qFYίϯςφ ओ࣠ ަࠩ࣠ qFYEJSFDUJPOSPX
ओ࣠ͱަࠩ࣠ΛೖΕସ͑Δ ✦ flex-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ΛҎԼͷΑ͏ʹσβΠϯ͠·͠ΐ͏ ✦ ϔομʔͱίϯςϯπͱϑολʔ ✦ flexΞΠςϜͱͯ͠վΊͯॎʹฒ·͠ΐ͏ ✦ ίϯςϯπͷओཁͳ༰ͱαΠυόʔ ✦
ԣฒͼʹ͠·͠ΐ͏ ✦ ओཁͳ༰ͱαΠυόʔͷؒʹ༨നΛ16pxऔΓ· ͠ΐ͏ ✦ ίϯςϯπͷओཁͳ༰ ✦ ԣʹ࠷େ·Ͱ৳͠·͠ΐ͏ ✦ എܠ৭Λ#fffʹ͠·͠ΐ͏ ✦ ༨നΛ্Լࠨӈʹ16pxऔΓ·͠ΐ͏ ✦ border-radius: 8px; Λࢦఆ͠·͠ΐ͏ ✦ ίϯςϯπͷαΠυόʔ ✦ എܠ৭Λ#fffʹ͠·͠ΐ͏ ✦ ༨നΛ্Լࠨӈʹ16pxऔΓ·͠ΐ͏ ✦ border-radius: 8px; Λࢦఆ͠·͠ΐ͏ border-radius ... ઢͷ࢛۱ͷ֯Λؙ͘͢Δ
εςΟοΩʔϑολʔ ✦ ϖʔδͷ༰͕গͳ͍߹Ͱϖʔ δͷԼ෦ʹݻఆ͞Ε͍ͯΔϑολʔ ΛεςΟοΩʔϑολʔͱݺͼ·͢ ✦ flexboxΛ༻͍ΕεςΟοΩʔ ϑολʔγϯϓϧʹදݱ͢Δ͜ͱ ͕ՄೳͰ͢ ✦
ͨͩ͠ɺflexίϯςφʢbodyʣͷ࠷ খͷߴ͞Λmin-heightϓϩύςΟͰ 100vhʹࢦఆ͠ͳ͚ΕͳΓ·ͤΜ qFYίϯςφ CPEZ qFYΞΠςϜ ϔομʔ qFYΞΠςϜ ༰ qFYΞΠςϜ ϑολʔ qFYBVUP NJOIFJHIUWI vh ... ϒϥβͷදࣔྖҬʢviewportʣͷߴ͞Ͱ͋Γɺ1vhߴ͞1%ʹ૬͢Δ
࿅श2-7 ✦ ࿅श2-6ͷHTMLΛҎ ԼͷΑ͏ʹσβΠϯ ͠·͠ΐ͏ ✦ ϑολʔ ✦ εςΟοΩʔϑο λʔʹ͠·͠ΐ
͏
Α͘ΘΕΔϓϩύςΟ
Α͘ΘΕΔϓϩύςΟ ✦ ϘοΫεͷઢͷ࢛۱ͷ֯Λؙ͘͢Δ ✦ border-radius ✦ ϘοΫε͔ΒΈग़ͨ༰ͷදࣔํ๏Λࢦఆ͢Δ ✦ overflow ✦
ϘοΫεͷҐஔΛઈର|૬ର࠲ඪͰࢦఆ͢Δ ✦ 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
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 ... ඇಉظॲཧΛநԽͨ͠ΦϒδΣΫτͱɺͦΕΛૢ࡞͢ΔΈͷ͜ͱ
Ajax
ඇಉظ௨৴ ✦ 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ʹมͯ͠Ճ͢Δ
ԋश