designからWebページを作るやりかた完全に理解した.pdf

Transcript

1. Design->Webページ のやりかた 完全に理解した @dach
2. Why speak Today?
3. Thema: How do you do this page building?
4. Thema: How do you do this page building?
5. Today’s goal デザインからWebページを作る時に 「どうすればええんや」→「こんな感じで作ればええんやな」 という感覚を作る練習法を理解すること
6. Who is me? EasyEasy icon チキン南蛮 VRM ID: @dach JOB: PM / カイゼン屋 Twitter: i-dach qiita: i-dach
7. Retrospective
8. Once upon a time...
9. My master said... デザイン渡すからLP作ってよ ぼく(19) 師匠 えっ (適当にしか作ったことないぞ...) やったことない？ はえー (ほんまかいな) ちゃんと理屈覚えたら簡単よ
10. Lesson1: WEBページの構造を知る 師匠 BODY HEADER MAIN 変わっているサイトもあるけ ど基本形は一緒。 まずは基本形を知ろう
11. Lesson1: WEBページの構造を知る 師匠 headerも分解するとそれぞ れのまとまりが見えてくるよ CONTENT CONTENT CONTENT CONTENT MENU
12. Lesson1: WEBページの構造を知る 師匠 CONTENT MAIN CONTENT SIDE BAR MAIN部分もHeaderと同じ要 領で分解するだけ
13. Lesson1: WEBページの構造を知る 師匠 BODY HEADER MAIN point 枠の切り方次第で、実装後 の挙動とかが変わるよ headerの幅が mainと同じだっ たら？
14. Lesson2: WEBページの構造に慣れる 師匠 Lesson1でやったことを色々なWEBペー ジに対してやってみよう BODY HEADER MAIN ① WEBページをピッ クアップ ② 構造を分解してみよう
15. Lesson3: 分解した構造にHTMLタグを当て込もう HTMLクイックリファレンスより一部抜粋 <p> …… ひとつの段落（パラグラフ）であることを表す <hr> …… テーマや話題の区切りを表す <pre> …… 半角スペースや改行をそのまま表示する <blockquote> …… 引用・転載セクションであることを表す <ol> …… 順序のあるリストを表示する <ul> …… 順序のないリストを表示する <li> …… リストの項目を記述する <dl> …… 定義・説明リストを表す <dt> …… 定義・説明される言葉を表す <dd> …… 定義用語や言葉の説明をする <figure> …… 図表であることを示すHTML5から追加 <figcaption> …… 図表のキャプションを示すHTML5から追加 <div> ……ひとかたまりの範囲として定義する <main> …… メインコンテンツであることを示す 師匠 正しいものを使うことでSEO対策にもな りますよ
16. 構造を分解するときに いい補助ツールないかな Question
17. Answer 引用（Atomic Design Chapter2：https://atomicdesign.bradfrost.com/） 師匠 若干さっきの分解と粒度は違うかもしれな いですが、大体同じになります 詳しくは オリジナルサイトへ
18. Conclusion
19. Conclusion 慣れるにはとにかく数をこなすことが大事 理論が完全理解できたら、手に馴染むまでひたすら練習しよう！
20. Thanks