Tweet
Tweet

Slide 1

Slide 1 text

How to Deal with Technical Debt of CSS CSSͷٕज़తෛ࠴ͱͷ޲͖߹͍ํ Takuya Matsumoto @upinetree Rails Developer Meetup 2019 Day 1 2019.03.22

Slide 2

Slide 2 text

Takuya Matsumoto @upinetree גࣜձࣾ ສ༿ ϓϩάϥϚ ੜ·Ε: ৽ׁݝ௕Ԭࢢ ޷͖: ೔ຊञ, Ϊλʔ, ήʔϜ

Slide 3

Slide 3 text

#ݱ৔Rails ͕Μ͹Γ·ͨ͠

Slide 4

Slide 4 text

ຊ೔ͷςʔϚ CSSͷٕज़తෛ࠴

Slide 5

Slide 5 text

CSSͷෛ࠴Λվળͨ͠ͱ͖ͷܦݧΛݩʹ ϓϩάϥϚͷࢹ఺͔Βߟ࡯ͯ͠ΈΔ

Slide 6

Slide 6 text

CSSͷٕज़తෛ࠴͸Ͳ͏ͯ͠ੜ͡Δͷ͔

Slide 7

Slide 7 text

͜Μͳܦݧ͸͋Γ·ͤΜ͔ • CSSΛมߋͨ͠Βظ଴ͱҧ͏ͱ͜ΖʹӨڹͨ͠ • HTMLͷߏ଄Λগ͠ม͑ͨΒελΠϧ่͕յͨ͠ • CSS͕Ͳ͜ʹͲ͏࡞༻͍ͯ͠Δ͔͕෼͔ΒͣखΛՃ͑ͨ͘ͳ͍ • ͳ͔ͥࢦఆͨ͠ελΠϧ͕͋ͨΒͳ͍ • ࢖ΘΕ͍ͯͳ͍CSS͕͋Δ͕ফ͢ͷ͕ාͯ͘์ஔ͞Ε͍ͯΔ

Slide 8

Slide 8 text

։ൃͷϘτϧωοΫʹͳͬͯ͠·ͬͨCSS • ෺ཧతɺ৺ཧతʹͲΜͲΜखΛग़ͮ͠Β͘ͳͬͯ͠·͏ • ݁Ռͱͯͪ͠ΐͬͱͨ͠ελΠϧमਖ਼ʹଟେͳ͕͔͔࣌ؒΔ • Ұ෦ͷৄ͍͠ϝϯόʔʹෛՙ͕ूதͯ͠͠·͍SPOFͱͳΔ

Slide 9

Slide 9 text

ٕज़తෛ࠴ͷӨڹͱ͍͏؍఺Ͱ͸ (Ruby) ϓϩάϥϛϯάͰ΋ ݟ֮͑ͷ͋Δߏਤ

Slide 10

Slide 10 text

Ͱ΋ɺ CSSͷٕज़తෛ࠴͸ϓϩάϥϛϯά΄Ͳ νʔϜͰٞ࿦͞Εͳ͍ҹ৅͕͋Δ

Slide 11

Slide 11 text

Ͳ͏ͯͩ͠Ζ͏

Slide 12

Slide 12 text

CSSͳΒͰ͸ͷഎܠΛߟ͑Δ

Slide 13

Slide 13 text

CSSͷ࢓༷͸γϯϓϧ • ৄࡉ౓ͳͲͷ͍͔ͭ͘ͷϧʔϧ͕͋Δ͚ͩͰɺॻ͍ͨͱ͓Γʹε λΠϧ͕ద༻͞ΕΔ • ࠷ॳظ͸໌֬ͰΘ͔Γ΍͍͢ • ͲΜͳ࡞ΓΛ͍ͯͯ͠΋ද໘తʹ͸ͳΜͱ͔ͳͬͯ͠·͏ • ແҙࣝʹฦࡁͷݟࠐΈͷͳ͍ɺརࢠͷߴ͍आΓೖΕΛͯ͠͠·͍ ͕ͪ

Slide 14

Slide 14 text

࠷ॳ͸γϯϓϧͳͷ͸ͲͷݴޠͰ΋ಉ͡ • ໰୊͸ • CSSͷߏ଄Խ͸ϋʔυϧ͕ߴ͍ • ෛ࠴Λ࡞ͬͯ͠·͍ͬͯΔࣄ࣮ͷೝࣝͮ͠Β͞ • νʔϜͰҙࣝతʹCSSͷϝϯςφϯε΁ͷؔ৺ΛߴΊ͍͔ͯͳ ͍ͱɺؾ͍ͮͨͱ͖ʹ͸େ͖ͳෛ࠴Λ๊͍͑ͯΔ͜ͱʹͳΔ

Slide 15

Slide 15 text

νʔϜ։ൃͰؔ৺Λ࣋ͭ΂͖ࣄฑ͸ͨ͘͞Μ DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ※ԁͷେ͖͞ʹҙຯ͸͋Γ·ͤΜ

Slide 16

Slide 16 text

DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ͋ΔνʔϜͷϝϯόʔͷؔ৺

Slide 17

Slide 17 text

DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ͋ΔνʔϜͷϝϯόʔͷؔ৺

Slide 18

Slide 18 text

DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ͋ΔνʔϜͷϝϯόʔͷؔ৺

Slide 19

Slide 19 text

DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ϝϯόʔD ͋ΔνʔϜͷϝϯόʔͷؔ৺

Slide 20

Slide 20 text

DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ϝϯόʔD ͋ΔνʔϜͷϝϯόʔͷؔ৺ ͜ͷνʔϜͷϓϩάϥϚ͸… ػೳΛ͍ͪૣ͘Ϣʔβʹಧ͚͍ͨ CSS͸ۤखҙ͕ࣝ͋ΓखΛग़ͮ͠Β͍ σβΠφ͕ͳΜͱ͔ͯ͘͠ΕΔͱߟ͑ ͍ͯΔ

Slide 21

Slide 21 text

DB OS Rails Ruby ϏδωεϩδοΫ ωοτϫʔΫ JavaScript CSS σόΠε ϚʔΫΞοϓ ΠϯλϥΫγϣϯ UI UX σβΠϯ Πϥετ ίϯηϓτ ϝϯόʔA ϝϯόʔB ϝϯόʔC ϝϯόʔD ͋ΔνʔϜͷϝϯόʔͷؔ৺ ͜ͷνʔϜͷσβΠφʹͱͬͯ… CSS͸දݱखஈͷ1ͭͰ͔͠ͳ͍ ੵۃతʹઃܭ͠Α͏ͱ͍͏ ಈػ͚͕ͮ೉͍͠

Slide 22

Slide 22 text

CSS ؔ৺ͷٴ͹ͳ͍୩

Slide 23

Slide 23 text

ʮؔ৺ͷ୩ʯͱ໊෇͚ͯΈΔ • ؔ৺ͷ֎ͷ͜ͱʹ͸ؾ͖ͮͮΒ͍ͨΊɺ୩͕࡞ΒΕ΍͍͢ • ؾ͍ͮͨͱͯ͠΋ɺৄ͘͠ͳ͍͠ɺଞͷৄ͍͠ϝϯόʔ͕͏· ͘΍ͬͯ͘ΕΔͱࢥͬͯ͠·͏ • ๣؍ऀޮՌͬΆ͍ूஂ৺ཧ΋͋Γͦ͏ https://flic.kr/p/f7yxnc

Slide 24

Slide 24 text

ʮؔ৺ͷ୩ʯΛͲ͏৐Γӽ͑Δ͔

Slide 25

Slide 25 text

୩ʹڮΛ͔͚ΒΕͨΒ • ৄ͍͠஌͕ࣝͳͯ͘΋ɺແҙࣝʹٕज़తෛ࠴Λ࡞Γࠐ·ͳ͍Α ͏ͳߏ଄ʢʹڮʣΛ࡞Δ • ͨͩ͠ɺ΍ΕΔ͜ͱ͸ݶఆతʢ͋͘·ͰڮͳͷͰʣ

Slide 26

Slide 26 text

ࠓճ঺հ͢Δڮ • CSSઃܭํ๏࿦ • ੍໿ • ͪΐ͍଍͠Ϋϥε

Slide 27

Slide 27 text

CSSઃܭํ๏࿦ͷಋೖ

Slide 28

Slide 28 text

CSSઃܭํ๏࿦ͱ͸ • ઌਓ͕ͨͪߟ͑ͨϕετϓϥΫςΟεू • OOCSS, BEM, SUIT CSS, SMACSS, MCSS, RSCSS, ECSS, ITCSS, FLOCSS, FLOU, ... • υΩϡϝϯτ΍఩ֶΛΞ΢τιʔεͰ͖Δ • ଟ͘ͷಋೖࣄྫ͕͋Γɺ৘ใ͕खʹೖΕ΍͍͢

Slide 29

Slide 29 text

CSSઃܭํ๏࿦ͷσϝϦοτ • ϓϩμΫτʹϚον͠ͳ͍͜ͱ͕͋Δ • ϧʔϧ͕ෳࡶͩͱཧղ͕͍ͨ͠ɺผղऍ͕ੜ·ΕΔ͜ͱ͕͋Δ • ϧʔϧΛ͍֮͑ͯͳ͍ɺਁಁ͠ͳ͍ • ํ๏࿦ʹै͏͜ͱࣗମ͕໨తʹͳͬͯ͠·͍͕ͪ

Slide 30

Slide 30 text

CSSઃܭํ๏࿦Λಋೖ͢΂͖͔ • ํ๏࿦ͷߟ͑ํ΍ղܾ͠Α͏ͱ͍ͯ͠Δ໰୊ΛɺνʔϜͰೲಘ ্ͨ͠ͰಋೖͰ͖ΔͳΒ࠷ྑ • ΧελϚΠζ͢ΔɺΤοηϯε͚ͩಋೖ͢Δɺͱ͍͏બ୒ࢶ΋ ͋Δ • →͜Ε͔Β঺հ͢Δʮ੍໿ʯͱʮͪΐ͍଍͠ʯ͸ࢲͷܦݧ্ ͷ͓͢͢ΊΤοηϯε

Slide 31

Slide 31 text

੍໿ͷಋೖ

Slide 32

Slide 32 text

CSSʹ੍໿Λಋೖ͢Δཧ༝ • CSSͷ࢓༷͸γϯϓϧͳ͚ͩʹɺॻ͖ํʹΑͬͯ͸Ͳ͜·Ͱ΋ ෳࡶʹͳΓಘΔɻͦͷ੍ޚ͸ॻ͖खʹҕͶΒΕΔ • ੍໿Λಋೖ͢Δ͜ͱͰɺࣦഊͮ͠Β͍ߏ଄Λ࡞Δ • ͜͜Ͱ͸ޮՌతͳ3ͭͷ੍໿Λ঺հ

Slide 33

Slide 33 text

੍໿1: Ϋϥεͷ໋໊نଇ • CSS͸ηϨΫλͰࢦఆͨ͠ͱ͓Γʹద༻͞ΕΔͷͰɺΫϥεͷ໋໊͕ ඇৗʹॏཁ • ·ͨɺείʔϓͱ͍͏ߟ͑ํ͕ଘࡏ͠ͳ͍ͷͰɺڝ߹͕ൃੜ͠΍͍͢ • ҰҙͰɺ಺༰ͷཧղ͠΍͍͢΋ͷ͕๬·͍͠ • ͜ΕΒʹண໨ͨ͠ํ๏࿦ʹ͸ BEM ΍ SUIT CSS, ECSS ͳͲ͕͋Δ

Slide 34

Slide 34 text

BEM https://en.bem.info/ • ίϯϙʔωϯτʢಠཱͨ͠෦඼୯ҐʣΛجຊͱͨ͠ઃܭࢦ਑ɻ ΫϥεΛ Block, Element, Modifier ͔Β૊ΈཱͯΑ͏ͱ͍͏΋ͷ • BEMࣗମ͸໋໊نଇΛڧ੍͠ͳ͍͕ɺMindBEMdingͳͲͷ໋໊ نଇ͕ྑ͘ར༻͞ΕΔ .search-form__button--disabled Block Element Modifier

Slide 35

Slide 35 text

BEMΛར༻ͨ͠Ϋϥεͷ໋໊ • BEMΛར༻͢Ε͹είʔϓΛΤϛϡϨʔτ͢Δ͜ͱ͕Ͱ͖Δ • ୭͕ઃܭͯ͠΋ҰҙͰΘ͔Γ΍͘͢ɺিಥͷগͳ͍Ϋϥε໊ʹ ͳΔʢ͸ͣʣ • Ϋϥε໊͕৑௕ʹͳΔɺ __ , -- ͳͲͷ׳Εͳ͍ه߸͕͋Δɺͱ ͍͏఺͸੍໿ͷτϨʔυΦϑͱͯ͠ड͚ೖΕΔඞཁ͕͋Δ

Slide 36

Slide 36 text

੍໿2: ৄࡉ౓ΛͳΔ΂͘ಉ͡ʹอͭ • ৄࡉ౓ʹແ༻ͳେখ͕͋Δͱɺҙਤͤ͵ڝ߹͕ൃੜ͠΍͍͢ • ͳ͔ͥࢦఆͨ͠ελΠϧ͕൓ө͞Εͳ͍ • → !important ͷొ৔ • ৄࡉ౓ͷେখ͸ҙਤతʹઃܭ͢΂͖…͕ͩɺʮؔ৺ͷ୩ʯ͕͋ ΔதͰͦΕ͸ϋʔυϧ͕ߴ͍

Slide 37

Slide 37 text

ৄࡉ౓ͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933; } } ※Sassه๏Ͱ͢ɻҎ߱ͷίʔυ͸͢΂ͯಉ༷Ͱ͢

Slide 38

Slide 38 text

ৄࡉ౓ͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933; } }
ϝχϡʔͰ΋ ࢖͑Δͳ

Slide 39

Slide 39 text

ৄࡉ౓ͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933; } } #menu { .links { font-size: 1rem; color: #333; } }
ϝχϡʔ͸ ͪΐͬͱݟͨ໨ม͑Α͏ ʢৄࡉ౓ߴʣ

Slide 40

Slide 40 text

ৄࡉ౓ͷ্ॻ͖߹ઓ .links { font-size: 1.2rem; .pickup { color: #933 !important; } } #menu { .links { font-size: 1rem; color: #333; } }
ͳΜ͔ ελΠϧ͋ͨΒͳ͍ ͠ !important ͠ͱ͜

Slide 41

Slide 41 text

ৄࡉ౓ͷҙਤͤ͵มಈΛ๷੍͙໿ • ࢠଙηϨΫλΛ࢖༻͠ͳ͍ʢ্ঢΛ๷͙ʣ • IDηϨΫλΛ࢖༻͠ͳ͍ʢ্ঢΛ๷͙ʣ • ཁૉηϨΫλΛ࢖༻͠ͳ͍ʢ௿ԼΛ๷͙ʣ • ΋ͪΖΜCSSͷදݱ͸ͦͷ෼੍ݶ͞ΕΔ

Slide 42

Slide 42 text

ࢠଙηϨΫλΛ࢖Θͳ͍ ڧ੍͍ݶͳͷͰɺྫ֎ͱͯ͠ڐ༰͢ΔέʔεΛఆٛ͢Δ͜ͱ΋͋Δ /* Bad */ #menu { .links { font-size: 1rem; color: #333; .sub-links { font-size: 0.8rem; } } } /* Good */ .menu-links { color: #333; } .menu-links-main { font-size: 1rem; } .menu-links-sub { font-size: 0.8rem; }

Slide 43

Slide 43 text

੍໿3: ϨΠΞ΢τͱݟͨ໨Λ෼཭͢Δ • ϨΠΞ΢τͱݟͨ໨͕ಉ͡Ϋϥεʹఆٛ͞Ε͍ͯΔͱɺ࠶ར༻ ͷϋʔυϧ্্͕͕ͬͯॻ͖΍ॏෳఆٛ͞Ε͕ͪ • ϨΠΞ΢τΛผͷΫϥεʹ੾Γग़͓ͯ͘͠ͱɺ࠶ར༻͠΍͍͢ • ίϯϙʔωϯτͷॊೈͳϨΠΞ΢τ͕ՄೳʹͳΔ

Slide 44

Slide 44 text

ϨΠΞ΢τͱݟͨ໨ͷ෼཭ͷྫ ࢠηϨΫλ͸ৄࡉ౓Λ্͛Δ͕ɺൣғΛݶఆత͢ΔͨΊʹ׆༻Ͱ ͖Δʢࢀߟྫ: RSCSSʣ /* ϨΠΞ΢τ (prefix: -l) */ .l-comments { > .comment { margin-top: 8px; } > .comment + .comment { margin-left: 4px; } } /* ݟͨ໨ */ .comment { display: block; border: 1px solid #aaa; }

Slide 45

Slide 45 text

ϨΠΞ΢τͱݟͨ໨Λ෼཭͢ΔσϝϦοτ • ίϯϙʔωϯτͷڽू౓ͷ໘ͰτϨʔυΦϑ͕͋Δ • ࡉ͔͘෼཭͗͢͠Δͱཁૉ͔Βಉ࣌ʹґଘ͢ΔΫϥε͕૿͑Δ ͠ɺ࢖͍ํ΋೉͘͠ͳΔ • ඞਢͱ͸ͤͣɺϨΠΞ΢τ૚Λઃ͚ͯ෼཭Λਪ঑͢Δͷ΋ख • ࢀߟྫ: SMACSS, MCSS, ITCSS, FLOCSS, FLOU

Slide 46

Slide 46 text

ͪΐ͍଍͠Ϋϥεͷಋೖ

Slide 47

Slide 47 text

ͪΐ͍଍͠Ϋϥε • Ұൠతʹ͸ Utility ͱݺ͹ΕΔ΋ͷͰɺ൚༻తͳϔϧύʔΫϥε • CSSϑϨʔϜϫʔΫͰ΋ఆ͍ٛͯ͠Δ͜ͱ͕͋Δ
 (Bootstrap 4, UIKit, Tailwind CSS, Foundation 6, ...)
Hello
World

Slide 48

Slide 48 text

ͪΐ͍଍͠ͷྑ͞ • จ຺΍ϨΠΞ΢τ͔Βݟͨ໨Λ෼཭͠΍͘͢ͳΔ • ཁૉͷίΞͳελΠϧʹूதͯ͠ߟ͑Δ͜ͱ͕Ͱ͖Δ • CSSͷ஌ࣝʹΑΒͣฏ౳ʹελΠϧΛ౰ͯΔ͜ͱ͕Ͱ͖Δ • ͪΐͬͱͨ͜͠ͱͰσβΠϯج४ʹԊ͍ͬͯΔ͔σβΠφʹ֬ ೝͯ͠΋Β͏ඞཁ͕ͳ͘ͳΔ

Slide 49

Slide 49 text

ԿΛͪΐ͍଍͢΂͖͔ σβΠϯج४ʹଈͨ͠Ϋϥε • Spacing (margin, padding) • Typography (font-size, line- height) • Color variations ݟͨ໨ͷ෼཭Λิॿ͢ΔΫϥε • Flexbox • Float • Display

Slide 50

Slide 50 text

ͪΐ͍଍͗͢͠͠ʹ͸ؾΛ͚ͭΔ • HTML͔ΒCSS΁ͷґଘ͕૿େɺີ݁߹ʹͳΓCSSͷมߋʹΑΔӨڹ ͕େ͖͘ͳΔ • ͪΐ͍Ͱ͸ͳ͍ͳΒͪΌΜͱΫϥεԽ͢Δ • ࠷େͪΐ͍଍͠਺ͷ໨҆ΛܾΊΔͳͲ͕༗ޮ • ۃ୺ͳྫʢδϣʔΫʣ: https://github.com/marmelab/universal.css

Slide 51

Slide 51 text

ͪΐ͍଍͠Ϋϥε͸γϯϓϧʹอͭ • ޿ൣғͰ࢖ΘΕΔΫϥεͳͷͰɺมԽͮ͠Β͍಺༰ʹ͢Δ • มԽͯ͠΋ͦͷӨڹ͕ҙਤతͰ͋Δ͜ͱΛอͭ • ࢠଙηϨΫλͳͲͱ૊Έ߹Θ্ͤͨॻ͖͸ආ͚Δɻ࡞༻͕༧ଌ ͮ͠Β͘ͳΔ

Slide 52

Slide 52 text

ڮͷݶք

Slide 53

Slide 53 text

ڮ͕ڊେʹͳͬͯ͘Δ • ϧʔϧ͸ෳࡶʹ • ͪΐ͍଍͠Ϋϥε͸ଟ༷Խ • ڮ͕ద੾ʹ࢖ΘΕ͍ͯΔ͔ͷνΣοΫͷෛ୲ • ҙਤͱҧ͏࢖ΘΕํΛͨ͠ͱ͖ͷࠞཚ • ڮࣗମͷϝϯςφϯείετ͕େ͖͘ͳͬͯ͘Δ

Slide 54

Slide 54 text

ؔ৺ͷ୩͸૬มΘΒͣଘࡏ͢Δ • ࠜຊతʹ͸ղܾ͍ͯ͠ͳ͍ • ڮ͸͔ͨ͠ʹޮՌతɻͨͩɺ΋ͱ΋ͱ͋ͬͨෛ࠴Λɺརࢠͷ௿ ͍ෛ࠴ʹ෇͚ସ͚͑ͨͩͱ΋͍͑Δ • ڮΛඞཁे෼ͳେ͖͞ʹอͭͨΊʹɺ୩ࣗମʹରॲ͍ͨ͠

Slide 55

Slide 55 text

୩ΛຒΊΔ • ϝϯόʔͷؔ৺Λ޿͛ɺνʔϜશһͰCSSΛอक͢ΔจԽΛࠜ ෇͔ͤΔ • ֶशίετΛड͚ೖΕɺଐਓԽͤͣʹઃܭ΍ϨϏϡʔ͕Ͱ͖Δ Α͏ʹͳΔ • Ұਓ͡Όͳͯ͘νʔϜͱͯ͠ͷ׆ಈ

Slide 56

Slide 56 text

ͦΕͧΕͷಛ௃ ղܾՄೳͳ໰୊ ࣮ߦɾܧଓͷ༰қ͞ ڮΛ͔͚Δ ݶఆత ؆୯
 Ͱ͖Δ͜ͱ͔Β͸͡ΊΒΕΔ ୩ΛຒΊΔ ࠜຊత ೉͍͠ ͙͢ʹ݁Ռ͸ग़ͳ͍

Slide 57

Slide 57 text

ͦΕͧΕͷಛ௃ • ୩ΛຒΊΔํ๏͸ཧ૝త͕ͩɺ୩͕େ͖͍νʔϜ΄Ͳ࣮ߦ͕೉ ͍͠ • ·ͣ͸ڮΛ͔͚ɺฒߦͯ͠ঃʑʹ୩ΛຒΊΔྲྀΕ͕ݱ࣮త ղܾՄೳͳ໰୊ ࣮ߦɾܧଓͷ༰қ͞ ڮΛ͔͚Δ ݶఆత ؆୯
 Ͱ͖Δ͜ͱ͔Β ୩ΛຒΊΔ ࠜຊత ೉͍͠ ͙͢ʹ݁Ռ͸ग़ͳ͍

Slide 58

Slide 58 text

Ͳͷॱ൪ͰऔΓ૊Ή͔

Slide 59

Slide 59 text

ͱ͋Δ։ൃνʔϜ • CSSͷٕज़తෛ࠴ʹΑͬͯ։ൃεϐʔυ͕௿Լ • CSSʹৄ͍͠ϝϯόʔ͕͍Δ͕ɺଐਓԽ͍ͯ͠Δঢ়ଶ

Slide 60

Slide 60 text

ϨϏϡʔ͓ئ͍͠·͢ʂ ͱ͋Δ։ൃνʔϜ • ଐਓԽʹΑΓෛՙ͕ूத͠ɺϘτϧωοΫʹ ͜͜ௐ੔͍ͯͩ͘͠͞ʂ ίʔσΟϯάཔΈ·͢ʂ

Slide 61

Slide 61 text

ظݶ͕͋Δ͔Β Ұ୴ೖΕͯ͠·͓͏ ͱ͋Δ։ൃνʔϜ • ͦͷϝϯόʔ͕΍Γ͖ΕͣʹऔΓ͜΅͢Α͏ʹͳΔͱɺ͞Βʹ ෛ࠴͕ੵ·Ε͍ͯ͘ෛͷϧʔϓ ࣗ෼Ͱ΍ͬͯΈΔ͔ ͪΐͬͱ·ͬͯ…

Slide 62

Slide 62 text

Ͳ͏औΓ૊Ί͹Α͍ͩΖ͏͔ • ϑϩϯτΤϯυΤϯδχΞΛޏ͏ʁ • Ұ࣌తʹෛ୲͸ܰݮ͞Εͦ͏ • ௕ظతʹ͸ͦͷϝϯόʔʹෛ୲͕ूதͯ͠ϘτϧωοΫ͕Ҡಈ ͢Δ͚ͩʹͳΓͦ͏

Slide 63

Slide 63 text

Ͳ͏औΓ૊Ί͹Α͍ͩΖ͏͔ • ·ͣ͸ෛͷϧʔϓΛࢭΊͯɺແࡦʹෛ࠴Λ૿΍͞ͳ͍Α͏ʹ͠ ͍ͨ • ͦͯ͠ෛ࠴Λฦ͍͚ͯ͠ΔΑ͏ʹ͍ͨ͠

Slide 64

Slide 64 text

·ͣɺখ͘͞ڮΛ͔͚Δ • ͪΐ͍଍͠ΫϥεΛಋೖɻʮUtilityʯͱ෼ྨ • ࢖͍࢝Ί΍͘͢ɺ௚઀తͳޮՌ͕ग़΍͍͢ • ෛ࠴ͷ૿ՃΛ஗͘Ͱ͖Δ • ͪΐͬͱͨ͠ґཔ͕ݮΓɺৄ͍͠ϝϯόʔͷෛ୲͕ܰ͘ͳΔ • طଘͷίʔυͷ੾Γ཭͠ʹ࢖͑Δ

Slide 65

Slide 65 text

ڮΛ࢖ͬͯ΋Β͏ • ڮΛ͔͚ͯ΋஌ΒΕͳ͚Ε͹ҙຯ͕ͳ͍ • ελΠϧΨΠυΛ࡞੒ͯ͠प஌ • ελΠϧΨΠυδΣωϨʔλΛར༻ • Astrum, Hologram, Fractal, SC5 ͳͲ

Slide 66

Slide 66 text

Astrum http://astrum.nodividestudio.com/

Slide 67

Slide 67 text

ελΠϧΨΠυʹॻ͘͜ͱ • ఆٛ͞Ε͍ͯΔ Utility ͱɺ࢖༻ྫɺ஫ҙ఺ • ελΠϧΨΠυͷߋ৽ͷ࢓ํ

Slide 68

Slide 68 text

ϧʔϧͷ࡞੒ • ৽͍͠ΫϥεΛ࡞Δͱ͖ͷํ਑ • ͲΜͳํ๏࿦ɺ੍໿Λ࠾༻͢Δ͔ͷ߹ҙΛ࡞Δ • ͜Ε΋ελΠϧΨΠυ΍WikiͳͲʹهࡌͯ͠໨ʹ෇͖΍͍͢Α ͏ʹ͓ͯ͘͠

Slide 69

Slide 69 text

৽͍͠ը໘Ͱ͸ ʮ໎Θͣ࢖͑Δ Utilityʯͱ ʮࣦഊΛ๷͙ϧʔϧʯ Ͱ҆શʹ࣮૷͍͚ͯ͠Δ

Slide 70

Slide 70 text

ෛ࠴ͷෛͷϧʔϓ͔Βൈ͚ग़ͤͨ͸ͣ • ͱ͸͍͑ɺطଘͷͱ͜Ζ͕յΕ΍͍͢ͷ͸ͦͷ··… • ৽͍͠ϧʔϧͷਁಁ΋્֐͢Δ • طଘίʔυΛϦϑΝΫλϦϯάͯ͠ɺྑ͍ߏ଄ʹ͍࣋ͬͯ͘

Slide 71

Slide 71 text

ϦϑΝΫλϦϯάΛ࢝ΊΔલʹ • ෛ࠴Λ࣋ͭΫϥε͸޿ൣғʹɺ࣌ʹ͸্ॻ͖͞Εͭͭ࢖ΘΕͯ ͍Δ • ஔ͖׵͑ͨ݁Ռɺҙਤͤ͵Өڹ͕ͳ͍͔Λ͔֬ΊΔͷ͸Ұۤ࿑

Slide 72

Slide 72 text

ϏδϡΞϧϦάϨογϣϯςετ • ݟͨ໨ͷࣗಈςετ • εΫϦʔϯγϣοτͷࠩ෼Λग़ྗɺҙਤͤ͵มߋ͕ͳ͍͜ͱΛ ֬ೝ͢Δ • ςετπʔϧ͕ར༻Մೳ • BackstopJS, REG-SUIT

Slide 73

Slide 73 text

BackstopJS Rails + BackstopJS ͷखલຯḩͷղઆهࣄ http://upinetree.hatenablog.com/entry/2018/05/13/231951

Slide 74

Slide 74 text

஍ಓͳϦϑΝΫλϦϯάͷ͸͡·Γ • ޮՌ͕ग़΍͍͢ͱ͜Ζɺ໰୊͕େ͖͍ͱ͜ΖΛ༏ઌͯ͠ߦ͏ • ಉ͡಺༰ɾ໨తͳͷʹҧ͏Ϋϥεʹͳ͍ͬͯΔ΋ͷΛڞ௨Խ • ҧ͏໨తͷΫϥεͳͷʹ্ॻ͖ɾڞ௨Խ͍ͯ͠Δ΋ͷΛ෼཭ • ࡉ͔͍ௐ੔Λ͗͢͠Δͱؾ͕ԕ͘ͳΔɻҰ୴ஔ͍͓ͯ͘

Slide 75

Slide 75 text

ϦϑΝΫλϦϯά࡞ۀͷதͰͷൃݟ • ΑΓ൚༻తͳߏ଄͕ݟ͔ͭΔ͸ͣ • ͨͱ͑͹άϦουγεςϜͷΑ͏ͳϨΠΞ΢τΫϥε͕୅ද֨ • ͦΕΒΛΫϥεԽͯ͠࠶ར༻Մೳʹ͢Δ

Slide 76

Slide 76 text

ͨͩ͠ɺա౓ͳDRY͸໨ࢦ͞ͳ͍ • ࢖ΘΕํ͕ҧ͏ͳΒɺॏෳఆٛͨ͠΄͏͕໰୊ʹͳΓͮΒ͍ • mixin ΋ಉ༷Ͱɺந৅Խͷࡍ͸े෼ݕ౼͢Δ

Slide 77

Slide 77 text

ٳܜ΋େࣄ ☕ • CSSͷϦϑΝΫλϦϯά͸஍ຯ͕ͩɺ୯७࡞ۀͰ͸ͳ͍ • શମͷߏ଄Λ೺Ѳ͠ͳ͕Βߦ͏ɺͱͯ΋ؾΛ࢖͏࡞ۀ • ͜ͷஈ֊Ͱ͸ෛͷϧʔϓ͔Βൈ͚ग़͍ͤͯΔͷͰɺண࣮ʹߦ͏

Slide 78

Slide 78 text

஍ಓͰటष͍͚Ͳɺଓ͚Δ • ͲΜͲΜ͖Ε͍ʹɺಈ͖΍͘͢ͳͬͯ͘Δ • ը໘Λ৮ΔաఔͰγεςϜશମͷཧղ͕ਂ·Δ • νʔϜΈΜͳͰ΍Δ͜ͱ͕Ͱ͖ΔͱΑΓྑ͍ • ؔ৺Λ޿͛ɺ୩ΛຒΊ͍ͯ͘ػձ͕࡞ΕΔ

Slide 79

Slide 79 text

·ͱΊ

Slide 80

Slide 80 text

·ͱΊ • CSSͷٕज़తෛ࠴ͷࠜݯ͸ʮؔ৺ͷ୩ʯ • ؔ৺ͷ୩ʹʮઃܭํ๏࿦ʯʮ੍໿ʯʮͪΐ͍଍͠Ϋϥεʯͷڮ Λ͔͚Δ • ڮʹ͸ݶք͕͋Δɻ୩ΛຒΊΔ׆ಈ΋େࣄ • ಓͷΓ͸௕͍͚Ͳɺখ͘͞͸͡ΊΔ͜ͱ͸͙͢ʹͰ͖Δ

Slide 81

Slide 81 text

͓·͚

Slide 82

Slide 82 text

ڐ༰͢ΔࢠଙηϨΫλͷྫ: Blockʹดͨ͡ఆٛ /* Good */ .carousel { font-size: 1rem; .home & { font-size: 2rem; } } .carousel ͷৄࡉ౓ͷڧऑ͕ Block ͷ {} ಺ʹด͍ͯ͡ΔͷͰɺӨ ڹൣғΛ༧ଌ͠΍͍͢ /* Bad */ .carousel { font-size: 1rem; } .home { .carousel { font-size: 2rem; } }