Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
create-website-html-2021
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Masateru YOSHIMURA
June 25, 2021
Design
170
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
create-website-html-2021
Masateru YOSHIMURA
June 25, 2021
More Decks by Masateru YOSHIMURA
See All by Masateru YOSHIMURA
Digital Design 2022-02
mathatelle
0
400
Digital Design 2022-01
mathatelle
0
290
Yoshimura Lab. 2022
mathatelle
0
1.4k
Multiple pages
mathatelle
0
730
How to design the individual page
mathatelle
1
130
CodePen: Making your portfolio 2021
mathatelle
0
170
single page
mathatelle
0
900
How to optimize images for Better Web Design
mathatelle
0
2.2k
What is the design
mathatelle
2
340
Other Decks in Design
See All in Design
デザインワークフローの最前線。 ログラスでのAI活用の現在地
ukaoli
1
3.5k
IAカンファレンス’26報告会
mayunak
0
110
Jun Wei | Information Design & Presentation Portfolio
wjw100788
PRO
0
180
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
510
使いたいときだけ使う 「道具のようなアプリケーション」を考える
fumink7
0
360
柔軟性のあるUIで、多くの環境でアプリを活躍させる/iOSDC26
noppefoxwolf
0
1.7k
デザなに#1「問いのデザイン」の紹介LT
garyuten
0
160
Bet AI Day 2026丨デザインハーネス:専門職の判断基準をコードのように運用する
layerx
PRO
6
7.6k
泥臭く語るUIデザイン会|ホワイトボードチャレンジ【RAMEN TECH 2026】
garyuten
1
230
SERVICE PAMPHLET
mhand01
0
7.9k
分散するデザイン組織をつなぐ デザインミートアップの取り組み/nikkei-tech-talk49
nikkei_engineer_recruiting
1
370
Spectrum Tokyo Meetup #26「できることが増えた時、デザイナーは何に時間を使うべきか」
muture
PRO
1
360
Featured
See All Featured
It's Worth the Effort
3n
188
29k
How to Ace a Technical Interview
jacobian
280
24k
Designing for Performance
lara
612
70k
Bash Introduction
62gerente
615
220k
Build your cross-platform service in a week with App Engine
jlugia
234
19k
エンジニアに許された特別な時間の終わり
watany
109
250k
Making Projects Easy
brettharned
120
6.8k
Are puppies a ranking factor?
jonoalderson
2
4.1k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
1.1k
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
360
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.2k
How GitHub (no longer) Works
holman
316
150k
Transcript
ෳϖʔδͷΣϒαΠ τ ʢ࣮ફฤʣ ʮϙʔτϑΥϦΦαΠτΛͭ͘Δʯ
)5.-$44Λॻ͘લʹɺ ϖʔδͷجຊతͳߏͱ αΠτશମͷߏΛѲ͠·͠ΐ͏ɻ
None
ϔομʔ ϑολʔ
ϔομʔ ϑολʔ શϖʔδڞ௨ ϝΠϯ ֤ϖʔδͷ༰
ࣗݾհ ϩΰ :PVS/BNF ࡞ɾϓϩδΣΫτ ϊʔτ τοϓϖʔδʢҰཡϖʔδʣ JOEFYIUNM ΣϒαΠτͷશମߏɿ߹ܭϖʔδϖʔδҎ্ʹͳΔΑ͏ʹ͍ͯͩ͘͠͞ ϖʔδҎ্ ϦϯΫ
ϦϯΫ ࣗݾհ ϩΰ :PVS/BNF ϓϩδΣΫτ໊ ϩΰ :PVS/BNF ࣗݾհʢৄࡉϖʔδʣ QSPpMFIUNM ࡞ɾϓϩδΣΫτʢৄࡉϖʔδʣ QSPKFDUIUNMQSPKFDUIUNM ϖʔδҎ্ هࣄλΠτϧ ϩΰ :PVS/BNF ϊʔτʢৄࡉϖʔδʣ OPUFIUNMOPUFIUNM ϦϯΫ ϖʔδ ˞ϖʔδଟ͍ํ͕ߴධՁʹͳΓ·͢ ˞શମߏ֤ϖʔδͷϨΠΞτҰྫͰ͢ɻ͜ͷ௨Γʹ͍ͯͩ͘͠͞ͱ͍͏͜ͱͰ͋Γ·ͤΜɻ )5.-Ͱ࡞Δ
ϝΠϯ ϔομʔ ϖʔδͷ)5.-ߏɿશϖʔδڞ௨ ϑολʔ <header> ϩΰφϏήʔγϣϯ͕ೖΔ </header> <main> ֤ϖʔδͷ༰͕ೖΔ </main>
<footer> ஶ࡞ݖදهφϏήʔγϣϯ͕ೖΔ </footer> ˞$PEF1FOͷαϯϓϧͰNBJOλάͷதͷΈΛॻ͍͍ͯ·͢
ϖʔδͷ)5.-ߏɿҰཡϖʔδͷྫᶃ <section id="profile"> ࣗݾհϖʔδͷ༠ಋ </section> ֤ηΫγϣϯΛࣝผ͢ΔͨΊʹJEͰ໊લΛ͚ͭΔɻ <section id="project"> ࡞ɾϓϩδΣΫτͷ༠ಋ </section>
<section id="note"> ϊʔτͷ༠ಋ </section> Ұཡϖʔδ ৄࡉϖʔδͷ ༠ಋɻ ҰཡϖʔδͰ ৄ͘͠આ໌͠ͳ͍ɻ TFDUJPOλάΛ༻͍ͯɺηΫγϣϯʹ͚ΔɻEJWλάΛͬͯྑ͍ɻ ࣗݾհ ϩΰ ϑολʔ ࡞ɾϓϩδΣΫτ ϊʔτ ˞ϨΠΞτҰྫͰ͢ɻ͜ͷ௨Γʹ͍ͯͩ͘͠͞ͱ͍͏͜ͱͰ͋Γ·ͤΜɻ ͔͜͜Βৄࡉϖʔδ τοϓϖʔδʢҰཡϖʔδʣ JOEFYIUNM
ϖʔδͷ)5.-ߏɿҰཡϖʔδͷྫᶄ <nav> ֤ϖʔδͷϦϯΫ </nav> ϩΰ ϑολʔ 501"#065803,4/05&4 ϝΠϯը૾ ˞ϨΠΞτҰྫͰ͢ɻ͜ͷ௨Γʹ͍ͯͩ͘͠͞ͱ͍͏͜ͱͰ͋Γ·ͤΜɻ ϩΰ
ϑολʔ 501"#065803,4/05&4 803,4 ͔͜͜Βৄࡉϖʔδ τοϓϖʔδʢҰཡϖʔδʣ JOEFYIUNM ࡞ɾϓϩδΣΫτҰཡʢҰཡϖʔδʣ QSPKFDUIUNM
ϖʔδͷ)5.-ߏɿৄࡉϖʔδ <div class="content-header"> λΠτϧαϒλΠτϧɺϝΠϯը૾ </div> ελΠϦϯάΛ͍͢͠Α͏ʹɺ ίϯςϯπΛʮ಄ɾମɾʯͷͭͷ෦ʹ͚Δɻ ϑολʔ <div class="content-body">
ຊจɺຊจͰ༻͍Δը૾ </div> <div class="content-footer"> ҰཡϖʔδʹͲΔϘλϯɺؔ࿈ϖʔδ </div> ϓϩδΣΫτ໊ ͲΔ ݪଇͱͯ͠ɺ Ұཡϖʔδͱ ҟͳΔDMBTT໊Λ༻͍Δ͜ͱɻ ϨΠΞτ่ΕͷݪҼͱͳΔɻ ٯʹɺଞͷৄࡉϖʔδͱ ڞ௨ͷDMBTT໊Λ༻͍Δ͜ͱɻ ྫ͑ɺQSPKFDUIUNMͱQSPKFDUIUNMͰ ಉ͡DMBTT໊Λ༻͍Δɻ ϔομʔ ࡞ɾϓϩδΣΫτʢৄࡉϖʔδʣ QSPKFDUIUNMQSPKFDUIUNM ৄࡉϖʔδ·ͣͭΛ࡞Γ্͔͛ͯΒɺ ϑΟΞϧΛίϐϖͯ͠༰Λࠩ͠ସ͑Δͱ ޮྑ͘࡞Δ͜ͱ͕Ͱ͖·͢ɻ
8FCͰը૾Λ͏ͱ͖ͷҙ ᶃ σʔλྔͰ͖ΔݶΓখ͘͞ʢ͍ܰʣ ˠେ͖͍ͱද͕ࣔ͘ͳΔʢॏ͘ͳΔʣɺ ɹར༻ऀʹ௨৴ෛՙΛ͔͚ͯ͠·͏ʢύέࢮʣ ᶄ ྑ͍ը࣭Ͱදࣔ͢Δ ˠσʔλྔͱͷόϥϯεΛΈͳ͕Β ɹ༻్ʹԠͯ͡࠷దԽ͢Δඞཁ͕͋Δ
ը૾αΠζͷ࠷దԽ ෯ QYߴ͞ QYσʔλྔ.# ෯ QYߴ͞QY σʔλྔ,# ύιίϯεϚϗͷϞχλͰ ͜ͷαΠζͰे͖Ε͍ʹݟ͑ΔͷͰ খ͔ͯ͘͞͠Βར༻͢Δ
J1IPOFͰࡱӨͨ͠ΦϦδφϧͷαΠζ ͜ͷ߹ σʔλྔ ʹ ϊʔτ1$ͷը໘෯ QYલޙ ॖখ͢Ε
ಡΈํ ֦ுࢠ ը࣭ ಁա ༻్ +1&( δΣΠϖά KQH ྼԽ͢Δ ಁաͰ͖ͳ͍
ࣸਅ 1/( ϐϯά .png ྼԽ͠ͳ͍ ಁաͰ͖Δ ϩΰɺਤͳͲ ৭͕গͳ͍ͷ 8FCͰ͏ը૾ͷछྨ ͦͷ΄͔8FC147(ɺ(*'ͳͲͷܗ͕ࣜ͋Δ͕ɺ͜ͷतۀͰѻΘͳ͍ɻ ͜ͷतۀͰ+1&(ͷѻ͍Λৄ͘͠આ໌͢Δɻ কདྷతʹ8FC1͕ελϯμʔυͳܗࣜʹͳΔͱݴΘΕ͍ͯΔɻ ࣸਅΛ1/(ܗࣜʹ͢Δͱ σʔλྔ͕େ͖͘ͳΔέʔε͕ଟ͍ͨΊ ࣸਅΛ1/(ܗࣜʹ͠ͳ͍͜ͱʂ
ը૾αΠζมߋͷํ๏ 8JOEPXT.BDඪ४ΞϓϦͰͰ͖Δɻ Γํɺ8FC্ʹհهࣄ͕ͨ͘͞Μ͋ΔͷͰɺ ࣗͰௐͯͬͯΈΑ͏ɻ ҎલͷतۀͰεϚϗͰࡱӨͨ͠ը૾Λ $BOWBͱ͍͏αʔϏεΛར༻ͯ͠ ύιίϯͰ͑ΔΑ͏ʹ͠·ͨ͠ɻ
ը૾ͯ͢ ϑΥϧμͷ JNHTϑΥϧμʹೖΕ͍ͯͩ͘͞ɻ ˞ͦͷ΄͔ͷϑΥϧμʹೖΕͯදࣔ͞Εͳ͍ͷͰҙ͠·͠ΐ͏ ը૾ͷஔॴ
ը૾ɾϖʔδͷϑΝΠϧ໊ͷϧʔϧ w ֯ӳจࣈΛ͏ w খจࣈͷBˠ[Λ͏ w ࣈͷˠ͑Δ w ϋΠϑϯ͑Δ w
ΞϯμʔείΞ@͑Δ ͦͷଞ͑ͳ͍ͷͰҙʂ ˕OPUFIUNM MPHPQOH QIPUPKQH BCPVUIFBEFSKQH ʷ/PUFIUNM ̡̤̜̤QOH ࣸਅKQH BCPVUIFBEFSKQH େจࣈ શ֯จࣈ ຊޠ εϖʔε