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.6k
初心者向けざっくり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
200
Other Decks in Programming
See All in Programming
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
1
110
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
490
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
840
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
330
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
All About Angular's New Signal Forms
manfredsteyer
PRO
0
140
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
[Kaigi on Rais 2025] 全問正解率3%: RubyKaigiで出題したやりがちな危険コード5選
power3812
0
130
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
dynamic!
moro
10
7.7k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
240
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
Git: the NoSQL Database
bkeepers
PRO
431
66k
What's in a price? How to price your products and services
michaelherold
246
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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Ωϟϯϖʔϯ༻ʹύονΛͯͯΔ