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
250
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
360
Digital Design 2022-01
mathatelle
0
260
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
130
Multiple pages
mathatelle
0
690
How to design the individual page
mathatelle
1
91
CodePen: Making your portfolio 2021
mathatelle
0
130
single page
mathatelle
0
860
How to optimize images for Better Web Design
mathatelle
0
2.1k
Other Decks in Technology
See All in Technology
What's new in Go 1.24?
ciarana
1
120
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
260
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
180
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.1k
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.6k
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
250
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.8k
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
380
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
180
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.8k
スクラムというコンフォートゾーンから抜け出そう!プロジェクト全体に目を向けるインセプションデッキ / Inception Deck for seeing the whole project
takaking22
3
150
OPENLOGI Company Profile
hr01
0
60k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Thoughts on Productivity
jonyablonski
69
4.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Facilitating Awesome Meetings
lara
53
6.3k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Adopting Sorbet at Scale
ufuk
75
9.2k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
A designer walks into a library…
pauljervisheath
205
24k
The Cult of Friendly URLs
andyhume
78
6.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Λॻ͍ͯΈΑ͏ɻ