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
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
230
Cyber Heart Online Book
hjnasby
0
160
AI時代に淘汰されないデザインのしごと
akinen
1
180
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.1k
Yumika Yamada Portfolio
yumii
0
1.2k
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
10k
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
150
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
450
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
1.9k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
1
140
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Being A Developer After 40
akosma
90
590k
Docker and Python
trallard
45
3.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Practical Orchestrator
shlominoach
190
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Visualization
eitanlees
146
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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 େจࣈ શ֯จࣈ ຊޠ εϖʔε