[Tama.rb年忘れLT会]レールに乗ったCSSコーディング

Slide 1

Slide 1 text

Ϩʔϧʹ৐ͬͨ$44ίʔσΟϯά !LFOZQB 3BJMTʷ5BJMXJOE$44Ͱ !5BNBSC೥๨Ε-5ձ

Slide 2

Slide 2 text

Έͳ͞Μɺࠓ೥΋Ұ೥͓ؒർΕ༷Ͱͨ͠ʂ

Slide 3

Slide 3 text

ͲΜͳҰ೥ؒΛա͝͞Ε·͔ͨ͠ʁ

Slide 4

Slide 4 text

΅͘͸͜Μͳײ͡Ͱͨ͠

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

ˢ͜ͷลͰ$44ʹ͑Β͍ۤ࿑ͨ͠ͷͰ ࠓ೔͸$44ʹ͍͓ͭͯ࿩͍ͨ͠ͱࢥ͍·͢

Slide 7

Slide 7 text

໨࣍ ͖͔͚ͬ 5BJMXJOE$44ͱ͸ 5BJMXJOEʷ3BJMTͰ 4DBGGPMEΞϓϦΛ࡞ͬͨྫ ࠓ೔͓࿩͢͠Δ͜ͱ

Slide 8

Slide 8 text

໨࣍ 5BJMXJOE$44Λݱ৔Ͱ࢖͓ͬͨ࿩ ʢ͍͔ͭ͸࢖͍͍ͨʣ ֓ཁҎ্ͷ5BJMXJOE$44ͷ͓࿩͠ ܥͷࠩ෼ͱ͔ɺ1VSHF$44ͱ͔ ࠓ೔͓࿩͠͠ͳ͍͜ͱ

Slide 9

Slide 9 text

ͱ͍͏Θ͚Ͱ΍͍͖ͬͯ·͠ΐ͏ʂ

Slide 10

Slide 10 text

͖͔͚ͬ w SBJMTOFX͔Β։࢝ɻϑϩϯτͷॳظઃఆɾ࣮૷΋αʔόʔαΠυ͕࣮ࢪ w σβΠφʔͷํ͸$44͸ॻ͔ͣɺσβΠϯΧϯϓͷ࡞੒ͷΈ w $44ʹ஌ݟͷ͋Δϝϯόʔɺ΄΅օແ w ͍ΘΏΔʮ#PPUTUSBQषʯΛආ͚ΔͨΊɺ$44ϑϨʔϜϫʔΫ͸ར༻ͤͣ w Α͘࢖͏σβΠϯύʔπ͸ελΠϧΨΠυΛ࡞੒ͯ͠؅ཧ w ϨεϙϯγϒରԠ ͖͔͚ͬɿ$44͍ͬͺ͍͕Μ͹ͬͨϓϩδΣΫτ֓ཁ

Slide 11

Slide 11 text

͖͔͚ͬ $44ͷॻ͖ํͳΜ΋Θ͔ΒΜʜ #&.ͬͯͳΜ͡Όʜ ϝσΟΞΫΤϦʜ$44ઃܭʜʁ ͦ͏͍͏ͷ΋͋Δͷ͔ʜ ʙҊ݅ॳظʙ

Slide 12

Slide 12 text

͖͔͚ͬ 3BJMTͷίʔυҰߦ΋ॻ͍ͯͶ͑ʜ ͳΜͳΒελΠϧΨΠυ΋׬੒ͯ͠Ͷ͑ʜ ΋ͬͱ͏·͘΍Εͳ͍΋ͷ͔ʜ ʙҊ݅ʹೖͬͯϲ݄ޙʙ

Slide 13

Slide 13 text

ʙ·͋ͦΜͳ͜ΜͳͰ৭ʑ׬੒ʙ

Slide 14

Slide 14 text

͖͔͚ͬ ૝ఆΑΓσβΠϯ·ΘΓʹ޻਺͕ ͔͔ͬͯ͠·ͬͨʜ ख௚͠΋Կ౓΋ൃੜͨ͠͠ʜ ΋ͬͱɺ͍͍ײ͡ʹ͔͚Δํ๏͸ ͳ͍΋ͷ͔ʜ ʙҊ݅ऴྃޙʙ

Slide 15

Slide 15 text

͖͔͚ͬ ͓ʜ͜Ε͸ʜ ʙҊ݅ऴྃޙʙ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ͸ 5BJMXJOE$44͝ଘ஌ͷํɺ৮ͬͨ͜ͱͷ͋Δํ ͲΕ͙Β͍͍Βͬ͠Ό͍·͔͢ʁ

Slide 18

Slide 18 text

5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ͸ w ϢʔςΟϦςΟϑΝʔετͷ$44ϑϨʔϜϫʔΫ w #PPUTUSBQͷΑ͏ͳίϯϙʔωϯτܥͷΫϥε͸༻ҙ͞Ε͓ͯΒͣɺͦΕͧΕͷ$44ϓϩύςΟͱ ஋ʹରԠͨ͠ɺϢʔςΟϦςΟΫϥε͕ఏڙ͞Ε͍ͯΔ 5BJMXJOE$44ͱ͸

Slide 19

Slide 19 text

5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ͸

Slide 20

Slide 20 text

#PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ͸ #PPUTUSBQͩͱ

Slide 21

Slide 21 text

#PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ͸ 5BJMXJOE$44ͩͱ

Slide 22

Slide 22 text

#PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ͸ 5BJMXJOE$44ͩͱ

Slide 23

Slide 23 text

ͪͳΈʹͦͷଞ༗໊ͳ$44ϑϨʔϜϫʔΫͱ ͷൺֱ #PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ͸ ଞͷओཁ$44ϑϨʔϜϫʔΫͱͷൺֱ

Slide 24

Slide 24 text

#PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ͸ w #PPUTUSBQ w ط੡඼ʢίϯϙʔωϯτʣ͕ఏڙ͞Ε͍ͯΔ w ϢʔςΟϦςΟ΋ఏڙ͞Ε͍ͯΔ͕ɺ਺͸5BJMXJOE$44΄Ͳଟ͘ͳ͍ w ηϚϯςΟοΫͳDMBTTΛϕʔεʹࢦఆ͢Δ w 5BJMXJOE$44 w ίϯϙʔωϯτ͸ఏڙ͞Ε͍ͯͳ͍ w ϢʔςΟϦςΟͷΈ͕ఏڙ͞Ε͓ͯΓɺ΄΅શͯͷ$44ͷϓϩύςΟΛ໢ཏ w ΠϯϥΠϯελΠϧͷΑ͏ͳܗࣜͰDMBTTʢϢʔςΟϦςΟʣΛ෇༩͢Δ

Slide 25

Slide 25 text

#PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ͸ w ֦ுੑ͕ߴ͍ w ࣗલͰελΠϧΛߏங͍ͯͨ͘͠Ίɺ͍ΘΏΔʮ#PPUTUSBQषʯͷ͠ͳ͍ύʔπ͕ ࡞੒Ͱ͖Δ w ෆཁͳελΠϧ͕෇༩͞Εͳ͍ͨΊɺελΠϧͷ্ॻ͖Λ͢Δඞཁ͕ͳ͘ͳΔ w Α͘࢖͏ελΠϧ͸ίϯϙʔωϯτͱͯ͠੾Γग़͢ࣄ͕Ͱ͖ɺ࠶ར༻Ͱ͖Δ w ʢͪ͜Βͷػೳ͸͋ͱͰ࣮ྫ͓ݟͤ͠·͢ʣ ϢʔςΟϦςΟϑΝʔετͰ͋Δར఺

Slide 26

Slide 26 text

ΠϯϥΠϯͱͷൺֱ 5BJMXJOE$44ͱ͸ ͋Εɺ͡Ό͋ΠϯϥΠϯελΠϧͱԿ͕ҧ͏ͷʁ ͪͳΈʹʮΠϯϥΠϯελΠϧʯͬΆ͍ͱݴ͍·͕ͨ͠ʜ

Slide 27

Slide 27 text

ΠϯϥΠϯͱͷൺֱ 5BJMXJOE$44ͱ͸ w IPWFSɺGPDVTͳͲͷΠϕϯτΛઃఆՄೳ w ϝσΟΞΫΤϦΛઃఆՄೳ w TNQYNEQYMHQYYMQY w ϕϯμʔϓϨϑΟΫεͷࢦఆ͕ෆཁ ΠϯϥΠϯελΠϧͱͷൺֱ

Slide 28

Slide 28 text

ΠϯϥΠϯͱͷൺֱ 5BJMXJOE$44ͱ͸ w XJEUI QBEEJOH DPMPSͳͲʹ͍ͭͯ΋ 5BJMXJOEଆͰఏڙ͞Ε͍ͯΔϢʔςΟ ϦςΟΛར༻͠ɺ෇༩͢Δํࣜ ΠϯϥΠϯελΠϧͱͷൺֱ

Slide 29

Slide 29 text

5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ͸ w 5BJMXJOE$44ͱ͸ϢʔςΟϦςΟϑΝʔετͷ$44ϑϨʔϜϫʔΫ w ϢʔςΟϦςΟͷΈΛఏڙ͠ɺ w Ϩγϙϯγϒʹهड़Ͱ͖ w ΠϯϥΠϯελΠϧͰίʔσΟϯά͕Մೳͳ֦ுੑͷߴ͍ϑϨʔϜϫʔΫ ·ͱΊΔͱ

Slide 30

Slide 30 text

5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ͸ ʜͰɺ͜Ε͕Ͳ͏ศརͳͷʁ ·ͱΊΔͱ

Slide 31

Slide 31 text

5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ͸ ࣮ࡍͷίʔυΛݟͯΈ·͠ΐ͏ ࠓճͷλΠτϧ͸

Slide 32

Slide 32 text

Ϩʔϧʹ৐ͬͨ$44ίʔσΟϯά 3BJMTʷ5BJMXJOE$44Ͱ

Slide 33

Slide 33 text

ίʔυ࣮ྫ 5BJMXJOEʷ3BJMT ը໘ڞ༗Λͯ͠ίʔυΛ֬ೝ͍͖ͯ͠·͢ IUUQTHJUIVCDPNLFOZQBSBJMT@PO@UBJMXJOE@DTT

Slide 34

Slide 34 text

ײ૝ 5BJMXJOEʷ3BJMT w $44ϑΝΠϧΛ࡞ΒͣϏϡʔϑΝΠϧͷΈʹूதͰ͖ΔͨΊૣ࣮͘૷Ͱ͖Δ w طଘελΠϧͷ্ॻ͖΍໊લۭؒͷিಥΛߟ͑ͳͯ͘΋ྑ͍ w $44Λ஌͍ͬͯΕ͹Πϯϓοτ͸ʢଞͷ'8ͱൺ΂ʣ࠷খݶͰࡁΉ w ެࣜ)1ͷݕࡧϖʔδ͕༏ल ίʔσΟϯάͨ͠ࡍͷײ૝

Slide 35

Slide 35 text

ײ૝ 5BJMXJOEʷ3BJMT ैདྷ͸ $44ઃܭ ࣮૷ ࠷ॳʹઃܭ͢Δඞཁ͕͋Γɺ࣮૷͸ͦͷޙ

Slide 36

Slide 36 text

ײ૝ 5BJMXJOEʷ3BJMT 5BJMXJOE$44ͩͱ $44ઃܭ ࣮૷ $44ઃܭɾ໋໊ͷϑΣʔζΛޙʹ࣋ͬͯ͘Δ͜ͱ͕Ͱ͖Δ

Slide 37

Slide 37 text

ײ૝ 5BJMXJOEʷ3BJMT w ηϚϯςΟοΫͰ͸ͳ͍ w )5.-ͱ$44͕ີ݁߹ɻDMBTTΛݟͨͱ͖ʹʮͦΕ͕Կͳͷ͔ʯͷ൑ผࠔ೉ w ϐΫηϧύʔϑΣΫτʹ͸ͳΒͳ͍ w 5BJMXJOE͕ఏڙ͍ͯ͠ΔϢʔςΟϦςΟͷ੍໿Λड͚Δ w ͦ΋ͦ΋$44͕ॻ͚ͳ͍ͱ࣮૷Ͱ͖ͳ͍ w ίϯϙʔωϯτϕʔεͷ'8ͱҟͳΓɺ$44ͷ஌ࣝ͸.645Ͱඞཁ σϝϦοτ

Slide 38

Slide 38 text

ײ૝ 5BJMXJOEʷ3BJMT w ಠࣗͷίϯϙʔωϯτ΍ελΠϧ͕ඞཁ w '8Λ֦ு͢ΔΑ͏ͳελΠϧͰ͸ؒʹ߹Θͳ͍έʔε w $44ઃܭʹ஌ݟɾܦݧͷͳ͍։ൃϝϯόʔ͕ຆͲ w ॳ଎Λग़͍ͨ͠ɺ$44ઃܭ͸ޙճ͠ʹ͍ͨ͠ ͏·͘ϋϚΓͦ͏ͳॴɿྫ͑͹ԼهͷΑ͏ͳϓϩδΣΫτ

Slide 39

Slide 39 text

ײ૝ 5BJMXJOEʷ3BJMT w ؅ཧը໘΍ࣾ಺޲͚πʔϧͳͲ#PPUTUSBQषͷ͢ΔσβΠϯͰ΋໰୊ͳ͍ ৔߹͸ίϯϙʔωϯτϑΝʔετͷ'8 w ͦΕҎ֎ͷ৔߹͸5BJMXJOE$44Λੵۃతʹ࢖͍͖͍ͬͯͨؾ࣋ͪ ݸਓతʹ͸

Slide 40

Slide 40 text

͓ΘΓʹ 5BJMXJOEʷ3BJMT Ϩʔϧʹ৐ͬͨ։ൃΛ͢Δ͜ͱͰ ྑ͍ϓϥΫςΟεʹԊͬͨ։ൃ͕ग़དྷɺ ૉૣ͘Ձ஋Λಧ͚Δ͜ͱ͕Ͱ͖Δ'8 ͱ͜ΖͰ 3BJMT͸$P$ $POWFOUJPO0WFS$POGJHVSBUJPO Λॏࢹͨ͠ϑϨʔϜϫʔΫ IUUQTEIIELSBJMTJTPNBLBTFIUNM

Slide 41

Slide 41 text

͓ΘΓʹ 5BJMXJOEʷ3BJMT 5BJMXJOE΋·ͨɺن໿ʹPNBLBTF͢Δ͜ͱͰ Ϩʔϧʹ৐ͬͨ։ൃ͕ग़དྷΔ఺Ͱ͸Ұॹ IUUQTEIIELSBJMTJTPNBLBTFIUNM

Slide 42

Slide 42 text

͓ΘΓʹ 5BJMXJOEʷ3BJMT ʮਓྨʹ$44͸ૣ͗ͨ͢ʯͱΑ͘ݴΘΕ·͕͢ ਓྨ͕$44ʹ௥͍ͭͨ͘Ίͷ5BJMXJOE ௥͍෩ Λ ఏڙͯ͘͠ΕΔͷͰ͸ͱʜظ଴͍ͯ͠·͢

Slide 43

Slide 43 text

͓ΘΓʹ 5BJMXJOEʷ3BJMT IUUQTUBJMXJOEDTTKBFOUBQBQQ ܥ΁ͷϝδϟʔόʔδϣϯΞοϓ΍ ެࣜαΠτͷ೔ຊޠԽ΋ߦΘΕ͓ͯΓ ࠓͱͯ΋)PUͳϑϨʔϜϫʔΫͰ͢ ؾʹͳΔํ͸ͥͻ͓ࢼ͍ͩ͘͠͞ʂ

Slide 44

Slide 44 text

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