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

HTML・CSS勉強会2

rhythm191
November 21, 2019

 HTML・CSS勉強会2

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

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

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

rhythm191

November 21, 2019
Tweet

More Decks by rhythm191

Other Decks in Technology

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 [email protected][email protected]
    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 [email protected]@FMFNFOUAͰهࡌ͢Δ
    w FMFNFOUͷϨΠΞ΢ςΟϯά΍௥ՃͷελΠϧΛ෇༩
    w ωετߏ଄Λ๷͙ͨΊɺجຊ͸ΫϥεͰఆٛ͢Δ΂͖

    View Slide

  33. .PEJpFS
    w #MPDL΍&MFNFOUʹҟͳΔࢹ֮ύλʔϯΛ࡞੒
    w ACMPDLNPEJpFSA΍[email protected]@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