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
CodePen: Making your portfolio 2021
Search
Masateru YOSHIMURA
December 13, 2020
0
130
CodePen: Making your portfolio 2021
Masateru YOSHIMURA
December 13, 2020
Tweet
Share
More Decks by Masateru YOSHIMURA
See All by Masateru YOSHIMURA
Digital Design 2022-02
mathatelle
0
360
Digital Design 2022-01
mathatelle
0
260
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
140
Multiple pages
mathatelle
0
690
How to design the individual page
mathatelle
1
93
single page
mathatelle
0
860
How to optimize images for Better Web Design
mathatelle
0
2.1k
What is the design
mathatelle
2
290
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
GraphQLとの向き合い方2022年版
quramy
44
14k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Code Review Best Practice
trishagee
67
18k
We Have a Design System, Now What?
morganepeng
51
7.4k
Done Done
chrislema
182
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Transcript
ෳϖʔδͷΣϒαΠ τ ʢ࣮ફฤʣ ʮϙʔτϑΥϦΦαΠτΛͭ͘Δʯ
ࣗݾհ ϩΰ :PVS/BNF ࡞ɾϓϩδΣΫτ ϊʔτ τοϓϖʔδʢҰཡϖʔδʣ JOEFYIUNM ΣϒαΠτͷશମߏɿ߹ܭϖʔδʙϖʔδʹͳΔΑ͏ʹ͍ͯͩ͘͠͞ ʙϖʔδ ϦϯΫ
ϦϯΫ ࣗݾհ ϩΰ :PVS/BNF ϓϩδΣΫτ໊ ϩΰ :PVS/BNF ࣗݾհʢৄࡉϖʔδʣ QSPpMFIUNM ࡞ɾϓϩδΣΫτʢৄࡉϖʔδʣ QSPKFDUIUNMʙQSPKFDUIUNM ʙϖʔδ هࣄλΠτϧ ϩΰ :PVS/BNF ϊʔτʢৄࡉϖʔδʣ OPUFIUNMʙOPUFIUNM ϦϯΫ ϖʔδ ˞ϖʔδଟ͍ํ͕ߴධՁʹͳΓ·͢
ϝΠϯ ϔομʔ ϖʔδͷ)5.-ߏɿશϖʔδڞ௨ ϑολʔ )5.- ਤ <header> ϩΰφϏήʔγϣϯ͕ೖΔ </header> <main>
֤ϖʔδͷ༰͕ೖΔ </main> <footer> ஶ࡞ݖදهφϏήʔγϣϯ͕ೖΔ </footer>
ϖʔδͷ)5.-ߏɿҰཡϖʔδ )5.- ਤ <section id="profile"> ࣗݾհϖʔδͷ༠ಋ </section> ֤ηΫγϣϯΛࣝผ͢ΔͨΊʹJEͰ໊લΛ͚ͭΔɻ <section id="project">
࡞ɾϓϩδΣΫτͷ༠ಋ </section> <section id="note"> ϊʔτͷ༠ಋ </section> Ұཡϖʔδ ৄࡉϖʔδͷ ༠ಋɻ ҰཡϖʔδͰ ৄ͘͠આ໌͠ͳ͍ɻ TFDUJPOλάΛ༻͍ͯɺͭͷηΫγϣϯʹ͚ΔɻEJWλάΛͬͯྑ͍ɻ ࣗݾհ ϩΰ :PVS/BNF ࡞ɾϓϩδΣΫτ ϊʔτ
ϖʔδͷ)5.-ߏɿৄࡉϖʔδ )5.- ਤ <div class="content-header"> λΠτϧαϒλΠτϧɺϝΠϯը૾ </div> ελΠϦϯάΛ͍͢͠Α͏ʹɺ ίϯςϯπΛʮ಄ɾମɾʯͷͭͷ෦ʹ͚Δɻ ϩΰ
:PVS/BNF <div class="content-body"> ຊจɺຊจͰ༻͍Δը૾ </div> <div class="content-footer"> ҰཡϖʔδʹͲΔϘλϯɺؔ࿈ϖʔδ </div> ϓϩδΣΫτ໊ ͲΔ ݪଇͱͯ͠ɺ Ұཡϖʔδͱ ҟͳΔDMBTT໊Λ༻͍Δ͜ͱɻ ϨΠΞτ่ΕͷݪҼͱͳΔɻ ٯʹɺଞͷৄࡉϖʔδͱ ڞ௨ͷDMBTT໊Λ༻͍Δ͜ͱɻ ྫ͑ɺQSPKFDUIUNMͱQSPKFDUIUNMͰ ಉ͡DMBTT໊Λ༻͍Δɻ
w·ͣɺ1SPKFDUͰશମͷࠎࢠ͚ͩΛ࡞Δɻ wϖʔδͷύʔπ༰1FOͰ࡞͢Δɻ w1FOͰ)5.-͚ͩΛॻ͘ɻ$44͋Δఔ)5.-͕Ͱ͖͔ͯΒɻ w1FOʹ࡞ͨ͠)5.-$44Λ1SPKFDUͷϖʔδʹίϐϖͯ͠ू͢Δɻ w1SPKFDUͰඍௐΛͯ͠ʂ શମͷߏ͕Θ͔ͬͨͱ͜ΖͰ)5.-Λॻ͍͍ͯ͜͏ ͨͩ͠ɺ $PEF1FOͷ1SPKFDUฤूը໘͕ڱ͍ͨΊ࡞ۀ͕Γʹ͍͘ɻ ࣍ͷΑ͏ʹਐΊΑ͏ɻ
खॱɿ1SPKFDUʹɺશମͷࠎࢠ͚ͩΛ࡞Δ ςΩετ͕ දࣔ͞ΕΔ͜ͱΛ ֬ೝɻ CPEZλάͷؒʹ IFBEFS NBJO GPPUFSͷͭͷλάΛ࡞͢Δɻ Ҏલʹ࿅शͰ࡞ͨ͠ ίʔυআͯ͠ྑ͍ɻ
͜ͷ࡞ۀ৻ॏʹ͢Δɻ ಛʹɺCPEZIUNMΛޡͬͯফ͞ͳ͍Α͏ʹҙ͢Δɻ
खॱɿ1FOΛ༻͍ͯɺશϖʔδڞ௨ͷύʔπΛ࡞͢Δ ͜ͷ࣌ͰϦϯΫػೳ͠ͳ͍ɻϦϯΫͷ֬ೝ1SPKFDUͷ΄͏Ͱߦ͏ɻ ϔομʔ ը૾ͷ߹ ͱΓ͋͑ͣ ςΩετͰೖΕ͓͍ͯͯ ͋ͱ͔Β ը૾ʹࠩ͠ସ͑ͯ0, ϔομʔ ςΩετͷ߹
ϑολʔ
खॱɿ1FOΛ༻͍ͯɺτοϓϖʔδͷ༰Λ࡞͢Δ ςΩετը૾͕ දࣔ͞ΕΔ͜ͱΛ ֬ೝɻ ͜ͷ࣌ͰϦϯΫػೳ͠ͳ͍ɻϦϯΫͷ֬ೝ1SPKFDUͷ΄͏Ͱߦ͏ɻ NBJOλάͷ தʹೖΔ )5.-Λॻ͘ɻ $44·ͩ ॻ͔ͳͯ͘Α͍
ܗͱͳΔ)5.- αϯϓϧΛίϐϖͯ͠ ར༻͢ΕΑ͍ɻ ·ͩ४උ͕ Ͱ͖͍ͯͳ͍ͱ͜Ζ μϛʔσʔλͰ0,
खॱɿ1FOΛ༻͍ͯɺৄࡉϖʔδͷ༰Λͭ࡞͢Δ NBJOλάͷ தʹೖΔ )5.-Λॻ͘ɻ ςΩετը૾͕ දࣔ͞ΕΔ͜ͱΛ ֬ೝɻ ͜ͷ࣌ͰϦϯΫػೳ͠ͳ͍ɻϦϯΫͷ֬ೝ1SPKFDUͷ΄͏Ͱߦ͏ɻ $44·ͩ ॻ͔ͳͯ͘Α͍ɻ
ܗͱͳΔ)5.- αϯϓϧΛίϐϖͯ͠ ར༻͢ΕΑ͍ɻ
खॱɿͨ͠ৄࡉϖʔδͷ1FOΛ'PSLͯ͠ผͷϖʔδʹೖΔ༰Λ࡞Δ )5.-λά ͦͷ··ʹͯ͠ )5.-ͷதΛ ࠩ͠ସ͍͑ͯ͘ɻ ςΩετը૾͕ දࣔ͞ΕΔ͜ͱΛ ֬ೝɻ ৄࡉϖʔδͷ ίϯςϯπ͕
ͭ΄Ͳ ४උͰ͖ͨΒ $44Λॻ͍ͯΈΑ͏ɻ