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
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
rage against annotate_predecessor
junk0612
0
170
Reading Rails 1.0 Source Code
okuramasafumi
0
140
概念モデル→論理モデルで気をつけていること
sunnyone
1
110
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
210
個人軟體時代
ethanhuang13
0
320
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
OSS開発者という働き方
andpad
5
1.7k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
230
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
140
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
74
5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A designer walks into a library…
pauljervisheath
207
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Into the Great Unknown - MozCon
thekraken
40
2k
Unsuck your backbone
ammeep
671
58k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Language of Interfaces
destraynor
161
25k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Music & Morning Musume
bryan
46
6.8k
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Ωϟϯϖʔϯ༻ʹύονΛͯͯΔ