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
120
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
340
Digital Design 2022-01
mathatelle
0
240
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
110
Multiple pages
mathatelle
0
650
How to design the individual page
mathatelle
1
69
single page
mathatelle
0
840
How to optimize images for Better Web Design
mathatelle
0
2.1k
What is the design
mathatelle
2
260
Featured
See All Featured
Being A Developer After 40
akosma
56
580k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Raft: Consensus for Rubyists
vanstee
132
6.2k
It's Worth the Effort
3n
180
27k
Typedesign – Prime Four
hannesfritz
36
2k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
The Cult of Friendly URLs
andyhume
74
5.7k
Producing Creativity
orderedlist
PRO
336
39k
Designing for humans not robots
tammielis
247
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Product Roadmaps are Hard
iamctodd
43
9.7k
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Λॻ͍ͯΈΑ͏ɻ