HTML・CSS勉強会３

Gino inc. でやったHTML・CSS勉強会です。

デザインシステムについて話しました。

元のキーノートはここ
https://github.com/rhythm191/html-conference-in-gino

Transcript

1. )5.-ɾ$44ษڧձ̏ σβΠϯγεςϜฤ
   (JOP
   JOD
   ۚݪ
2. ΧΦεʹΑ͏ͦ͜ʂ ᶃ ᶄ ᶅ ᶆ ࠓ
   ί
   ί ֎෦ͷσβΠφʔ
   ʹґཔͯͨ͠ࠒ .͞Μ͕
   qPDTTͯͨ͠ࠒ ,͞Μ͕
   σβΠϯͯͨ͠ࠒ
3. ंྠͷ࠶ൃ໌Λ͠ଓ͚ͨ݁Ռ
4. ͳͥ૿͑ͯ͠·ͬͨͷ͔
5. σβΠϯؤுΓ͗͢͡ΌͶ
6. ंྠͷ࠶ൃ໌Λ͢Δਓʑ w σβΠφʔ
   w ಉ͡໰୊ΛԿ౓΋σβΠϯ͍ͯ͠Δ
   w ຖճಉ͡ύʔπΛίʔυʹམͱ͠ࠐΜͰΔ
   w ΤϯδχΞ
   w ίϯϙʔωϯτ͝ͱʹΧελϜελΠϧΛ؅ཧͯ͠Δ
   w ίʔυࣗମ͕ཚࡶʹͳ͍ͬͯͬͯΔ
7. ͦ΋ͦ΋6*࡞ΔͷΉͣ͘Ͷ w 6*ίϯϙʔωϯτʹ੝ΓࠐΉཁૉ͕ଟ͘ͳͬͨ ϘλϯͰߟ͑ͳ͍ͱ͍͚ͳ͍͜ͱ w Ϙλϯࣗମͷܗঢ়
   w എܠ৭
   w ςΩετ
   w ςΩετΧϥʔ
   w ϑΥϯταΠζ
   w ΞΠίϯ w Ξχϝʔγϣϯ
   w ϑΟʔυόοΫ
   w Ϩεϙϯγϒ
   w ΞΫηγϏϦςΟ
   w ΩʔϘʔυΠϯλϥΫγϣϯ
   w 8"*"3*"
   w ̎ॏૹ৴ w IPWFS࣌ͷঢ়ଶ
   w GPDVT࣌ͷঢ়ଶ
   w BDUJWF࣌ͷঢ়ଶ
   w EJTBCMFE࣌ͷঢ়ଶ
8. ΞΠσΞ͔ΒϦϦʔε·Ͱͷ ྲྀΕ w ΞΠσΞ
   w 8'
   w 6*69ϨϏϡʔ
   w ࢓༷ϨϏϡʔ
   w ϏδϡΞϧσβΠϯ
   w 6*69ϨϏϡʔ
   w ࢓༷ϨϏϡʔ
   w )5.-࣮૷
   w ίʔυϨϏϡʔ
   w QBJ[B૊ΈࠐΈ
   w ݕূ
   w ϦϦʔε
9. ໰୊ͷ·ͱΊ w ύλʔϯ͕໌จԽ͞Εͯͳ͍ͨΊ౷Ұײ͕ͳ͍
   w ΞΠσΞ
   
   ϦϦʔε·ͰͷϦʔυλΠϜ͕஗͍
   w 6*ͷΫΦϦςΟΛ֬อ͢Δ࢓૊Έ͕ͳ͍
10. %FTJHO
    4ZTUFNͰ΍Γ͍ͨ͜ͱ w Ұ؏ͨ͠σβΠϯϧʔϧ΍ϒϥϯυΠϝʔδΛߏங͢Δ
    w 6*΍ϖʔδߏ੒ΛύλʔϯԽ͠ɺ࠶ར༻Մೳʹ͢Δ͜ͱ
    w ίϯϙʔωϯτΛ૊Έ߹ΘͤͯϓϩτλΠϐϯά͍ͨ͠
11. %FTJHO
    4ZTUFN
    
    
    
    QBJ[BΛσβΠϯͨΊͷϓϩμΫτ 
12. %FTJHO
    4ZTUFNʹؚ·ΕΔ΋ͷ w σβΠϯݪଇ
    w ϒϥϯυΠϝʔδ
    w πʔϧ 4LFUDIϥΠϒϥϦͱ͔
    w 6*ύλʔϯɾ6*ϥΠϒϥϦ
    w 7PJDF
    
    5POF
    w υΩϡϝϯτ
13. %FTJHO
    4ZTUFNͷྫ w .BSWFM
    IUUQTNBSWFMBQQDPNTUZMFHVJEF
    w "UUSBTJBO
    IUUQTXXXBUMBTTJBOEFTJHO
    w )FSPLV
    IUUQTEFTJHOIFSPLBJDPN
    w 1JOUFSFTU
    IUUQTQJOUFSFTUHJUIVCJPHFTUBMU
14. σβΠϯݪଇͱ͸ʁ w ϓϩμΫτ΍σβΠϯͷํ޲ੑ΍͋ΓํΛ໌จԽͨ͠΋ͷ
    w σβΠϯͷίϯηϓτ
    w ୭ʹର͢ΔσβΠϯͳͷ͔
    w ϒϥϯυΠϝʔδʹͭͳ͕Δ΋ͷ
    w σβΠϯͰ΍ͬͯ͸͍͚ͳ͍͜ͱ
15. σβΠϯݪଇ
    
    
    ʮΒ͠͞ʯΛ໌จԽ͢Δ͜ͱ
16. QBJ[BΒ͠͞ͱ͸ʁ
17. ผʑͷϝϯλϧϞσϧ͕
    ܗ੒͞ΕΔ
18. 1JOUFSFTU w ໌շ
    w ௚ײతͰֶशͷඞཁ͕ͳ͘ɺ࣍ʹԿΛ͢Δ͔෼͔Δ
    w ׆ؾ
    w ΧϥϑϧͰ༂ಈతͰ͍͍ҙຯͰ༧૝֎
    w յΕͳ͍
    w Կ͕ى͍ͬͯ͜Δ͔໌֬ʹϑΟʔυόοΫͨ͠ΓɺϛεΛى ͮ͜͠Β͘͠ɺϛεͬͯ΋ݩʹ໭ͤΔΑ͏ʹ͢Δ
19. 4IPQJGZͷ৔߹ w 1VU
    NFSDIBOUT
    pSTUʢചΓखΛୈҰʹ͢Δʣ
    w &NQPXFS
    CVU
    EPO`U
    PWFSXIFMNʢྗΛ༩͑Δ͕ѹ౗͠ ͳ͍ʣ
    w #VJME
    B
    DPIFTJWF
    FYQFSJFODFʢີ઀ͳମݧΛߏங͢Δʣ
    w #F
    QPMJTIFE
    CVU
    OPU
    PSOBNFOUBMʢચ࿅͞Ε͍ͯΔ͕૷ ০తͰ͸ͳ͍ʣ
20. ελΠϧλΠϧ
21. 7PJDF
    
    5POF w จষ΍τʔϯ͸ϓϩμΫτͷҹ৅ʹେ͖͘Өڹ͢Δ
    w ஸೡͰ੣࣮
    PS
    ཅؾͰલ޲͖
    w ೔෇ͷϑΥʔϚοτͱ͔
22. 7PJDF
    
    5POFͷྫ
23. ύλʔϯͱڞ௨ݴޠԽ
24. σβΠϯύλʔϯ w σβΠϯͷ໰୊Λղܾ͢ΔͨΊͷ࠶ར༻Մೳͳղܾࡦ
    w ίϯϙʔωϯτϥΠϒϥϦ
    w ΧϥʔύϨοτ
    w ΞΠίϯ
25. ྫ͑͹'VUVSF-FBSOͷ৔߹ w IUUQTEFTJHOTZTUFNGVUVSFMFBSODPN
26. ύʔπͷ੾Γ෼͚ύλʔϯ w ػೳύλʔϯ
    w ໨తୡ੒ͷͨΊʹଅ͍ͨ͠ߦಈͷύλʔϯ
    w ೝ஌ύλʔϯ
    w දݱ͍ͨ͠ݸੑ΍ಛ௃ͷύλʔϯ
27. ػೳύλʔϯ w ໨తୡ੒ͷͨΊʹଅ͍ͨ͠ߦಈͷύλʔϯ
    w Ϙλϯ
    w ϝχϡʔ
    w ϑΥʔϜ
28. 'FBUVSF-FBSOͷ৔߹
29. ΋͏গ͠ػೳతʹΑͬͯΈΔ
30. ࢹ֮తώΤϥϧΩʔ
31. ೝ஌ύλʔϯ w දݱ͍ͨ͠ݸੑ΍ಛ௃ͷύλʔϯ
    w ৭
    w λΠϙάϥϑΟ
    w ΞΠίϯ
    w Ξχϝʔγϣϯ
32. ྫ͑͹৭ w ੨͍จࣈ΍ϥϕϧͬΆ͍ͷ͸ΫϦοΫͰ͖Δʢ͸ͣʣ
33. ڞ௨ݴޠԽ w ֓೦ʹରͯͦ͠ΕΛઆ໌͢Δݴ༿ΛܾΊͯҙຯ͚ͮ͢Δ
    w ίϯϙʔωϯτͷ໋໊
    w ৭ͷ໋໊
34. 4JOHMF
    TPVSDF
    PG
    USVUI
35. 4JOHMF
    TPVSDF
    PG
    USVUIʁ w σβΠϯγεςϜ͸σβΠϯΛޠΔ্Ͱ
    །Ұͷ৘ใݯʹͳΔ΂͖
36. ࠓ·Ͱͷ w ͍ΖΜͳൃੜݯ͔ΒQBJ[Bʹ૊Έࠐ·Ε͖ͯͨ ։ൃऀ σβΠφʔ اըऀ QBJ[B QBJ[B
37. ͜Ε͔Β w σβΠϯγεςϜʹू໿͠ɺ͔͜͜Βग़ྗ͢Δ QBJ[B σβΠϯγεςϜ ։ൃऀ σβΠφʔ اըऀ
38. ৽͍͠ϫʔΫϑϩʔ σβΠϯݪଇ σβΠϯ
    γεςϜ ΞΠσΞ ϓϩτλΠϐϯά ϏδϡΞϧ
    σβΠϯ ϦϦʔε σβΠϯ
    γεςϜ։ൃ ϓϩμΫτ
    ։ൃ
39. ·ͱΊ w σβΠϯ໰୊ͷղܾͷͨΊʹσβΠϯγεςϜΛ࡞Ζ͏
    w Ұ؏ͨ͠σβΠϯϧʔϧ΍ϒϥϯυΠϝʔδΛߏங͢Δ
    w 6*΍ϖʔδߏ੒ΛύλʔϯԽ͠࠶ར༻Մೳʹ͢Δ͜ͱ
    w ίϯϙʔωϯτΛ૊Έ߹ΘͤͯϓϩτλΠϐϯά͢Δ