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

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