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

HTML・CSS勉強会2

Ce075075c165a8428a5974ac00b7a5cf?s=47 rhythm191
November 21, 2019

 HTML・CSS勉強会2

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

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

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

Ce075075c165a8428a5974ac00b7a5cf?s=128

rhythm191

November 21, 2019
Tweet

Transcript

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

  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 NBJODWBSFBEJWQB w B w KPC@P⒎FS@MJOL w BGCUO

  29. )5.-ͷߏ଄ͱಠཱ͍ͨ͠ w ༷ʑͳมߋʹରԠͰ͖ΔΑ͏ʹ͓͖͍ͯͨ͠ w II 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 BGCUOBGCUOŠ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