HTML・CSS勉強会２

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

UXの話と変更しやすいHTML・CSSとは何か？について話しました。

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

Transcript

1. )5.-ɾ$44ษڧձ̎
   ϩʔϧฤ
   (JOPJODۚݪ
   

   View Slide

2. ࿩͢͜ͱ
   w 69ͷ࣌ؒߏ଄ʹ͍ͭͯ
   w มߋͷ͠΍͍͢)5.-ɾ$44
   w #&.ʹ͍ͭͯ
   

   View Slide

3. 69ͱ͸ʁ
   

   View Slide

4. 69ͷϞσϧͨͪ
   

   View Slide

5. 69̑֊૚Ϟσϧ
   

   View Slide

6. 69ͷओͳߏ੒ཁૉ
   w ϢʔβϏϦςΟ
   w ΠϯλϥΫγϣϯσβΠϯ
   w Ϣʔβʔத৺ઃܭ 6TFS$FOUFSFE%FTJHO
   
   w ਓؒத৺ઃܭ )$%
   
   

   View Slide

7. 69ͷ࣌ؒߏ଄
   w ̐ͭͷ࣌ؒߏ଄Λ࣋ͭ
   w ༧ଌత69ར༻લͷظ଴΍ଞͷγεςϜͰͷܦݧ
   w Ұ࣌త69ΠϯλϥΫγϣϯ͔Βड͚Δ69
   w Τϐιʔυత69ಛఆͷར༻Τϐιʔυʹؔ͢ΔධՁ
   w ྦྷੵ69͠͹Β͘ར༻ͨ͠ޙͷશମతͳݟํ
   

   View Slide

8. ΧδϡΞϧ໘ஊͰ͍͏ͱ
   ༧ଌత69
   ϥΠτͦ͏ʜ
   ଞͷγεςϜͷܦݧ
   ޱίϛ৘ใ
   Ұ࣌త69
   ཤྺॻʁ
   ࠾༻ͷ৔ʜ
   Τϐιʔυత69
   Ψν͡ΌͶʔ͔
   ྦྷੵ69
   ΧδϡΞϧ͡Όͳ͘Ͷ
   

   View Slide

9. 69͍͍ετʔϦʔͷ࣮ݱ
   w γεςϜશମͰ͍͍ετʔϦʔΛ࡞ΒͶ͹ͳΒͳ͍
   w Ϣʔβʔ͸ଞͷγεςϜ΍֎෦؀ڥʹӨڹΛड͚Δ
   ༧ଌత
   69
   ଞͷγεςϜ Ұ࣌త69
   Τϐιʔυ
   త69
   ྦྷੵ69
   

   View Slide

10. Ϣʔβʔ͸มԽ͢Δ
    w γεςϜͷशख़ʹΑͬͯϢʔβʔͷ஌͕ࣝ૿͑Δ
    w ֎తཁҼͰϢʔβʔࣗ਎ͷഎܠ͕มԽ͢Δ
    w ଞͷγεςϜʹ͍ͭͯͷ৘ใ
    w Ϣʔβʔ͕ஔ͔Ε͍ͯΔঢ়گ΍؀ڥ͕มΘΔ
    

    View Slide

11. ௕ظతϢʔβϏϦςΟ
    w ϢʔβϏϦςΟ΋࣌ؒʹΑͬͯมԽ͢Δ
    w शख़΍࣌ؒܦաΑͬͯޮ཰্͕͕ͬͨΓԼ͕ͬͨΓ
    w ͔ͳ׽ࣈม׵ػೳͱ͔
    w ϚΠεςʔλε͕ॏ͘ͳ͍ͬͯ͘ͱ͔
    

    View Slide

12. ࣄલʹݕग़Ͱ͖Δ͔ʁ
    w ࣄલͷϢʔβʔϏϦςΟςετͰ͸ෆे෼
    w ୹࣌ؒͳධՁͰ͋Δ
    w ςελʔͱϢʔβʔͰಈػ΍ؔ৺͕ҟͳΔ
    w Ϣʔβʔͱ؀ڥʢ1$΍ۓٸ౓ʣ͕ҟͳΔ
    

    View Slide

13. ௕ظతϞχλϦϯά
    w ࣮ࡍͷϢʔβʔΛର৅ͱͨ͠௕ظతͳධՁ͕ඞཁ
    w ϢʔβʔΠϯλϏϡʔ
    w Ξϯέʔτ
    w ϩΪϯά
    w "#ςετ
    w ϲ݄ʙ೥ΛΊͲʹݟ௚͢ඞཁ͕͋Δ
    

    View Slide

14. 69͸มԽ͢Δ΋ͷ
    

    View Slide

15. ఆظతͳݟ௚͕͠ඞཁ
    

    View Slide

16. ࡞Γͬͺͳ͠
    μϝɻθολΠɻ
    

    View Slide

17. վળΛଓ͚ΔͨΊʹ
    มߋʹڧ͍)5.-ɾ$44Λ
    ૊Έ͍ͨ
    

    View Slide

18. มߋͷӨڹʹڧ͘͢Δʹ͸ʁ
    w )5.-ɾ$44͕ͦΕͧΕͷ໾ׂʹ஫ྗ͢Δ
    w )5.-ͱ$44ؒͷґଘؔ܎Λখ͘͢͞Δ
    

    View Slide

19. ͦΕͧΕͷϩʔϧ
    w )5.-ೖग़ྗ͢ΔσʔλͱͦͷηϚϯςΟΫεΛ؅ཧ
    w $44σʔλͷදݱʢϓϨθϯςʔγϣϯʣΛ؅ཧ
    w +4σʔλͷঢ়ଶ΍ΞΫγϣϯΛ؅ཧ
    

    View Slide

20. )5.-ͷϩʔϧ
    w ೖग़ྗ͢ΔσʔλͱͦͷηϚϯςΟΫε ҙຯ࿦
    Λ؅ཧ
    w จࣈྻ΍਺஋ͷҙຯ͕Θ͔ΔΑ͏ʹϚʔΫΞοϓ͢Δ͜ͱ
    w EBUFEBUF
    w BEESFTTBEESFTT
    w DJUFDJUF
    

    View Slide

21. ͍͔ʹϚʔΫΞοϓ͢Δ͔ʁ
    w σʔλΛ࠷΋Α͘આ໌Ͱ͖ΔཁૉΛ࢖͏΂͖
    w σʔλͷϦετͳͷ͔ʁ
    w ॱং෇͖ͳͷ͔ॱংͳ͔͠ʁ
    w هࣄͳͷ͔ิ଍৘ใͳͷ͔ʁ
    w ఆٛͷҰཡʹͳ͍ͬͯΔ͔ʁ
    

    View Slide

22. σʔλʹ߹Θͤͯ)5.-Λ૊Ή
    w )5.-ʹσβΠϯཁૉΛؚΊΔͷ͸࠷খݶʹ
    w ඞཁͳ͚࣌ͩEJWͱ͔TQBOͱ͔Λ࢖͏
    w ඪ४ͷελΠϧ͸๨ΕΑ͏
    

    View Slide

23. ྫ͑͹IS
    w ஈམϨϕϧͷཁૉؒͰςʔϚͷҙຯతͳ۠੾ΓΛѻ͏
    w ඪ४ͷελΠϧͱͯ͠ਫฏͷ۠੾Γઢ͕ఆٛ͞Ε͍ͯΔ
    w ͍͕ͭ͜໽հ
    

    View Slide

24. ͜͜ʹISΛ࢖ͬͯΈΔ͡ΌΖ
    

    View Slide

25. $44ͷϩʔϧ
    w σʔλͷදݱʢϓϨθϯςʔγϣϯʣΛ؅ཧ
    w ϚʔΫΞοϓʹࢹ֮৘ใΛ෇༩͢Δ
    

    View Slide

26. ͦ΋ͦ΋6*ͬͯόϯόϯ࡞Δ
    ΋Μ͡Όͳ͍
    

    View Slide

27. औΓճ͠Λྑ͍ͨ͘͠
    w ଞͷϖʔδʹ΋ྲྀ༻͍ͨ͠
    w มߋ࣌ͷӨڹΛগͳ͍ͨ͘͠
    w όϦΤʔγϣϯΛ֬อ͓͖͍ͯͨ͠
    

    View Slide

28. ߏ଄ґଘ΍Өڹେ͸ආ͚͍ͨ
    w NBJODWBSFBEJWQB
    w B
    w KPC@P⒎FS@MJOL
    w BGCUO
    

    View Slide

29. )5.-ͷߏ଄ͱಠཱ͍ͨ͠
    w ༷ʑͳมߋʹରԠͰ͖ΔΑ͏ʹ͓͖͍ͯͨ͠
    w II Iʹ͍ͨ͠
    w IFBEFSͰғ͍͍ͨ
    w ϦϯΫϘλϯΛ௥Ճ͍ͨ͠
    

    View Slide

30. #&.ͷߟ͑ํ
    w $44಺͚ͩͰߏ଄ΛܾΊΔઃܭ๏
    w #MPDL
    w &MFNFOU
    w .PEJpFS
    

    View Slide

31. #MPDL
    w ػೳ΍ࢹ֮ͷ·ͱ·ΓΛఆٛ
    w #MPDLͷ໾ׂ͸Ұͭʹ͢Δ΂͖ ΧʔυϦετ
    
    

    View Slide

32. &MFNFOU
    w ϒϩοΫͷࢠཁૉͱͯ͠ఆٛ
    w ACMPDL@@FMFNFOUAͰهࡌ͢Δ
    w FMFNFOUͷϨΠΞ΢ςΟϯά΍௥ՃͷελΠϧΛ෇༩
    w ωετߏ଄Λ๷͙ͨΊɺجຊ͸ΫϥεͰఆٛ͢Δ΂͖
    

    View Slide

33. .PEJpFS
    w #MPDL΍&MFNFOUʹҟͳΔࢹ֮ύλʔϯΛ࡞੒
    w ACMPDLNPEJpFSA΍ACMPDL@@FMFNFOUNPEJpFSA
    w ϚϧνΫϥεͰελΠϧͷมߋΛՃ͍͑ͯ͘
    BGCUO BGCUOBGCUOŠCMVF
    

    View Slide

34. #&.ͷϝϦοτ
    w )5.-ͷߏ଄ λάͱ͔
    ʹґଘ͠ͳ͍ͷͰมߋʹڧ͍
    w ΫϥεͷিಥΛආ͚ΒΕΔ
    w ίϯϙʔωϯτͷ֦ு͕͠΍͍͢
    w $44ͷωετ͕খ͘͞ͳͬͯϨϯμϦϯά͕଎͘ͳΔ
    

    View Slide

35. #&.ͷσϝϦοτ
    w ͖΋͍
    w ໊લ͕௕͍
    

    View Slide

36. Ξχϝʔγϣϯͷ੾Γ෼͚
    w ঢ়ଶΛ࣋ͬͨΓɺ)5.-Λมߋ͢Δ͔Ͱ෼͚Δ
    w $44ঢ়ଶΛ࣋ͨͳ͍PSϢʔβʔΠϯλϥΫγϣϯͷΈ
    ʹґଘ
    w +4ঢ়ଶΛอͭɺ)5.-Λॻ͖׵͑Δ
    

    View Slide

37. ྫ͑͹πʔϧνοϓ
    w ݪཧతʹ͸$44Ͱ࣮૷͢Δͷ͕ਖ਼͍͠
    w IPWFSʹͷΈґଘ͢Δ
    w BZతʹ͸)5.-ͰಡΊΔඞཁ͕͋Δ
    w ϓϩδΣΫτ΍ϥΠϒϥϦͷঢ়گͱ૬ஊ࣮ͯ͠૷͢Δ
    

    View Slide

38. ·ͱΊ
    w 69͸࣌ؒߏ଄Λ͍࣋ͬͯͯɺαʔϏεશମͷ69ʹ໨Λ޲
    ͚௕ظతʹվળΛଓ͚ͳ͚Ε͹ͳΒͳ͍
    w มߋ΍"#ςετͷͨΊʹมߋʹڧ͍)5.-ɾ$44Λ૊Ή
    ඞཁ͕͋Δ
    w )5.-ͱ$44ͷґଘؔ܎Λۃྗͳͦ͘͏
    

    View Slide

39. ࢀߟจݙ
    w 69നॻIUUQTJUFIDEWBMVFPSHEPDT
    w
    

    View Slide