シンプルなRailsアプリケーションに一匙加えるちょい足しアニメーションレシピ

Slide 1

Slide 1 text

ͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ Yu Ishihara (@is8r_) γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δ Rails Developers Meetup 2018 Day 4 Nouvelle Vague - 2018/12/8

Slide 2

Slide 2 text

ࣗݾ঺հ @is8r_ ͸͡Ί·ͯ͠ɻੴݪ༔ͱݴ͍·͢ ੴݪ༔ Yu Ishihara

Slide 3

Slide 3 text

ϑϦʔϥϯεͰ3BJMT΍(PͷΞϓϦέʔγϣϯͷσβΠϯͱϑϩϯτͷ͓࢓ࣄΛ΍͓ͬͯΓ·͢ ࣗݾ঺հ @is8r_ ͦͷଞ͍Ζ͍Ζ || || %FTJHO'SPOU

Slide 4

Slide 4 text

࠷ۙ͸Ϥʔάϧτͮ͘ΓʹϋϚͬͯ·͢ ࣗݾ঺հ μώϤʔάϧτ ΧεϐւϤʔάϧτ ϗʔ ϜϝΠ υέϑ Ο Ξ 3 @is8r_

Slide 5

Slide 5 text

3VCZ,BJHJͷσβΠϯͷ࿩ʜ ࠓ೔͓࿩͍ͤͯͨͩ͘͜͠͞ͱ @is8r_

Slide 6

Slide 6 text

Λ͠Α͏͔ͱ΋ࢥͬͨͷͰ͕͢ͷ࿩Λલճͷ3BJMT%.Ͱ͞Μ͕࿩͍ͯͨ͠ͷͰผͷ͓࿩Λʜ ࠓ೔͓࿩͍ͤͯͨͩ͘͜͠͞ͱ @is8r_

Slide 7

Slide 7 text

ࠓ೔͓࿩͍ͤͯͨͩ͘͜͠͞ͱ $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 @is8r_

Slide 8

Slide 8 text

γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δɺͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ $44ΞχϝʔγϣϯɺͳΜͱͳ͘ ඵ਺ܾΊ͍ͯΔ໰୊

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ͪΐͬͱಈ͔ͯ͠Έ·͠ΐ͏ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNTQFFE 4QFFE

Slide 13

Slide 13 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ݁࿦͔Βݴ͏ͱTʙT͕ྑ͍ͱ͞Ε͍ͯ·͢ )PXGBTUTIPVMEZPVS6*BOJNBUJPOTCF "EPCFͷ6*Ξχϝʔγϣϯίϯαϧλϯτͷํͷϒϩάهࣄ IUUQTWBMIFBEDPNIPXGBTUTIPVMEZPVSVJBOJNBUJPOTCF 200ms to 500ms seconds is a good range to start with for interface animations.

Slide 14

Slide 14 text

0 200 500 1000ms $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ͱ͸͍͑݁ߏ෯͕͋ΔͷͰɺ΍͸Γ໎ͬͯ͠·͍·͢ΑͶ

Slide 15

Slide 15 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ϘλϯͳͲ͸ɺૢ࡞΁ͷϑΟʔυόοΫΛײͤ͡͞ΔͨΊͷಈ͖ͳͷͰɺಈ͖͕஗͍ͱअຐʹײ͡Δ͠ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNCVUUPO

Slide 16

Slide 16 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ Ϣʔβʔ΁ͷ஫ҙשى͕໨తͷཁૉʹؔͯ͠͸ɺಈ͖͕ૣ͍ͱͦͷ໾ׂΛՌͨͤͳ͍ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNJOQVU

Slide 17

Slide 17 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ Ϣʔβʔ΁ͷ஫ҙשى͕໨తͷཁૉʹؔͯ͠͸ɺಈ͖͕ૣ͍ͱͦͷ໾ׂΛՌͨͤͳ͍ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNOPUJDF

Slide 18

Slide 18 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ૢ࡞͕Ͱ͖ΔཁૉͰ͋ΔࣄΛࣔͨ͢Ί͚ͩͳͷ͔ ໨ΛҾ͖͍ͨཁૉ΁ͷࢹઢͷ༠ಋͳͷ͔ɺ ͋ͨΓΛҙࣝ͢ΔͱܾΊ΍͍͢Ͱ͢

Slide 19

Slide 19 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ զʑ͸GQTͱGQTͷҧ͍͕Θ͔ΔͷͰɺ೴͕৘ใͷؒΛຒΊ͍ͯΔͱ͔͸͋Γͦ͏͚ͩͲ ਓ͕ೝࣝ͢Δʮ࿈ଓͨ͠ੈքʯ͸ݬͰ͋Δͱ͍͏ௐࠪ݁Ռ IUUQTHJHB[JOFOFUOFXTTQPUMJHIUPGBUUFOUJPO ਓؒͷ೴͸ඵؒʹ ճͷ஫ҙྗͷഥಈ͕͋Δ 4 1

Slide 20

Slide 20 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ౓ͷ৘ใߋ৽ʹ͸೴͸͍͍ͩͨNT͘Β͍࣌ؒΛ͔͚ͯͦ͏ 1000/4 = 250ms

Slide 21

Slide 21 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ͱ͍͏͜ͱ͸

Slide 22

Slide 22 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ૢ࡞ײΛମײͤ͞ΔͨΊ͚ͩͷ΋ͷʹؔͯ͠͸໨োΓʹͳΒͳ͍Α͏ʹɺ NTҎԼΛ໨҆ʹ͢Δͷ͕ྑͦ͞͏ ͜ͷลʁ 0 250 500 750 1000ms

Slide 23

Slide 23 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ NTͩͱɺλΠϛϯάʹΑͬͯ͸ճͷ৘ใߋ৽ʹ౰ͨͬͯ͠·͏͔΋͠Εͳ͍ͷͰɺ NT͕ྑͦ͞͏ ms 0 250 500 750 1000

Slide 24

Slide 24 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ʮԿ͔ग़͖ͯͨࣄʯʮԿ͔ಈ͍ͨࣄʯͱ͍͏ࣄΛҙࣝతʹؾ͍ͮͯ΋Β͍͍ͨ΋ͷ͸ɺ NTҎ্͕ྑͦ͞͏ ͜ͷลʁ ms 0 250 500 750 1000

Slide 25

Slide 25 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ճͷ৘ใߋ৽Ͱ͸ݟಀ͢ࣄ΋ߟྀͯ͠ɺNT͕ྑͦ͞͏ͳͷͰ͸ ms 0 250 500 750 1000

Slide 26

Slide 26 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ͜Μͳײ͡Ͱ਺஋΁ͷཪ෇͚Λߟ͑ͯΈΔͱ ͢ΜͳΓܾΊΒΕͦ͏

Slide 27

Slide 27 text

$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ͍͑΍ɺͰܾΊͯײ֮తʹͬ͘͠Γ͘Δඵ਺͕͋Ε͹ ͦΕͰେৎ෉Ͱ͕͢ɺ ΋͠໎ͬͨ࣌ʹ͸ͪΐͬͱࢥ͍ग़ͯ͠Έ͍ͯͩ͘͞

Slide 28

Slide 28 text

γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δɺͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔ Θ͔Βͳ͍໰୊

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ΠʔδϯάΧʔϒɺͨ͘͞Μͨ͘͞Μ͋Γ·͢ΑͶ IUUQTFBTJOHTOFUKB &BTJOH'VODUJPOૣݟද

Slide 33

Slide 33 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ͪΐͬͱಈ͔ͯ͠Έ·͠ΐ͏ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH &BTJOH'VODUJPOT

Slide 34

Slide 34 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ DVCJDCF[JFSΛ׆༻ͨ͠Β௥ՃͰ͖Δ&BTJOHGVODUJPOT΋͋Γ·͢ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH $VTUPN&BTJOH'VODUJPOT

Slide 35

Slide 35 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ #PVODF͸DVCJDCFTJFSͰ͸࣮ݱͰ͖ͳ͍Έ͍ͨͰ͢ // from: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_timing-functions.scss // EASE IN $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); // EASE OUT $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); // EASE IN OUT $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); // ͬͪ͜͸ͦΕͬΆ͍ಈ͖ͳ͚ͩ // (similar elastic). $ease-out-elastic: cubic-bezier(0.370, 1.650, 0.410, 0.780); $ease-in-elastic: cubic-bezier(0.370, 0.650, 0.410, -0.780);

Slide 36

Slide 36 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ Ξχϝʔγϣϯʹ͓͚Δͷ๏ଇɻ4MPXJOBOETMPXPVUɺ5JNJOH͋ͨΓΛݟͯΈΔͱΘ͔Γ΍͍͢ QSJODJQMFTPGBOJNBUJPO IUUQUIFQSJODJQMFTUVNCMSDPN

Slide 37

Slide 37 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ Կ͔ʹԡ͞Εͯಈ͖࢝ΊΔ΋ͷɺ ஍໘ͷ఍߅Λड͚ͯࢭ·Δ΋ͷɺ ࣗ෼Ͱಈ͖ग़ͯ͠ɺࢭ·Δ΋ͷɺ ͋ͨΓ͕ԡ͓͖͍͑ͯͨ͞ϙΠϯτͰ͢ɻ

Slide 38

Slide 38 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ը໘͔Βফ͍͑ͯ͘ཁૉͱ͔ Կ͔ʹԡ͞Εͯಈ͖࢝ΊΔ΋ͷ FBTFJO

Slide 39

Slide 39 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ը໘ʹೖͬͯ͘Δཁૉͱ͔ɺϘλϯͱ͔ ஍໘ͳΜ͔ͷ఍߅Λड͚ͯࢭ·Δ΋ͷ FBTFPVU

Slide 40

Slide 40 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ৳ͼॖΈ͢ΔݕࡧϑΥʔϜͱ͔ ࣗ෼Ͱಈ͖ग़ͯ͠ɺࢭ·Δ΋ͷ FBTFJOPVU

Slide 41

Slide 41 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ Tఔ౓ͷಈ͖Ͱ͸ҧ͍΋Θ͔Γʹ͍͘͠ʜ ͱ͍͍ͭͭ΋ɺ$44ͷΞχϝʔγϣϯͰ͸ TJOF΍FYQPͳͲͷΧʔϒͷҧ͍ʹ͍ͭͯ͸ ͋·Γؾʹ͍͍ͤͣͩͨ͸ϓϦηοτʹ͋Δ΍ͭ࢖͏ͷ͕ྑͦ͞͏

Slide 42

Slide 42 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ ҰԠͬ͘͟Γͱઆ໌Λ͓ͯ͘͠ͱ ೋɺ ࡾɺ ࢛ɺ ޒ࣍ؔ਺ *-quad, *-cubic, *-quart, *-quint ࡾ֯ؔ਺ *-sine ٸܹͳ *-expo ԁ *-circ

Slide 43

Slide 43 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ FBTFJORVBE͸෺͕མͪΔಈ͖ 2VBE མԼͷಈ͖

Slide 44

Slide 44 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ RVBE͔ΒRVJOU͸ڧ౓͕ͪΐͱUҧ͍·͢ ؇΍͔ ܹ͍͠ Quad Cubic Quart Quint

Slide 45

Slide 45 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ FBTFJOPVUTJOF͸ৼΓࢠͷಈ͖ 4JOF ৼΓࢠͷಈ͖

Slide 46

Slide 46 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ FBTFJOFYQPɺFBTFPVUFYQPɺFBTFJOPVUFYQP͸ٸܹͳಈ͖ &YQP ٸͳಈ͖

Slide 47

Slide 47 text

ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ Ҏ্Λ౿·͑ͯߟ͑ΔͱͲΕΛબͿͱྑ͍͔ܾΊ΍͘͢ͳΓ·͢ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH &BTJOH'VODUJPOT

Slide 48

Slide 48 text

γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δɺͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳ ͪΐ͍଍͠Ξχϝʔγϣϯ$44

Slide 49

Slide 49 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Ϙλϯཁૉ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNCVUUPO

Slide 50

Slide 50 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Ξχϝʔγϣϯͷ෦෼ʢݟ΍͍͢Α͏ʹσβΠϯ෦෼͸NJYJOʹ෼͚͓͖ͯ·ͨ͠ʣ .button { @include button-base; @include font; transition: all 0.2s ease-out; }

Slide 51

Slide 51 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕ͹ͪ͜ΒΛมߋ @mixin button-base { $c: #82ccdd; $t: .2rem; display: inline-block; position: relative; cursor: pointer; text-align: center; box-sizing: border-box; border: none; outline: none; margin: 0; padding: .5rem 2rem; border-radius: 4rem; transform: translateY(-$t); background-color: $c; color: #fff; box-shadow: 0 $t 0 darken($c, 5%); &:hover { color: #fff; text-decoration: none; transform: translateY(0); box-shadow: 0 0 0 $c; background-color: darken($c, 2%); } } @mixin font($size: 1rem, $line-height: normal, $weight: 400) { font-family: YuGothic, 'ᕟΰγοΫ', sans-serif; font-size: $size; font-weight: $weight; line-height: $line-height; }

Slide 52

Slide 52 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Πϯϓοτཁૉ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNJOQVU

Slide 53

Slide 53 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Ξχϝʔγϣϯ෦෼ @keyframes anim-shake { $m: .3rem; 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-$m, 0) rotate(0deg); } 50% { transform: translate(0, 0) rotate(0deg); } 75% { transform: translate($m, 0) rotate(0deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .input { @include input-base; @include font(.9375rem); &.is-action { $c: $color-red; animation: anim-shake .2s linear 4; border-color: $c; &:focus { border-color: $c; } } }

Slide 54

Slide 54 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕ͹ͪ͜ΒΛมߋ @mixin input-base { $c: #82ccdd; display: inline-block; box-sizing: border-box; appearance: none; border: none; outline: none; text-decoration: none; line-height: 1 !important; background-image: none; margin: 0; padding: .6rem .8rem; border: 1px solid #eee; border-radius: .2rem; width: 100%; background-color: #fff; &:focus { border: 1px solid $c; outline: none; } &::placeholder { font-size: inherit; color: #ddd; } }

Slide 55

Slide 55 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ༨ஊͰ͕͢ɺEFWJTFͷೝূը໘ͱ͔ɺखൈ͖͠Α͏ͱࢥͬͨΒSBJMTHEFWJTFWJFXT͠ͳͯ͘΋$44͚ͩ ͰશવσβΠϯ͕ೖΕΒΕ·͢ .field { input[type=text], input[type=email], input[type=password] { @extend .input; } } .actions { input { @extend .button; width: 100%; } }

Slide 56

Slide 56 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Τϥʔͱ͔Ͱ่ΕͨΓ͢Δͷͱ͔΋ɺ ͜ͷลʹεϖʔε͕Ͱ͖ͨΓ ͯ͠Δͷ͸ҙਤ͠ͳ͍CS͕ٸʹೖͬͯ͘ Δͷ͕໰୊

Slide 57

Slide 57 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 $44͚ͩͰ΋Ҋ֎؆୯ʹௐ੔͢Δࣄ͕ՄೳͰ͢ .field { label { + br { display: none; } } input[type=checkbox] { + label { display: inline-block; } } i { + br { display: none; } } } .field_with_errors { i { display: block; } + em { display: inline-block; } + br { display: none; } }

Slide 58

Slide 58 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ͋ͱ͸ࡉ͔͍ௐ੔ΛೖΕ͓͍ͯͨΒʜʢޙͰHJUIVCʹΞοϓ͓͖ͯ͠·͢ʜʣ .field { margin-top: 1rem; label { padding-bottom: .2rem; display: block; + br { display: none; } } input[type=text], input[type=email], input[type=password] { @extend .input; } input[type=checkbox] { margin-right: .2rem; cursor: pointer; + label { display: inline-block; cursor: pointer; } } em { @include font(.875rem); } i { @include font(.875rem); padding-bottom: .4rem; display: block; + br { display: none; } } } .field_with_errors { $c: $color-red; label { color: $c; margin-bottom: 0; } i { @include font(.875rem); font-style: normal; color: $color-red; padding-bottom: .4rem; display: block; &::before { @include fa('\f071'); margin-right: .4rem; } } + em { display: inline-block; margin-bottom: .5rem; } + br { display: none; } } #error_explanation { $c: $color-red; background-color: lighten($c, 30%); border-bottom: 1px solid lighten($c, 28%); color: $c; margin-top: 1rem; padding: .5rem 1rem; h2 { @include font(.875rem, 1.2rem, bold); margin: 0; } ul { margin: .1rem 0 0 1.5rem; padding: 0; li { @include font(.9375rem); margin-top: .3rem; } } } .actions { margin-top: 1rem; text-align: center; input { @extend .button; width: 100%; } }

Slide 59

Slide 59 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ͜͏͍ͬͨͷ͕

Slide 60

Slide 60 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ͜Μͳ͔Μ͡ʹ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNVTFSTTJHO@VQ

Slide 61

Slide 61 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ௨஌ཁૉ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNOPUJDF

Slide 62

Slide 62 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 Ξχϝʔγϣϯͷ෦෼ @keyframes anim-notice { 0% { transform: translateY(-100%); opacity: 0; animation-timing-function: ease-out; } 20% { transform: translateY(0%); opacity: 1; } 80% { transform: translateY(0%); opacity: 1; animation-timing-function: ease-in; } 100% { transform: translateY(-100%); opacity: 0; } } .notice { @include font; @include notice-base; animation: anim-notice 3s; }

Slide 63

Slide 63 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 σβΠϯͷ෦෼ @mixin notice-base($c: #82ccdd) { display: block; margin: 0; padding: 1rem; position: fixed; width: 300px; top: 1rem; left: calc(50% - 150px); text-align: center; background-color: lighten($c, 25%); border-bottom: 1px solid lighten($c, 28%); color: $c; transform: translateY(-100%); opacity: 0; box-shadow: 0 5px 10px rgba(darken($c, 30%), .1); border-radius: .4rem; &:empty { display: none; } }

Slide 64

Slide 64 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ͱ͍͏Θ͚Ͱ؆୯ʹ࢖͑Δ$44ΞχϝʔγϣϯͷখٕΛ ͝঺հ͍͖ͤͯͨͩ͞·ͨ͠

Slide 65

Slide 65 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ϦϙδτϦ͸ͪ͜Β NJYJO͸͜ͷ͋ͨΓ IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDUCMPCNBTUFSBQQBTTFUTTUZMFTIFFUTTUZMFTDPOpH @NJYJOTTDTT IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDUCMPCNBTUFSBQQBTTFUTTUZMFTIFFUTBQQMJDBUJPOTDTT Ξχϝʔγϣϯؔ࿈͸͜ͷ͋ͨΓ IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDU

Slide 66

Slide 66 text

3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44 ͓ࢼ͠Ͱ࡞ΔΞϓϦͷϓϩτλΠϐϯά΍ϋοΧιϯ΍ͳΜ͔ͷ εϐʔυউෛͷ৔Ͱ׆༂͢Δɺϋζ

Slide 67

Slide 67 text

͍͞͝ʹ ීஈͷҊ݅Ͱ͸ϝϯςφϯεͷࣄΛߟ͑ͯ ͦΕͧΕͷαΠτʹ͋ͬͨॻ͖ํΛ͠·͢

Slide 68

Slide 68 text

͍͞͝ʹ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠