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
create-website-html-2021
Search
Masateru YOSHIMURA
June 25, 2021
Design
0
150
create-website-html-2021
Masateru YOSHIMURA
June 25, 2021
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
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
What is the design
mathatelle
2
310
Other Decks in Design
See All in Design
Yumika Yamada Portfolio
yumii
0
2k
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
210
decksh object reference
ajstarks
2
1.3k
kintone Style Book
kintone
2
1k
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
280
佐藤千晶|ポートフォリオ
chimi_chia
0
210
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
250
Installing and Running decksh/pdfdeck
ajstarks
1
870
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
650
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
930
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
4 Signs Your Business is Dying
shpigford
185
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Speed Design
sergeychernyshev
32
1.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Optimizing for Happiness
mojombo
379
70k
KATA
mclloyd
PRO
32
15k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Building an army of robots
kneath
305
46k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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 େจࣈ શ֯จࣈ ຊޠ εϖʔε