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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Masateru YOSHIMURA
June 25, 2021
Design
0
160
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
380
Digital Design 2022-01
mathatelle
0
270
Yoshimura Lab. 2022
mathatelle
0
1.3k
Multiple pages
mathatelle
0
710
How to design the individual page
mathatelle
1
120
CodePen: Making your portfolio 2021
mathatelle
0
150
single page
mathatelle
0
880
How to optimize images for Better Web Design
mathatelle
0
2.2k
What is the design
mathatelle
2
310
Other Decks in Design
See All in Design
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
1
660
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
1.4k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
7k
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
mewmo
PRO
0
160
Drawing for Animation
lynteo
2
180
AIスライドデザインを生成する仕組みを社内共有する
kenichiota0711
5
3.9k
これからの「Webデザイン」の話をしよう~デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値~
ds35mm
0
540
Figmaレクチャー会Part1 基本のき編@千株式会社 社内勉強会
designer_no_pon
2
240
はじめての演奏会フライヤーデザイン
chorkaichan
1
220
Storyboard Exercise: Chase Sequence
lynteo
1
200
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
300
DESIGNEAST 2025 A-3
_kotobuki_
0
130
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
432
66k
Building Applications with DynamoDB
mza
96
6.9k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
140
Ethics towards AI in product and experience design
skipperchong
2
190
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
300
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
Mobile First: as difficult as doing things right
swwweet
225
10k
Prompt Engineering for Job Search
mfonobong
0
160
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
160
Between Models and Reality
mayunak
1
180
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
84
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
110
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 େจࣈ શ֯จࣈ ຊޠ εϖʔε