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
初心者向けざっくりHTML/CSSコーディングハンズオン資料
Search
Tetsuhiro Sato
April 25, 2017
Programming
2
2.5k
初心者向けざっくりHTML/CSSコーディングハンズオン資料
HTML/CSSのコーディングをざっくりと教えるというハンズオンを開催しました。
Tetsuhiro Sato
April 25, 2017
Tweet
Share
More Decks by Tetsuhiro Sato
See All by Tetsuhiro Sato
oremega
oremega
1
1.1k
デザイナー向けコーディング講座
oremega
4
1.8k
出来ると嬉しいWebデザイナーのコーディング
oremega
0
190
Other Decks in Programming
See All in Programming
Unity Android XR入門
sakutama_11
0
180
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
Ça bouge du côté des animations CSS !
goetter
2
140
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
130
Formの複雑さに立ち向かう
bmthd
1
920
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
160
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
980
技術を改善し続ける
gumioji
0
110
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
200
Open source software: how to live long and go far
gaelvaroquaux
0
660
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
220
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
98
5.4k
Optimizing for Happiness
mojombo
376
70k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Six Lessons from altMBA
skipperchong
27
3.6k
Code Review Best Practice
trishagee
67
18k
Agile that works and the tools we love
rasmusluckow
328
21k
Adopting Sorbet at Scale
ufuk
74
9.2k
Raft: Consensus for Rubyists
vanstee
137
6.8k
We Have a Design System, Now What?
morganepeng
51
7.4k
The Invisible Side of Design
smashingmag
299
50k
Designing Experiences People Love
moore
140
23k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Transcript
࣍ σβΠϯͷཁૉղ )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϋϯζΦϯ ελΠϧΛ͋ͯΔʢ4$44 $44ʣ ಈ͖Λ͚ͭΔ KT ϋϯζΦϯ લ
ޙ
σβΠϯΛݟͯύʔτʹ͚Δ σβΠϯͷཁૉղ
σβΠϯͷཁૉղ
σβΠϯͷཁૉղ ݟग़͠ ݟग़͠ ݟग़͠ ݟग़͠ ஈམ ஈམ ஈམ
σβΠϯͷཁૉղ ίϯςϯπ ༨ന
σβΠϯͷཁૉղ σβΠϯΛݟͯύʔτʹ͚Δ
ޙ ࣍ σβΠϯͷཁૉղ )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϋϯζΦϯ ελΠϧΛ͋ͯΔʢ4$44 $44ʣ ಈ͖Λ͚ͭΔ KT ϋϯζΦϯ
લ
)5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏
)5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏ ϚʔΫΞοϓ ͨͩͷը૾͔Β ϒϥβ͕ೝࣝͰ͖Δݴ༿ʹ͢Δ จࣈྻʹҙຯΛ࣋ͨͤͯ จॻߏΛ࡞Γ্͛Δ
)5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏
)5.-ίʔσΟϯάʢϚʔΫΞοϓʣ λάͷઆ໌ BSUJDMF IFBEFS OBW TFDUJPO จॻͷಠཱͨ͠هࣄηΫγϣϯΛද͠·͢ɻ ྫ͑ϑΥʔϥϜͰͷߘɺࡶࢽ৽ฉͷهࣄɺϒϩάͷΤϯ τϦɺίϝϯτͳͲͰ͢ɻ ΠϯτϩμΫγϣϯφϏήʔγϣϯάϧʔϓͰ͋Δ͜ͱΛࣔ
͢ࡍʹ༻͠·͢ɻ φϏήʔγϣϯͰ͋Δ͜ͱΛࣔ͢ࡍʹ༻͠·͢ɻφϏήʔγ ϣϯͱɺΣϒαΠτͷଞͷϖʔδͷϦϯΫɺϖʔδ ϦϯΫͳͲͷ͜ͱͰ͢ɻ จॻΞϓϦέʔγϣϯͷҰ෦ͱͳΔɺҙຯػೳͷͻͱ· ͱ·Γͷ͜ͱͰ͢ɻ ΣϒϖʔδͷηΫγϣϯͱͯ͠ɺྫ ͑ɺಋೖ෦ɺ৽ணใɺ࿈བྷઌͳͲ͕ߟ͑ΒΕ·͢ɻ ʢݟग़͠ΛؚΊΔࣄΛਪ͞Ε͍ͯΔ͕ແͯ͘ྑ͍ʣ
)5.-ίʔσΟϯάʢϚʔΫΞοϓʣ λάͷઆ໌ pHVSF BTJEF GPPUFS ਤදͰ͋Δ͜ͱΛࣔ͢ࡍʹ༻͠·͢ɻ ͜͜Ͱݴ͏ਤදͱɺ จॻͷຊจʢϝΠϯϑϩʔʣ͔Βࢀর͞ΕΔΑ͏ͳΠϥετɾ ਤɾࣸਅɾιʔείʔυͳͲͷ͜ͱͰ͢ɻ pHDBQUJPO
ਤදͷΩϟϓγϣϯΛࣔ͢ࡍʹ༻͠·͢ɻpHVSFʙ pHVSFͷதʹஔ͢ΔͱɺਤදʹΩϟϓγϣϯΛ͚Δ͜ͱ͕ Ͱ͖·͢ɻ ͦͷ෦͕Σϒϖʔδʹ͓͚Δ༨ஊɾิใͷηΫγϣ ϯͰ͋Δ͜ͱΛࣔ͢ࡍʹ༻͠·͢ɻ ۙͷηΫγϣϯͷϑολͰ͋Δ͜ͱΛࣔ͢ࡍʹ༻͠·͢ɻ ϑολʔͱɺͦͷηΫγϣϯʹؔ͢Δใͷ͜ͱͰɺҰൠత ʹɺ୭͕ॻ͍ͨͷ͔ɺؔ࿈จॻͷϦϯΫɺஶ࡞ݖͳͲͷ ใؚ͕·Ε·͢ɻ
)5.-ίʔσΟϯάʢϚʔΫΞοϓʣ λάͷઆ໌ VM PM MJ EJW VOPSEFSFE MJTUͷུͰɺॱংͷͳ͍ϦετΛදࣔ͢Δࡍʹ༻ ͠·͢ɻϦετ߲ɺMJλάͰࢦఆ͠·͢ɻ PSEFSFE
MJTUͷུͰɺॱংͷ͋ΔϦετΛදࣔ͢Δࡍʹ༻͠ ·͢ɻϦετ߲ɺMJλάͰࢦఆ͠·͢ɻ MJTUJUFNͷུͰɺϦετͷ߲Λهड़͢Δࡍʹ༻͠·͢ɻ Q TQBO ͻͱͭͷஈམʢύϥάϥϑʣͰ͋Δ͜ͱΛද͢ࡍʹ༻͠· ͢ɻ ͻͱͭͷൣғͱͯ͠ఆٛ͢Δࡍʹ༻͠·͢ɻͦΕࣗͰԿ ҙຯΛ͍࣋ͬͯ·ͤΜ ͻͱ͔ͨ·Γͷൣғͱͯ͠ఆٛ͢Δࡍʹ༻͠·͢ɻ EJWʹ ಛผͳҙຯ͋Γ·ͤΜɻ
)5.-ίʔσΟϯάʢϚʔΫΞοϓʣ λάͷઆ໌ TNBMM CS ໔ɾܯࠂɾ๏తن੍ɾஶ࡞ݖɾϥΠηϯεཁ݅ͳͲͷऍ ࡉΛද͢ࡍʹ༻͠·͢ɻ FN TUSPOH ڧ͢ΔʢΞΫηϯτΛ͚ΔʣՕॴΛද͢ࡍʹ༻͠·͢ɻ ڧ͍ॏཁੑΛද͢ࡍʹ༻͠·͢ɻ
վߦ
)5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏ ίϯςϯπϞσϧ ͲͷཁૉʢλάʣʹͲΜͳίϯςϯπΛೖΕͯྑ͍͔Λ ఆٛͨ͠ͷ ϘοΫεͰ֤DTTͷྖҬΛΘ͚ͯͦͷΓཱͪΛ ఆٛͨ͠ͷ ϘοΫεϞσϧ IUUQDSFBUPSBBJODDPKQBSDIJWFT IUUQDSFBUPSBBJODDPKQBSDIJWFT
)5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏ ໋໊نଇ ɾཁૉ໊ʴݻ༗໊ ɾMPXFSΩϟϝϧγϯλοΫε ɾ࿈൪ͷ༻جຊෆՄ ɹྫʣɹCVUUPO$POUBDU ɾJEࢦఆ͠ͳ͍ʢKT ڥΛΓ͍ͨ࣌ͬͯ͠Α͍ʣ ɾࣈ͔Β࢝Ίͳ͍ʢDTTͱͯ͠ೝࣝ͞Εͳ͘ͳΓ·͢ɻʣ
ଞҎԼΛࢀর IUUQTBBXJLJBUMBTTJBOOFUXJLJQBHFTWJFXQBHFBDUJPO QBHF*E
)5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϚʔΫΞοϓΛߦ͏ ৄࡉ $44ઃܭख๏ #&. 00$44 4."$44 IUUQCMPHSVFEBQDPNCMPDLFMFNFOUNPEJpFS IUUQTBQQDPEFHSJEOFUFOUSZPPDTT IUUQTBQQDPEFHSJEOFUFOUSZTNBDTT
$44ʹ༏ઌ͕ଘࡏ͍ͯͯ͠Έ߹ΘͤʹΑͬͯมΘΔͷͰ ͜ΕΛҙ͍ࣝͯ͠ͳ͍ͱࢦఆ͕ө͞Εͳ͍ͱ͔ҙਤ͠ͳ͍ͱ͜Ζʹө ͞ΕΔͱ͔͕ى͜Γ·͢ɻ IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM
࣍ σβΠϯͷཁૉղ )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϋϯζΦϯ ελΠϧΛ͋ͯΔʢ4$44 $44ʣ ಈ͖Λ͚ͭΔ KT ϋϯζΦϯ લ
ޙ
ϋϯζΦϯ ࣗͰϚʔΫΞοϓΛͯ͠ΈΔ
σβΠϯͷཁૉղ σβΠϯΛݟͯύʔτʹ͚Δ Ωϟϯϖʔϯ ը૾
ϋϯζΦϯ ࣗͰϚʔΫΞοϓΛͯ͠ΈΔ
࣍ σβΠϯͷཁૉղ )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϋϯζΦϯ ελΠϧΛ͋ͯΔʢ4$44 $44ʣ ಈ͖Λ͚ͭΔ KT ϋϯζΦϯ લ
ޙ
ελΠϧΛ͋ͯΔʢ4$44 $44ʣ DTTΛॻ͘
ελΠϧΛ͋ͯΔʢ4$44 $44ʣ DTTΛॻ͘
ελΠϧΛ͋ͯΔʢ4$44 $44ʣ DTTΛॻ͘ ϘοΫεϞσϧࢉग़ํ๏Λมߋ͢Δ ࢦఆͨ͠ଐੑͷଐੑ͕લํҰகͨ͠߹ɺࢦఆͨ͠ཁૉʹ ελΠϧΛద༻͠·͢ɻ ϓϩύςΟ CPYTJ[JOH Q<GPPlCBSz> ୯Ґͷҧ͏࢛ଇԋࢉ͕ߦ͑Δɻ
DBMD QY DBMD
ελΠϧΛ͋ͯΔʢ4$44 $44ʣ DTTΛॻ͘ ະ๚ϦϯΫͷελΠϧΛࢦఆɻ Χʔιϧ͍ͬͯΔ͕ΫϦοΫ͞Ε͍ͯͳ͍ঢ়ଶΛࢦఆɻ ΫϦοΫ͞Ε͔ͯΒ͞ΕΔ·Ͱͷঢ়ଶΛࢦఆΛࢦఆɻ ๚ࡁΈϦϯΫͷελΠϧΛࢦఆɻ ཁૉͷલʹ༰Λૠೖ͢Δࡍʹ༻͠·͢ɻ ཁૉͷޙʹ༰Λૠೖ͢Δࡍʹ༻͠·͢ɻ ཁૉͰ࠷ॳʹݱΕΔࢠཁૉΛରʹελΠϧΛద༻͠·͢ɻ
ཁૉͰO൪ͷࢠཁૉΛରʹελΠϧΛద༻͠·͢ɻ ࢦఆͨ͠ཁૉҎ֎ʹελΠϧΛద༻͠·͢ɻ ٖࣅΫϥε ٖࣅཁૉ MJOL IPWFS BDUJWF WJTJUFE CFGPSF BGUFS pSTUDIJME OUIDIJME O OPU
ελΠϧΛ͋ͯΔʢ4$44 $44ʣ DTTΛॻ͘ 'JSFGPY (PPHMF$ISPNFɺ4BGBSJ *OUFSOFU&YQMPSFS 0QFSB ϒϥβϕϯμʔ͕ಠࣗͷ֦ுػೳΛ࣮ͨ͠ΓɺҊஈ֊ͷ༷Λઌߦ࣮͢Δ ߹ʹɺͦΕ͕֦ுػೳͰ͋Δ͜ͱΛ໌ࣔ͢ΔͨΊʹ͚Δࣝผࢠͷ͜ͱͰ͢ɻ ϕϯμʔϓϨϑΟοΫε
NP[ XFCLJU NT P
࣍ σβΠϯͷཁૉղ )5.-ίʔσΟϯάʢϚʔΫΞοϓʣ ϋϯζΦϯ ελΠϧΛ͋ͯΔʢ4$44 $44ʣ ಈ͖Λ͚ͭΔ KT ϋϯζΦϯ લ
ޙ
ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘
ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘ TDTTͰͰ͖Δ͜ͱ ɾωετʢೖΕࢠʣʹͰ͖Δ ɾηϨΫλΛࢀর ɾม͕͑Δ ɾ!FYUFOE
ɾ!NJYJO ɾϓϨʔεϗϧμʔηϨΫλ ɾϑΝΠϧׂՄೳ ɾΞϯμʔόʔʢ@ʣΛ͚ΔͱDTTϑΝΠϧʹग़ྗ͞Εͳ͍
ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘
ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘ TDTTͷ͚ํ *5$44ͱ͍͏ઃܭख๏ͷ͚ํΛ࠾༻͍ͯ͠Δɻ TFUUJOH UPPMT HFOFSJD CBTF PCKFDUT
DPNQPOFOUT USVNQT ϓϦϓϩηοαͰར༻͢Δάϩʔόϧมશମͷઃఆ ϓϦϓϩηοαͰར༻͢ΔNJYJOGVODUJPOͳͲ ϦηοτDTT ཁૉܕηϨΫλ ϑΥϯτɺϘλϯɺϑΥʔϜɺΞΠίϯ ίϯϙʔωϯτɺϖʔδ͝ͱͱݶΒͳ͍ ϔϧύʔ
ελΠϧΛ͋ͯΔʢ4$44 $44ʣ TDTTΛॻ͘ TDTTͷ͚ํ ಛघͳͷ NPOJQMB$PNNFOU PXOFE@NPEVMF ίϝϯτͷͯ͢ͷDTT FNFEFΩϟϯϖʔϯ༻ʹύονΛͯͯΔ