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
Search
Masateru YOSHIMURA
August 03, 2020
Technology
1
260
CodePen: Making your portfolio
Masateru YOSHIMURA
August 03, 2020
Tweet
Share
More Decks by Masateru YOSHIMURA
See All by Masateru YOSHIMURA
Digital Design 2022-02
mathatelle
0
370
Digital Design 2022-01
mathatelle
0
270
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
150
Multiple pages
mathatelle
0
700
How to design the individual page
mathatelle
1
100
CodePen: Making your portfolio 2021
mathatelle
0
150
single page
mathatelle
0
880
How to optimize images for Better Web Design
mathatelle
0
2.1k
Other Decks in Technology
See All in Technology
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
0
210
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
310
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
130
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
420
Introdução a Service Mesh usando o Istio
aeciopires
1
290
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
5
1.1k
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
150
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
210
AI時代、“平均値”ではいられない
uhyo
8
2.6k
オブザーバビリティが育むシステム理解と好奇心
maruloop
2
1k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.2k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
How to Ace a Technical Interview
jacobian
280
24k
Producing Creativity
orderedlist
PRO
347
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Why Our Code Smells
bkeepers
PRO
340
57k
Six Lessons from altMBA
skipperchong
29
4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
GitHub's CSS Performance
jonrohan
1032
470k
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Λॻ͍ͯΈΑ͏ɻ