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
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
510
Open source software: how to live long and go far
gaelvaroquaux
0
660
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
React 19アップデートのために必要なこと
uhyo
8
1.5k
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
990
Jakarta EE meets AI
ivargrimstad
0
390
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
color-scheme: light dark; を完全に理解する
uhyo
7
490
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1k
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A Modern Web Designer's Workflow
chriscoyier
693
190k
A better future with KSS
kneath
238
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
It's Worth the Effort
3n
184
28k
What's in a price? How to price your products and services
michaelherold
244
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Into the Great Unknown - MozCon
thekraken
35
1.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Automating Front-end Workflow
addyosmani
1368
200k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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Ωϟϯϖʔϯ༻ʹύονΛͯͯΔ