Upgrade to Pro — share decks privately, control downloads, hide ads and more …

U-lab HTML&CSSL&JSハンズオン2021 第1回

usuyuki
May 08, 2021
520

U-lab HTML&CSSL&JSハンズオン2021 第1回

usuyuki

May 08, 2021
Tweet

Transcript

  1. 2021
    2021/5/8 HTML&CSS&JSハンズオン 1

    View Slide

  2. 2021/5/8 HTML&CSS&JSハンズオン 2

    View Slide

  3. 2021/5/8 HTML&CSS&JSハンズオン 3

    View Slide

  4. 2021/5/8 HTML&CSS&JSハンズオン 4

    View Slide

  5. 2021/5/8 HTML&CSS&JSハンズオン 5

    View Slide

  6. 1
    デザイン
    基礎の基礎
    2
    HTML
    CSS
    2021/5/8 HTML&CSS&JSハンズオン 6

    View Slide

  7. 3
    CSS
    レスポンシブ
    4
    JavaScript
    2021/5/8 HTML&CSS&JSハンズオン 7

    View Slide

  8. 5
    全体
    総括
    Git入門
    2021/5/8 HTML&CSS&JSハンズオン 8

    View Slide

  9. 1
    デザイン
    基礎の基礎
    2
    3
    4
    5
    2021/5/8 HTML&CSS&JSハンズオン 9

    View Slide

  10. 2021/5/8 HTML&CSS&JSハンズオン 10

    View Slide

  11. 2021/5/8 HTML&CSS&JSハンズオン 11

    View Slide

  12. 2021/5/8 HTML&CSS&JSハンズオン 12

    View Slide

  13. 2021/5/8 HTML&CSS&JSハンズオン 13

    View Slide

  14. 2021/5/8 HTML&CSS&JSハンズオン 14

    View Slide

  15. 2021/5/8 HTML&CSS&JSハンズオン 15

    View Slide

  16. 2021/5/8 HTML&CSS&JSハンズオン 16

    View Slide

  17. 触れることが目的!
    2021/5/8 HTML&CSS&JSハンズオン 17

    View Slide

  18. 2021/5/8 HTML&CSS&JSハンズオン 18

    View Slide

  19. Done is better than perfetctで行きます。
    2021/5/8 HTML&CSS&JSハンズオン 19
    ※著作権の都合により画像削除

    View Slide

  20. 実名(よみがな)
    2021/5/8 HTML&CSS&JSハンズオン 20
    株式会社サクシード デジタルマーケティングチーム アルバイト
    つばめソリューション エンジニア アルバイト(4月まで)
    学歴
    バイト歴
    Twitter
    ポートフォリオ
    GitHub
    https://github.com/Usuyuki
    @usuyuki26
    https://portfolio.usuyuki.net/
    宇都宮大学 工学部 基盤工学科
    情報電子オプティクスコース 情報科学分野 2年
    島根県立浜田高等学校 全日制 理数科
    U-lab(一応)共同代表
    宇都宮市立陽西中学校 サポートスタッフ(アルバイト)

    View Slide

  21. 2021/5/8 HTML&CSS&JSハンズオン 21
    ※代表の方に使用許可を得ています

    View Slide

  22. 2021/5/8 HTML&CSS&JSハンズオン 22
    単純なのはつまらない。
    実際に動いているものの方がいい。

    View Slide

  23. 2021/5/8 HTML&CSS&JSハンズオン 23

    View Slide

  24. 2021/5/8 HTML&CSS&JSハンズオン 24
    CSS楽しいよっていうのを伝えたい!

    View Slide

  25. 2021/5/8 HTML&CSS&JSハンズオン 25
    あと、自分が携わってない!

    View Slide

  26. 2021/5/8 HTML&CSS&JSハンズオン 26

    View Slide

  27. 2021/5/8 HTML&CSS&JSハンズオン 27
    見やすい
    クリック
    しやすい
    目線が
    とどまり
    にくい
    クリック
    しにくい

    View Slide

  28. 2021/5/8 HTML&CSS&JSハンズオン 28

    View Slide

  29. 2021/5/8 HTML&CSS&JSハンズオン 29

    View Slide

  30. 2021/5/8 HTML&CSS&JSハンズオン 30

    View Slide

  31. 2021/5/8 HTML&CSS&JSハンズオン 31

    View Slide

  32. 2021/5/8 HTML&CSS&JSハンズオン 32

    View Slide

  33. 2021/5/8 HTML&CSS&JSハンズオン 33

    View Slide

  34. 2021/5/8 HTML&CSS&JSハンズオン 34

    View Slide

  35. 2021/5/8 HTML&CSS&JSハンズオン 35

    View Slide

  36. 2021/5/8 HTML&CSS&JSハンズオン 36

    View Slide

  37. 2021/5/8 HTML&CSS&JSハンズオン 37

    View Slide

  38. 2021/5/8 HTML&CSS&JSハンズオン 38

    View Slide

  39. 2021/5/8 HTML&CSS&JSハンズオン 39

    View Slide

  40. 2021/5/8 HTML&CSS&JSハンズオン 40

    View Slide

  41. 2021/5/8 HTML&CSS&JSハンズオン 41

    View Slide

  42. 2021/5/8 HTML&CSS&JSハンズオン 42

    View Slide

  43. 2021/5/8 HTML&CSS&JSハンズオン 43

    View Slide

  44. 2021/5/8 HTML&CSS&JSハンズオン 44

    View Slide

  45. 2021/5/8 HTML&CSS&JSハンズオン 45

    View Slide

  46. 2021/5/8 HTML&CSS&JSハンズオン 46

    View Slide

  47. 2021/5/8 HTML&CSS&JSハンズオン 47

    View Slide

  48. 2021/5/8 HTML&CSS&JSハンズオン 48
    ※著作権の都合により画像削除

    View Slide

  49. 2021/5/8 HTML&CSS&JSハンズオン 49

    View Slide

  50. 2021/5/8 HTML&CSS&JSハンズオン 50
    ※著作権の都合により画像削除

    View Slide

  51. 2021/5/8 HTML&CSS&JSハンズオン 51

    View Slide

  52. 2021/5/8 HTML&CSS&JSハンズオン 52

    View Slide

  53. 2021/5/8 HTML&CSS&JSハンズオン 53

    View Slide

  54. 2021/5/8 HTML&CSS&JSハンズオン 54
    ※著作権の都合により画像削除

    View Slide

  55. 2021/5/8 HTML&CSS&JSハンズオン 55
    ※著作権の都合により画像削除

    View Slide

  56. 2021/5/8 HTML&CSS&JSハンズオン 56

    View Slide

  57. 2021/5/8 HTML&CSS&JSハンズオン 57
    Hello World

    View Slide

  58. 2021/5/8 HTML&CSS&JSハンズオン 58
    Hello World

    View Slide

  59. 2021/5/8 HTML&CSS&JSハンズオン 59
    Hello World
    5/8

    View Slide

  60. 2021/5/8 HTML&CSS&JSハンズオン 60

    View Slide

  61. 2021/5/8 HTML&CSS&JSハンズオン 61

    View Slide

  62. 2021/5/8 HTML&CSS&JSハンズオン 62
    ここに文章

    View Slide

  63. 2021/5/8 HTML&CSS&JSハンズオン 63
    <パン>
    具材
    パン>

    View Slide

  64. 2021/5/8 HTML&CSS&JSハンズオン 64

    文章


    要素

    View Slide

  65. 2021/5/8 HTML&CSS&JSハンズオン 65

    View Slide

  66. 2021/5/8 HTML&CSS&JSハンズオン 66

    View Slide

  67. 2021/5/8 HTML&CSS&JSハンズオン 67

    View Slide

  68. 2021/5/8 HTML&CSS&JSハンズオン 68






    View Slide

  69. 2021/5/8 HTML&CSS&JSハンズオン 69






    View Slide

  70. 2021/5/8 HTML&CSS&JSハンズオン 70




    content="IE=edge">

    Document




    View Slide

  71. 2021/5/8 HTML&CSS&JSハンズオン 71
    <ホモサピエンス>
    <人間>
    <頭>
    頭>
    <体>
    体>
    人間>

    View Slide

  72. 2021/5/8 HTML&CSS&JSハンズオン 72

    View Slide

  73. 2021/5/8 HTML&CSS&JSハンズオン 73

    View Slide

  74. 2021/5/8 HTML&CSS&JSハンズオン 74

    View Slide

  75. 2021/5/8 HTML&CSS&JSハンズオン 75

    View Slide

  76. 2021/5/8 HTML&CSS&JSハンズオン 76
    同じ勉強をしていて、なぜ差がつくのか?
    「自分の頭で考える子」に変わる10のマジックワード
    レイアウト・デザインの教科書
    思考の整理学

    View Slide

  77. 2021/5/8 HTML&CSS&JSハンズオン 77

    View Slide

  78. 2021/5/8 HTML&CSS&JSハンズオン 78
    こんなスタイルでよければ、次回も
    参加してもらえると嬉しいです。

    View Slide