WebアプリケーションとWebサイトのデザインの違いからみるCSS設計

5月の #frontkansai にて発表したセッションのスライド資料です。

あわせてコチラのツイートもどうぞ。
https://twitter.com/potato4d/status/731457914792116234

Transcript

1. 8FCΞϓϦέʔγϣϯͱ
   8FCαΠτͷσβΠϯͷ
   ҧ͍͔ΒΈΔ$44ઃܭ GSPOULBOTBJ
   
   1PUBUPE
2. ࣗݾ঺հ 1PUBUPE Ֆ୩
   ୓ຏ
   ޲ཅ୆ߴ౳ֶߍࡾ೥
   גࣜձࣾ3&/0ϑϩϯτΤϯυ ΤϯδχΞ݉σβΠφʔ
   LGVHͷελοϑ΋΍ͬͯ·͢
   potato4d
3. ࠓճ࿩͢͜ͱ
4. $44ઃܭʹ͍ͭͯ
5. $44ઃܭͷΩʔϫʔυ
6. $44ઃܭͷΩʔϫʔυ 00$44 #&. 4."$44 '-0$44
7. ૉ੖Β͍͠ʂʂ
8. ૉ੖Β͍͠ʜʜ͕
9. ͦͷίʔσΟϯάʹ
   ඞཁͰ͔͢ʁ
10. େલఏ
11. 8FCΞϓϦέʔγϣϯͱ
    8FCαΠτͷ౎߹͸શ͘ҧ͏
12. 8FCΞϓϦέʔγϣϯ w ଟ͘ͷը໘Ͱಉ͡ίϯϙʔωϯ τΛଟ༻͢Δ
    w ͜ͷϖʔδ͚ͩʂͱ͍ͬͨ΋ͷ ͸͋·Γͳ͘ɺڞ௨෦඼͔Β୳ ͩͯͦ͠͠ΕΛར༻͢ΔΠϝʔδ
    w ૄ݁߹͔ͭ࠶ར༻ੑͷߴ͍ίʔ υ͕ٻΊΒΕΔ
    w मਖ਼ɾվળͷػձ͕ଟ͘ɺมߋ ʹڧ͍ίʔυ͕ٻΊΒΕΔ
13. 8FCαΠτ w τοϓϖʔδ͚ͩʂ͜ͷԼ૚͚ͩʂ ͱ͍ͬͨཁૉ͕ଟ͘ଘࡏ͢Δ
    w άϦουγεςϜΈ͍ͨͳେ· ͔ͳ୯Ґͦ͋͜ΕͲɺͦ͜·Ͱ ଟ༻͠ͳ͍
    w ࠶ར༻ίϯϙʔωϯτ͸ີ݁߹ ͳϞϊ͕͓͓͍
    w ίʔσΟϯάͷظؒ͸୹͘ɺอ कͷྔ͸ଟ͘͸ͳ͍͜ͱ͕ଟ͍
14. Α͋͘Δ$44ઃܭύλʔϯͷ
    ಛ௃ w ಛఆͷنଇ ಛʹ໋໊΍෼ׂج४ ͷجʹଇͬͯॻ͘
    w جຊతʹૄ݁߹Λલఏͱ͠ɺখ͍͞ن໛ͷίϯϙʔ ωϯτ܈Λ૊Έ߹Θ͍ͤͯ͘
    w มߋʹڧ͘ɺอकੑʹ༏ΕΔ
    w ಋೖʹ͋ͨͬͯͷίετ౳͸໌֬ʹଘࡏ͢Δ
    w ௕͍εύϯͰͷ։ൃʹڧ͍
15. ͭ·Γ
    8FCΞϓϦέʔγϣϯ޲͚
16. 8FCΞϓϦέʔγϣϯͱ͍͏ੈքͰ͸ɺ
    ؒҧ͍ͳ͘େ͖ͳԸܙΛड͚Δ͜ͱ͕
    Ͱ͖Δɻ
17. Ͱ͸8FCαΠτͰͷ ࠷దղ͸ʁ
18. 8FCαΠτ੍࡞Ͱ
    ٻΊΒΕΔͰ͋Ζ͏ཁ݅ w ૣ͘࢓্͕ΔίʔσΟϯάٕ๏
    w $44ઃܭͰͷݻ͗͢Δ෦෼ ݎ࿚Ͱ͋Δ͕Ώ͑ʹಈ ͖ͮΒ͘ͳΔ෦෼ ͷંΓ߹͍ͷ෇͚ํ
    w ؀ڥʹ΋ΑΔ͕ 8FCαʔϏε΄Ͳ௕͍εύϯͰ͸ ͳ͍ͷͰɺਓһͷ஌ࣝΛ໰Θͣ͋Δఔ౓ӡ༻Մೳͳ ࢓੍༷ఆ
19. ૣ͘࢓্͕ΔίʔσΟϯάٕ๏ͱ
    ઃܭͱͷંΓ߹͍ͷ෇͚ํ w Կ΋ߟ͑ͣʹॻ͘ͱޙͰΈΜͳ͕ٽ͖ΛݟΔ͜ͱʹ ͳΔͷ͕$44
    w ͚ΕͲɺઃܭΛॏࢹ͢Δͱɺ௕ظతͳ଎౓͸্͕Δ ΋ͷͷɺβʔοͱॻ͍ͯ͠·͏Α͏ͳ࣌Ͱ͸͔͑ͬ ͯ஗͘ͳͬͯ͠·͏
    w ௨ৗͷ8FCαΠτ੍࡞Ͱ͸ɺҎԼʹ༨ܭͳࢥߟΛ ݮΒͯ͠εϜʔζʹίʔσΟϯάΛߦ͏͔͕ॏཁ
20. ύλʔϯ͔͠ແ͍͚ΕͲɺ
    Կ౓͔ग़൪͸͋ΔΰʔετϘλϯͷ
    ACVUUPOEFGBVMUAͷଘࡏҙٛͱ͸ʁ CVUUPO
    CVUUPOEFGBVMU
21. $.4ͷग़ྗͰ͍ͭͯ͘Δ
    Ϋϥε΍*%ʹ߹ΘͤΔ͜ͱͰɺ
    $44ͷϧʔϧ͔Βҳ୤͢Δ͜ͱͷ
    σϝϦοτ͸ʁ BSUJDMF
    BSUJDMFUJUMF CPEZ
    DMBTTBSUJDMF
22. อकͷػձ͕ͳͦ͞͏ͳ΋ͷͷ $44ઃܭʹ೰ΉΑΓ΋ͬͱॏཁ ͳ͜ͱ΋͋ΔͷͰ͸ʁ
23. ͜ͱ8FCαΠτʹݶͬͯݴ͑͹ɺ
    όουϊ΢ϋ΢ͷதʹϕετϓϥ ΫςΟε͸͋Δͷ͔΋͠Εͳ͍
24. ΋͠8FCΞϓϦέʔγϣϯ༏Ґͳ
    ࠓͷք۾Ͱ
25. ͦͷํ໘ʹ௕͚ͨΤϯδχΞ͕
    8FCαΠτΛ੍࡞͢Δ͕࣌͋Ε͹
26. ʮదࡐదॴͷ$44ʯ
    ʹ͍ͭͯߟ͑ͯΈͯ͸ʁ
27. /P
    4JMWFS
    #VMMFU
28. /P
    4JMWFS
    #VMMFU JO
    $44
    XPSME 5IF
    TBNF
29. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠