$30 off During Our Annual Pro Sale. View Details »

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

dach
September 24, 2020

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

dach

September 24, 2020
Tweet

More Decks by dach

Other Decks in Technology

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