WebアプリケーションとWebサイトのデザインの違いからみるCSS設計

by potato4d(Hanatani Takuma)

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ 1PUBUPE Ֆ୩୓ຏ ޲ཅ୆ߴ౳ֶߍࡾ೥ גࣜձࣾ3&/0ϑϩϯτΤϯυ ΤϯδχΞ݉σβΠφʔ LGVHͷελοϑ΋΍ͬͯ·͢ potato4d

Slide 3

Slide 3 text

ࠓճ࿩͢͜ͱ

Slide 4

Slide 4 text

$44ઃܭʹ͍ͭͯ

Slide 5

Slide 5 text

$44ઃܭͷΩʔϫʔυ

Slide 6

Slide 6 text

$44ઃܭͷΩʔϫʔυ 00$44 #&. 4."$44 '-0$44

Slide 7

Slide 7 text

ૉ੖Β͍͠ʂʂ

Slide 8

Slide 8 text

ૉ੖Β͍͠ʜʜ͕

Slide 9

Slide 9 text

ͦͷίʔσΟϯάʹ ඞཁͰ͔͢ʁ

Slide 10

Slide 10 text

େલఏ

Slide 11

Slide 11 text

8FCΞϓϦέʔγϣϯͱ 8FCαΠτͷ౎߹͸શ͘ҧ͏

Slide 12

Slide 12 text

8FCΞϓϦέʔγϣϯ w ଟ͘ͷը໘Ͱಉ͡ίϯϙʔωϯ τΛଟ༻͢Δ w ͜ͷϖʔδ͚ͩʂͱ͍ͬͨ΋ͷ ͸͋·Γͳ͘ɺڞ௨෦඼͔Β୳ ͩͯͦ͠͠ΕΛར༻͢ΔΠϝʔδ w ૄ݁߹͔ͭ࠶ར༻ੑͷߴ͍ίʔ υ͕ٻΊΒΕΔ w मਖ਼ɾվળͷػձ͕ଟ͘ɺมߋ ʹڧ͍ίʔυ͕ٻΊΒΕΔ

Slide 13

Slide 13 text

8FCαΠτ w τοϓϖʔδ͚ͩʂ͜ͷԼ૚͚ͩʂ ͱ͍ͬͨཁૉ͕ଟ͘ଘࡏ͢Δ w άϦουγεςϜΈ͍ͨͳେ· ͔ͳ୯Ґͦ͋͜ΕͲɺͦ͜·Ͱ ଟ༻͠ͳ͍ w ࠶ར༻ίϯϙʔωϯτ͸ີ݁߹ ͳϞϊ͕͓͓͍ w ίʔσΟϯάͷظؒ͸୹͘ɺอ कͷྔ͸ଟ͘͸ͳ͍͜ͱ͕ଟ͍

Slide 14

Slide 14 text

Α͋͘Δ$44ઃܭύλʔϯͷ ಛ௃ w ಛఆͷنଇ ಛʹ໋໊΍෼ׂج४ ͷجʹଇͬͯॻ͘ w جຊతʹૄ݁߹Λલఏͱ͠ɺখ͍͞ن໛ͷίϯϙʔ ωϯτ܈Λ૊Έ߹Θ͍ͤͯ͘ w มߋʹڧ͘ɺอकੑʹ༏ΕΔ w ಋೖʹ͋ͨͬͯͷίετ౳͸໌֬ʹଘࡏ͢Δ w ௕͍εύϯͰͷ։ൃʹڧ͍

Slide 15

Slide 15 text

ͭ·Γ 8FCΞϓϦέʔγϣϯ޲͚

Slide 16

Slide 16 text

8FCΞϓϦέʔγϣϯͱ͍͏ੈքͰ͸ɺ ؒҧ͍ͳ͘େ͖ͳԸܙΛड͚Δ͜ͱ͕ Ͱ͖Δɻ

Slide 17

Slide 17 text

Ͱ͸8FCαΠτͰͷ ࠷దղ͸ʁ

Slide 18

Slide 18 text

8FCαΠτ੍࡞Ͱ ٻΊΒΕΔͰ͋Ζ͏ཁ݅ w ૣ͘࢓্͕ΔίʔσΟϯάٕ๏ w $44ઃܭͰͷݻ͗͢Δ෦෼ ݎ࿚Ͱ͋Δ͕Ώ͑ʹಈ ͖ͮΒ͘ͳΔ෦෼ ͷંΓ߹͍ͷ෇͚ํ w ؀ڥʹ΋ΑΔ͕ 8FCαʔϏε΄Ͳ௕͍εύϯͰ͸ ͳ͍ͷͰɺਓһͷ஌ࣝΛ໰Θͣ͋Δఔ౓ӡ༻Մೳͳ ࢓੍༷ఆ

Slide 19

Slide 19 text

ૣ͘࢓্͕ΔίʔσΟϯάٕ๏ͱ ઃܭͱͷંΓ߹͍ͷ෇͚ํ w Կ΋ߟ͑ͣʹॻ͘ͱޙͰΈΜͳ͕ٽ͖ΛݟΔ͜ͱʹ ͳΔͷ͕$44 w ͚ΕͲɺઃܭΛॏࢹ͢Δͱɺ௕ظతͳ଎౓͸্͕Δ ΋ͷͷɺβʔοͱॻ͍ͯ͠·͏Α͏ͳ࣌Ͱ͸͔͑ͬ ͯ஗͘ͳͬͯ͠·͏ w ௨ৗͷ8FCαΠτ੍࡞Ͱ͸ɺҎԼʹ༨ܭͳࢥߟΛ ݮΒͯ͠εϜʔζʹίʔσΟϯάΛߦ͏͔͕ॏཁ

Slide 20

Slide 20 text

ύλʔϯ͔͠ແ͍͚ΕͲɺ Կ౓͔ग़൪͸͋ΔΰʔετϘλϯͷ ACVUUPOEFGBVMUAͷଘࡏҙٛͱ͸ʁ CVUUPOCVUUPOEFGBVMU

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

/P4JMWFS#VMMFU

Slide 28

Slide 28 text

/P4JMWFS#VMMFU JO$44XPSME 5IFTBNF

Slide 29

Slide 29 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠