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

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

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

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

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

Transcript

  1. 8FCΞϓϦέʔγϣϯͱ 8FCαΠτͷσβΠϯͷ ҧ͍͔ΒΈΔ$44ઃܭ GSPOULBOTBJ1PUBUPE

  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ͷଘࡏҙٛͱ͸ʁ CVUUPOCVUUPOEFGBVMU

  21. $.4ͷग़ྗͰ͍ͭͯ͘Δ Ϋϥε΍*%ʹ߹ΘͤΔ͜ͱͰɺ $44ͷϧʔϧ͔Βҳ୤͢Δ͜ͱͷ σϝϦοτ͸ʁ BSUJDMFBSUJDMFUJUMF CPEZDMBTTBSUJDMF

  22. อकͷػձ͕ͳͦ͞͏ͳ΋ͷͷ $44ઃܭʹ೰ΉΑΓ΋ͬͱॏཁ ͳ͜ͱ΋͋ΔͷͰ͸ʁ

  23. ͜ͱ8FCαΠτʹݶͬͯݴ͑͹ɺ όουϊ΢ϋ΢ͷதʹϕετϓϥ ΫςΟε͸͋Δͷ͔΋͠Εͳ͍

  24. ΋͠8FCΞϓϦέʔγϣϯ༏Ґͳ ࠓͷք۾Ͱ

  25. ͦͷํ໘ʹ௕͚ͨΤϯδχΞ͕ 8FCαΠτΛ੍࡞͢Δ͕࣌͋Ε͹

  26. ʮదࡐదॴͷ$44ʯ ʹ͍ͭͯߟ͑ͯΈͯ͸ʁ

  27. /P4JMWFS#VMMFU

  28. /P4JMWFS#VMMFU JO$44XPSME 5IFTBNF

  29. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠