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
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
420
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.7k
CSC305 Lecture 11
javiergs
PRO
0
270
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
One Enishi After Another
snoozer05
PRO
0
160
SODA - FACT BOOK(JP)
sodainc
1
8.8k
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
660
iOSでSVG画像を扱う
kishikawakatsumi
0
170
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
For a Future-Friendly Web
brad_frost
180
10k
Writing Fast Ruby
sferik
630
62k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Thoughts on Productivity
jonyablonski
70
4.9k
How to train your dragon (web standard)
notwaldorf
97
6.3k
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Ωϟϯϖʔϯ༻ʹύονΛͯͯΔ