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
あなたのWebサービスはAIに自動テストしてもらえる?アクセシビリティツリーで読み解く、AIの『視点』
yusukeiwaki
1
3.3k
stupid jj tricks
indirect
0
7.5k
Goを使ってTDDを体験しよう!
chiroruxx
1
230
DEFCON CHV CTF 2025 Write-up
bata_24
0
190
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
21
13k
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
300
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
290
インサイト情報からどこまで自動化できるか試してみた
takas0522
0
120
Green Tea Garbage Collector の今
zchee
PRO
2
350
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
270
新卒QAエンジニアの成長戦略
qatonchan
0
300
20250929_QaaS_vol20
mura_shin
0
110
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
For a Future-Friendly Web
brad_frost
180
9.9k
4 Signs Your Business is Dying
shpigford
185
22k
Code Reviewing Like a Champion
maltzj
525
40k
A better future with KSS
kneath
239
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
950
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Building an army of robots
kneath
306
46k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Become a Pro
speakerdeck
PRO
29
5.5k
How to Think Like a Performance Engineer
csswizardry
27
2k
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Λॻ͍ͯΈΑ͏ɻ