HTML・CSS勉強会２

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

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

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

Transcript

1. )5.-ɾ$44ษڧձ̎ ϩʔϧฤ
   (JOP
   JOD
   ۚݪ
2. ࿩͢͜ͱ w 69ͷ࣌ؒߏ଄ʹ͍ͭͯ
   w มߋͷ͠΍͍͢)5.-ɾ$44
   w #&.ʹ͍ͭͯ
3. 69ͱ͸ʁ
4. 69ͷϞσϧͨͪ
5. 69̑֊૚Ϟσϧ
6. 69ͷओͳߏ੒ཁૉ w ϢʔβϏϦςΟ
   w ΠϯλϥΫγϣϯσβΠϯ
   w Ϣʔβʔத৺ઃܭ 6TFS
   $FOUFSFE
   %FTJHO
   w ਓؒத৺ઃܭ )$%
7. 69ͷ࣌ؒߏ଄ w ̐ͭͷ࣌ؒߏ଄Λ࣋ͭ
   w ༧ଌత69
   ར༻લͷظ଴΍ଞͷγεςϜͰͷܦݧ
   w Ұ࣌త69
   ΠϯλϥΫγϣϯ͔Βड͚Δ69
   w Τϐιʔυత69
   ಛఆͷར༻Τϐιʔυʹؔ͢ΔධՁ
   w ྦྷੵ69
   ͠͹Β͘ར༻ͨ͠ޙͷશମతͳݟํ
8. ΧδϡΞϧ໘ஊͰ͍͏ͱ ༧ଌత69
   ϥΠτͦ͏ʜ ଞͷγεςϜͷܦݧ
   ޱίϛ৘ใ Ұ࣌త69
   ཤྺॻʁ
   ࠾༻ͷ৔ʜ Τϐιʔυత69
   Ψν͡ΌͶʔ͔ ྦྷੵ69
   ΧδϡΞϧ͡Όͳ͘Ͷ
9. 69
   
   ͍͍ετʔϦʔͷ࣮ݱ w γεςϜશମͰ͍͍ετʔϦʔΛ࡞ΒͶ͹ͳΒͳ͍
   w Ϣʔβʔ͸ଞͷγεςϜ΍֎෦؀ڥʹӨڹΛड͚Δ ༧ଌత 69 ଞͷγεςϜ Ұ࣌త69 Τϐιʔυ త69 ྦྷੵ69
10. Ϣʔβʔ͸มԽ͢Δ w γεςϜͷशख़ʹΑͬͯϢʔβʔͷ஌͕ࣝ૿͑Δ
    w ֎తཁҼͰϢʔβʔࣗ਎ͷഎܠ͕มԽ͢Δ
    w ଞͷγεςϜʹ͍ͭͯͷ৘ใ
    w Ϣʔβʔ͕ஔ͔Ε͍ͯΔঢ়گ΍؀ڥ͕มΘΔ
11. ௕ظతϢʔβϏϦςΟ w ϢʔβϏϦςΟ΋࣌ؒʹΑͬͯมԽ͢Δ
    w शख़΍࣌ؒܦաΑͬͯޮ཰্͕͕ͬͨΓԼ͕ͬͨΓ
    w ͔ͳ׽ࣈม׵ػೳͱ͔
    w ϚΠεςʔλε͕ॏ͘ͳ͍ͬͯ͘ͱ͔
12. ࣄલʹݕग़Ͱ͖Δ͔ʁ w ࣄલͷϢʔβʔϏϦςΟςετͰ͸ෆे෼
    w ୹࣌ؒͳධՁͰ͋Δ
    w ςελʔͱϢʔβʔͰಈػ΍ؔ৺͕ҟͳΔ
    w Ϣʔβʔͱ؀ڥʢ1$΍ۓٸ౓ʣ͕ҟͳΔ
13. ௕ظతϞχλϦϯά w ࣮ࡍͷϢʔβʔΛର৅ͱͨ͠௕ظతͳධՁ͕ඞཁ
    w ϢʔβʔΠϯλϏϡʔ
    w Ξϯέʔτ
    w ϩΪϯά
    w "#ςετ
    w ϲ݄ʙ೥ΛΊͲʹݟ௚͢ඞཁ͕͋Δ
14. 69͸มԽ͢Δ΋ͷ
15. ఆظతͳݟ௚͕͠ඞཁ
16. ࡞Γͬͺͳ͠
    μϝɻθολΠɻ
17. վળΛଓ͚ΔͨΊʹ
    มߋʹڧ͍)5.-ɾ$44Λ
    ૊Έ͍ͨ
18. มߋͷӨڹʹڧ͘͢Δʹ͸ʁ w )5.-ɾ$44͕ͦΕͧΕͷ໾ׂʹ஫ྗ͢Δ
    w )5.-ͱ$44ؒͷґଘؔ܎Λখ͘͢͞Δ
19. ͦΕͧΕͷϩʔϧ w )5.-
    ೖग़ྗ͢ΔσʔλͱͦͷηϚϯςΟΫεΛ؅ཧ
    w $44
    σʔλͷදݱʢϓϨθϯςʔγϣϯʣΛ؅ཧ
    w +4
    σʔλͷঢ়ଶ΍ΞΫγϣϯΛ؅ཧ
20. )5.-ͷϩʔϧ w ೖग़ྗ͢ΔσʔλͱͦͷηϚϯςΟΫε ҙຯ࿦ Λ؅ཧ
    w จࣈྻ΍਺஋ͷҙຯ͕Θ͔ΔΑ͏ʹϚʔΫΞοϓ͢Δ͜ͱ
    w EBUFEBUF
    w BEESFTTBEESFTT
    w DJUFDJUF
21. ͍͔ʹϚʔΫΞοϓ͢Δ͔ʁ w σʔλΛ࠷΋Α͘આ໌Ͱ͖ΔཁૉΛ࢖͏΂͖
    w σʔλͷϦετͳͷ͔ʁ
    w ॱং෇͖ͳͷ͔ॱংͳ͔͠ʁ
    w هࣄͳͷ͔ิ଍৘ใͳͷ͔ʁ
    w ఆٛͷҰཡʹͳ͍ͬͯΔ͔ʁ
22. σʔλʹ߹Θͤͯ)5.-Λ૊Ή w )5.-ʹσβΠϯཁૉΛؚΊΔͷ͸࠷খݶʹ
    w ඞཁͳ͚࣌ͩEJWͱ͔TQBOͱ͔Λ࢖͏
    w ඪ४ͷελΠϧ͸๨ΕΑ͏
23. ྫ͑͹IS w ஈམϨϕϧͷཁૉؒͰςʔϚͷҙຯతͳ۠੾ΓΛѻ͏
    w ඪ४ͷελΠϧͱͯ͠ਫฏͷ۠੾Γઢ͕ఆٛ͞Ε͍ͯΔ
    w ͍͕ͭ͜໽հ
24. ͜͜ʹISΛ࢖ͬͯΈΔ͡ΌΖ
25. $44ͷϩʔϧ w σʔλͷදݱʢϓϨθϯςʔγϣϯʣΛ؅ཧ
    w ϚʔΫΞοϓʹࢹ֮৘ใΛ෇༩͢Δ
26. ͦ΋ͦ΋6*ͬͯόϯόϯ࡞Δ ΋Μ͡Όͳ͍
27. औΓճ͠Λྑ͍ͨ͘͠ w ଞͷϖʔδʹ΋ྲྀ༻͍ͨ͠
    w มߋ࣌ͷӨڹΛগͳ͍ͨ͘͠
    w όϦΤʔγϣϯΛ֬อ͓͖͍ͯͨ͠
28. ߏ଄ґଘ΍Өڹେ͸ආ͚͍ͨ w NBJO
    
    DWBSFB
    
    EJW
    
    Q
    
    B
    w B
    w KPC@P⒎FS@MJOL
    w BGCUO
29. )5.-ͷߏ଄ͱಠཱ͍ͨ͠ w ༷ʑͳมߋʹରԠͰ͖ΔΑ͏ʹ͓͖͍ͯͨ͠
    w I
    
    I
    Iʹ͍ͨ͠
    w IFBEFSͰғ͍͍ͨ
    w ϦϯΫϘλϯΛ௥Ճ͍ͨ͠
30. #&.ͷߟ͑ํ w $44಺͚ͩͰߏ଄ΛܾΊΔઃܭ๏
    w #MPDL
    w &MFNFOU
    w .PEJpFS
31. #MPDL w ػೳ΍ࢹ֮ͷ·ͱ·ΓΛఆٛ
    w #MPDLͷ໾ׂ͸Ұͭʹ͢Δ΂͖ Χʔυ Ϧετ
32. &MFNFOU w ϒϩοΫͷࢠཁૉͱͯ͠ఆٛ
    w ACMPDL@@FMFNFOUA
    Ͱهࡌ͢Δ
    w FMFNFOUͷϨΠΞ΢ςΟϯά΍௥ՃͷελΠϧΛ෇༩
    w ωετߏ଄Λ๷͙ͨΊɺجຊ͸ΫϥεͰఆٛ͢Δ΂͖
33. .PEJpFS w #MPDL΍&MFNFOUʹҟͳΔࢹ֮ύλʔϯΛ࡞੒
    w ACMPDLNPEJpFSA΍ACMPDL@@FMFNFOUNPEJpFSA
    w ϚϧνΫϥεͰελΠϧͷมߋΛՃ͍͑ͯ͘ BGCUO BGCUO
    BGCUOŠCMVF
34. #&.ͷϝϦοτ w )5.-ͷߏ଄ λάͱ͔ ʹґଘ͠ͳ͍ͷͰมߋʹڧ͍
    w ΫϥεͷিಥΛආ͚ΒΕΔ
    w ίϯϙʔωϯτͷ֦ு͕͠΍͍͢
    w $44ͷωετ͕খ͘͞ͳͬͯϨϯμϦϯά͕଎͘ͳΔ
35. #&.ͷσϝϦοτ w ͖΋͍
    w ໊લ͕௕͍
36. Ξχϝʔγϣϯͷ੾Γ෼͚ w ঢ়ଶΛ࣋ͬͨΓɺ)5.-Λมߋ͢Δ͔Ͱ෼͚Δ
    w $44
    ঢ়ଶΛ࣋ͨͳ͍
    PS
    ϢʔβʔΠϯλϥΫγϣϯͷΈ ʹґଘ
    w +4
    ঢ়ଶΛอͭɺ)5.-Λॻ͖׵͑Δ
37. ྫ͑͹πʔϧνοϓ w ݪཧతʹ͸$44Ͱ࣮૷͢Δͷ͕ਖ਼͍͠
    w IPWFSʹͷΈґଘ͢Δ
    w BZతʹ͸)5.-ͰಡΊΔඞཁ͕͋Δ
    w ϓϩδΣΫτ΍ϥΠϒϥϦͷঢ়گͱ૬ஊ࣮ͯ͠૷͢Δ
38. ·ͱΊ w 69͸࣌ؒߏ଄Λ͍࣋ͬͯͯɺαʔϏεશମͷ69ʹ໨Λ޲ ͚௕ظతʹվળΛଓ͚ͳ͚Ε͹ͳΒͳ͍
    w มߋ΍"#ςετͷͨΊʹมߋʹڧ͍)5.-ɾ$44Λ૊Ή ඞཁ͕͋Δ
    w )5.-ͱ$44ͷґଘؔ܎Λۃྗͳͦ͘͏
39. ࢀߟจݙ w 69നॻ
    IUUQTJUFIDEWBMVFPSHEPDT
    w