Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
designからWebページを作るやりかた完全に理解した.pdf
dach
September 24, 2020
Technology
1
150
designからWebページを作るやりかた完全に理解した.pdf
dach
September 24, 2020
Tweet
Share
More Decks by dach
See All by dach
プロジェクトマネージャーと炎の回避術
dach
0
310
SLO_By_Google_Cloud_Monitoring
dach
0
55
状態遷移テスト完全に理解しよう.pdf
dach
0
470
JWT完全に理解しよう-認証編-.pptx.pdf
dach
0
400
JWT完全に理解しよう-公開鍵編-.pptx.pdf
dach
0
320
チームの垣根を越境する_チーム間交換留学
dach
0
23
設計書のないサービスとの付き合い方.pptx.pdf
dach
0
110
チャレンジコーナー__DFDのモブプロ.pdf
dach
1
800
リモートde共につくる
dach
0
450
Other Decks in Technology
See All in Technology
220428event_karibe_part
caddi_eng
0
180
Deeplearning from almost scratch
hn410
0
580
Microsoft 365の中でのPower BIの利用 / M365VM2022
ishiayaya
0
1.4k
CADDi HCMC Technology Center
caddi_eng
0
220
如何使用 Argo Event& Workflow 快速建置自定義的工作流程 @ #CNTUG #47
line_developers_tw
PRO
0
380
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
2
2.6k
完全に理解した incremetal 〜そして、何もわからないへ〜
mashiike
0
210
[SRE NEXT 2022]ヤプリのSREにおけるセキュリティ強化の取り組みを公開する
mmochi23
1
270
數據的多重宇宙 @ LINE Taiwan
line_developers_tw
PRO
0
300
ISUCON で使えるツールを作った
shotakitazawa
0
350
Devに力を授けたいSREのあゆみ / SRE that wants to empower developers
tocyuki
3
440
How We Foster Reliability in Diversity
nari_ex
PRO
8
2.2k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Faster Mobile Websites
deanohume
294
28k
Designing for Performance
lara
596
63k
For a Future-Friendly Web
brad_frost
164
7.4k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Code Review Best Practice
trishagee
41
6.7k
Side Projects
sachag
449
37k
How to train your dragon (web standard)
notwaldorf
57
3.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Bash Introduction
62gerente
596
210k
Statistics for Hackers
jakevdp
781
210k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Transcript
Design->Webページ のやりかた 完全に理解した @dach
Why speak Today?
Thema: How do you do this page building?
Thema: How do you do this page building?
Today’s goal デザインからWebページを作る時に 「どうすればええんや」→「こんな感じで作ればええんやな」 という感覚を作る練習法を理解すること
Who is me? EasyEasy icon チキン南蛮 VRM ID: @dach JOB:
PM / カイゼン屋 Twitter: i-dach qiita: i-dach
Retrospective
Once upon a time...
My master said... デザイン渡すからLP作ってよ ぼく(19) 師匠 えっ (適当にしか作ったことないぞ...) やったことない? はえー
(ほんまかいな) ちゃんと理屈覚えたら簡単よ
Lesson1: WEBページの構造を知る 師匠 BODY HEADER MAIN 変わっているサイトもあるけ ど基本形は一緒。 まずは基本形を知ろう
Lesson1: WEBページの構造を知る 師匠 headerも分解するとそれぞ れのまとまりが見えてくるよ CONTENT CONTENT CONTENT CONTENT MENU
Lesson1: WEBページの構造を知る 師匠 CONTENT MAIN CONTENT SIDE BAR MAIN部分もHeaderと同じ要 領で分解するだけ
Lesson1: WEBページの構造を知る 師匠 BODY HEADER MAIN point 枠の切り方次第で、実装後 の挙動とかが変わるよ headerの幅が
mainと同じだっ たら?
Lesson2: WEBページの構造に慣れる 師匠 Lesson1でやったことを色々なWEBペー ジに対してやってみよう BODY HEADER MAIN ① WEBページをピッ
クアップ ② 構造を分解してみよう
Lesson3: 分解した構造にHTMLタグを当て込もう HTMLクイックリファレンスより一部抜粋 <p> …… ひとつの段落(パラグラフ)であることを表す <hr> …… テーマや話題の区切りを表す <pre>
…… 半角スペースや改行をそのまま表示する <blockquote> …… 引用・転載セクションであることを表す <ol> …… 順序のあるリストを表示する <ul> …… 順序のないリストを表示する <li> …… リストの項目を記述する <dl> …… 定義・説明リストを表す <dt> …… 定義・説明される言葉を表す <dd> …… 定義用語や言葉の説明をする <figure> …… 図表であることを示すHTML5から追加 <figcaption> …… 図表のキャプションを示すHTML5から追加 <div> ……ひとかたまりの範囲として定義する <main> …… メインコンテンツであることを示す 師匠 正しいものを使うことでSEO対策にもな りますよ
構造を分解するときに いい補助ツールないかな Question
Answer 引用(Atomic Design Chapter2:https://atomicdesign.bradfrost.com/) 師匠 若干さっきの分解と粒度は違うかもしれな いですが、大体同じになります 詳しくは オリジナルサイトへ
Conclusion
Conclusion 慣れるにはとにかく数をこなすことが大事 理論が完全理解できたら、手に馴染むまでひたすら練習しよう!
Thanks