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
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
480
Yumika Yamada Portfolio
yumii
0
1k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1k
株式会社バクタム 会社説明資料
bactum
0
260
mento Design Team Portfolio
mento0fficial
0
360
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
580
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
2.5k
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.4k
UXとUIの違いを自分の言葉で表現する: UX DAYS TOKYO
mizunashi_mana
0
210
sachi_y_portfolio
sachi337
0
410
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
We Have a Design System, Now What?
morganepeng
53
7.7k
Done Done
chrislema
184
16k
Adopting Sorbet at Scale
ufuk
77
9.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Become a Pro
speakerdeck
PRO
29
5.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Why Our Code Smells
bkeepers
PRO
337
57k
Raft: Consensus for Rubyists
vanstee
140
7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Optimizing for Happiness
mojombo
379
70k
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 େจࣈ શ֯จࣈ ຊޠ εϖʔε