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

Transcript

1. ͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ Yu Ishihara (@is8r_) γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δ Rails Developers Meetup 2018 Day

   4 Nouvelle Vague - 2018/12/8

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

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

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

   @is8r_

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

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

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

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

9. None
10. None
11. None

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

13. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊ ݁࿦͔Βݴ͏ͱ
    T
    ʙ
    T
    ͕ྑ͍ͱ͞Ε͍ͯ·͢ )PX
    GBTU
    TIPVME
    ZPVS
    6*
    BOJNBUJPOT
    CF
    
    "EPCFͷ6*Ξχϝʔγϣϯίϯαϧλϯτͷํͷϒϩάهࣄ IUUQTWBMIFBEDPNIPXGBTUTIPVMEZPVSVJBOJNBUJPOTCF 200ms to 500ms seconds is

    a good range to start with for interface animations.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29. None
30. None
31. None

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

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

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

35. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ #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);

36. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊ Ξχϝʔγϣϯʹ͓͚Δͷ๏ଇɻ
    4MPX
    JO
    BOE
    TMPX
    PVUɺ5JNJOH͋ͨΓΛݟͯΈΔͱΘ͔Γ΍͍͢ 
    QSJODJQMFT
    PG
    BOJNBUJPO IUUQUIFQSJODJQMFTUVNCMSDPN

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

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

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

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

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

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

    ࡾ֯ؔ਺ *-sine ٸܹͳ *-expo ԁ *-circ

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

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

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

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

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

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

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

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

    0.2s ease-out; }

51. 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; }

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

53. 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; } } }

54. 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; } }

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

    .input; } } .actions { input { @extend .button; width: 100%; } }

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

57. 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; } }

58. 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%; } }

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

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

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

62. 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; }

63. 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; } }

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

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

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

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

68. ͍͞͝ʹ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠