単位をあやつる

2017年7月22日「CSS Talk vol.4」でのセッション「単位をあやつる」のスライドです。

Transcript

1. FN
   WX
   ୯ҐΛ
   ͋΍ͭΔ
   $445BML7PM
   
   ৿Ӭ఩ฏ
   QY
   
   SFN
   

   View Slide

2. 
   ࠓճͷ಺༰
   $445BMLWPM
   w ͸͡Ίʹʜʜ
   w $44Ͱ࢖͏୯Ґ
   w σϞ
   
   w DBMDͷొ৔
   w ϨεϙϯγϒରԠ
   w σϞ
   
   w ·ͱΊ
   

   View Slide

3. 
   ࣗݾ঺հ
   w ৿Ӭ఩ฏ ΋Γͯͭ
   
   w גࣜձࣾάϥουΩϡʔϒ

   ϓϩμΫτ։ൃνʔϜɹΤϯδχΞ
   $445BMLWPM
   

   View Slide

4. 
   ࠓճͷ಺༰
   $445BMLWPM
   w ͸͡Ίʹʜʜ
   w $44Ͱ࢖͏୯Ґ
   w σϞ
   
   w DBMDͷొ৔
   w ϨεϙϯγϒରԠ
   w σϞ
   
   w ·ͱΊ
   

   View Slide

5. 
   ୯Ґͱ͍͑͹ʜ
   $445BMLWPM
   w ௕͞ LNNDN
   
   w ॏ͞ LHH
   
   w ༰ྔ MNMDD
   
   ͳͲͳͲʜʜ
   

   View Slide

6. 
   ୯Ґͱ͍͑͹ʜ
   $445BMLWPM
   ·ͨɺ
   མͱ͢ͱཹ೥͠·͢ɻ
   ˞࣮ࡍࢲ΋ճཹ೥͍ͯ͠·͢
   

   View Slide

7. 
   ͜͜·Ͱ͸લϑϦɻ
   $445BMLWPM
   ࠓճ͸
   $44Ͱ࢖͏୯Ґͷ࿩
   Ͱ͢ɻ
   

   View Slide

8. 
   ࠓճͷ಺༰
   $445BMLWPM
   w ͸͡Ίʹʜʜ
   w $44Ͱ࢖͏୯Ґ
   w σϞ
   
   w DBMDͷొ৔
   w ϨεϙϯγϒରԠ
   w σϞ
   
   w ·ͱΊ
   

   View Slide

9. 
   $44Ͱ࢖͏୯Ґ
   w ϐΫηϧ୯Ґ
   w ը໘্ͷϐΫηϧ͕QY
   w جຊதͷجຊ
   $445BMLWPM
   QY
   

   View Slide

10. 
    $44Ͱ࢖͏୯Ґ
    w ͜Ε΋Α͘࢖͍·͢
    w ਌ཁૉʹର͢Δׂ߹
    $445BMLWPM
    
    

    View Slide

11. 
    $44Ͱ࢖͏୯Ґ
    w จࣈ෼ͷߴ͞
    w ྫ͑͹GPOUTJ[FQYͳΒFNQY
    w ΞϧϑΝϕοτʮ.ʯจࣈͷߴ͕͞
    ༝དྷ
    $445BMLWPM
    FN
    

    View Slide

12. 
    $44Ͱ࢖͏୯Ґ
    w WJFXQPSUXJEUIͷུ
    w $44Ͱొ৔
    w Ϗϡʔϙʔτ දࣔྖҬ
    ͷ෯ͷ
    ෼ͷΛͱͨ͠୯Ґ
    $445BMLWPM
    WX දࣔྖҬ
    WX
    

    View Slide

13. 
    $44Ͱ࢖͏୯Ґ
    w WJFXQPSUIFJHIUͷུ
    w $44Ͱొ৔
    w Ϗϡʔϙʔτ දࣔྖҬ
    ͷߴ͞ͷ
    ෼ͷΛͱͨ͠୯Ґ
    $445BMLWPM
    WI දࣔྖҬ
    WI
    

    View Slide

14. 
    $44Ͱ࢖͏୯Ґ
    w ϧʔτཁૉ IUNMཁૉ
    ͷϑΥϯτα
    ΠζΛͱͨ͠୯Ґ
    w $44Ͱొ৔
    $445BMLWPM
    SFN
    

    View Slide

15. 
    $44Ͱ࢖͏୯Ґ
    w Ϗϡʔϙʔτ දࣔྖҬ
    ͷ෯ɺߴ͞
    ͷ͏ͪେ͖͍ํͷ෼ͷΛͱ͠
    ͨ୯Ґ
    w $44Ͱొ৔
    $445BMLWPM
    WNBY
    

    View Slide

16. 
    $44Ͱ࢖͏୯Ґ
    w Ϗϡʔϙʔτ දࣔྖҬ
    ͷ෯ɺߴ͞
    ͷ͏ͪখ͍͞ํͷ෼ͷΛͱ͠
    ͨ୯Ґ
    w $44Ͱొ৔
    $445BMLWPM
    WNJO
    

    View Slide

17. 
    $44Ͱ࢖͏୯Ґ
    $445BMLWPM
    WNBY WNJO
    දࣔྖҬ
    WNBY
    WNJO දࣔྖҬ
    WNBY
    WNJO
    

    View Slide

18. 
    $44Ͱ࢖͏୯Ґ
    ଞʹ΋͍Ζ͍Ζ͋Γ·͕͢ɺ
    ར༻ස౓͸ ଟ෼
    গͳ͍ͱࢥ͍
    ·͢ͷͰׂѪ͍ͨ͠·͢ɻ
    $445BMLWPM
    

    View Slide

19. 
    ࢖༻্ͷ஫ҙ
    w Ϗϡʔϙʔτ දࣔ
    ྖҬ
    ͷ෯ɺߴ͞͸
    εΫϩʔϧόʔ΋
    ؚΈ·͢
    $445BMLWPM
    WX WI
    දࣔྖҬ
    WI
    WX
    

    View Slide

20. 
    ࢖༻্ͷ஫ҙ
    w *&&EHFʹඇରԠ

    ͳ͔ͥWNJO͸ରԠ
    $445BMLWPM
    WNBY
    

    View Slide

21. 
    ࠓճͷ಺༰
    $445BMLWPM
    w ͸͡Ίʹʜʜ
    w $44Ͱ࢖͏୯Ґ
    w σϞ
    
    w DBMDͷొ৔
    w ϨεϙϯγϒରԠ
    w σϞ
    
    w ·ͱΊ
    

    View Slide

22. 
    σϞ
    
    IUUQTDPEFQFOJPU@NPSJOBHBQFO7,ZXYX
    $445BMLWPM
    

    View Slide

23. 
    ࠓճͷ಺༰
    $445BMLWPM
    w ͸͡Ίʹʜʜ
    w $44Ͱ࢖͏୯Ґ
    w σϞ
    
    w DBMDͷొ৔
    w ϨεϙϯγϒରԠ
    w σϞ
    
    w ·ͱΊ
    

    View Slide

24. 
    DBMDͷొ৔
    ྫ͑͹ʜʜ
    ʮ͜ͷEJWͷ෯͸਌ཁૉͷʹ͍ͨ͠
    ͚ͲɺCPSEFS͕͋ΔͷͰͦͷ෼ͷϐΫη
    ϧΛҾ͍ͨ෯ʹ͍ͨ͠ʯ
    ͱ͍͏೰Έ
    $445BMLWPM
    

    View Slide

25. 
    DBMDͷొ৔
    w ҧ͏୯ҐΛՃݮ৐আͰ͖Δ
    w $44Ͱొ৔
    $445BMLWPM
    DBMD
    

    View Slide

26. 
    DBMDͷొ৔
    $445BMLWPM
    ઌ΄Ͳͷྫͩͱʜʜ
    EJW
    ਌ཁૉͷ
    CPSEFSࠐΈ
    
    CPSEFSMFGU
    QY
    
    CPSEFSSJHIU
    QY
    
    EJW\
    XJEUIDBMD QY
    
    CPSEFSTPMJEQYHSBZ
    ^
    

    View Slide

27. 
    ࠓճͷ಺༰
    $445BMLWPM
    w ͸͡Ίʹʜʜ
    w $44Ͱ࢖͏୯Ґ
    w σϞ
    
    w DBMDͷొ৔
    w ϨεϙϯγϒରԠ
    w σϞ
    
    w ·ͱΊ
    

    View Slide

28. 
    ϨεϙϯγϒରԠ
    ྫ͑͹
    w ը໘෯ʹԠͯ͡GPOUTJ[FΛม͍͑ͨ࣌
    $445BMLWPM
    " "
    ը໘෯QY
    ˣ
    GPOUTJ[FQY
    ը໘෯QY
    ˣ
    GPOUTJ[FQY
    

    View Slide

29. 
    ϨεϙϯγϒରԠ
    Α͘࢖͏ํ๏ɿ$44.FEJB2VJSJFT
    $445BMLWPM
    TBNQMF\
    GPOUTJ[FQY
    ^
    !NFEJBTDSFFOBOE NBYXJEUIQY
    \
    TBNQMF\
    GPOUTJ[FQY
    ^
    ^
    

    View Slide

30. 
    ϨεϙϯγϒରԠ
    Α͘࢖͏ํ๏ɿ$44.FEJB2VJSJFT
    $445BMLWPM
    TBNQMF\
    GPOUTJ[FQY
    ^
    !NFEJBTDSFFOBOE NBYXJEUIQY
    \
    TBNQMF\
    GPOUTJ[FQY
    ^
    ^
    !NFEJBTDSFFOBOE NBYXJEUIQY
    \
    TBNQMF\
    GPOUTJ[FQY
    ^
    ^
    !NFEJBTDSFFOBOE NBYXJEUIQY
    \
    TBNQMF\
    GPOUTJ[FQY
    ^
    ^
    ࡉ͔͘ࠁΈ͗͢Δͱ
    ίʔυ͕ΧΦεʹ
    

    View Slide

31. 
    ϨεϙϯγϒରԠ
    ը໘෯ʹԠͯ͡GPOUTJ[FΛม͍͑ͨ
    ˠDBMDΛ࢖ͬͯॊೈʹมԽͤ͞Δ
    $445BMLWPM
    " "
    ը໘෯QY
    ˣ
    GPOUTJ[FQY
    ը໘෯QY
    ˣ
    GPOUTJ[FQY
    

    View Slide

32. 
    ϨεϙϯγϒରԠ
    ը໘෯ʹԠͯ͡GPOUTJ[FΛม͍͑ͨ
    ˠDBMDΛ࢖ͬͯॊೈʹมԽͤ͞Δ
    $445BMLWPM
    ը໘෯ɿQYͷ࣌ˠQY
    ը໘෯ɿQYͷ࣌ˠQY
    ը໘෯͕
    QY૿Ճ
    ˣ
    GPOUTJ[F͕
    QY૿Ճ
    

    View Slide

33. 
    ϨεϙϯγϒରԠ
    ը໘෯ʹԠͯ͡GPOUTJ[FΛม͍͑ͨ
    ˠDBMDΛ࢖ͬͯॊೈʹมԽͤ͞Δ
    $445BMLWPM
    ը໘෯͕
    QY૿Ճ
    ˣ
    GPOUTJ[F͕
    QY૿Ճ
    ը໘෯͕
    QY૿Ճ
    ˣ
    GPOUTJ[F͕
    QY૿Ճ
    ը໘෯ͷ
    WX
    

    View Slide

34. 
    ϨεϙϯγϒରԠ
    ը໘෯ʹԠͯ͡GPOUTJ[FΛม͍͑ͨ
    ˠDBMDΛ࢖ͬͯॊೈʹมԽͤ͞Δ
    $445BMLWPM
    ը໘෯ɿQYͷ࣌ˠQY
    ը໘෯ɿQYͷ࣌ˠQY
    ը໘෯͕
    QYͷ࣌Λܭࢉ
    QY
    

    View Slide

35. 
    ϨεϙϯγϒରԠ
    ը໘෯ʹԠͯ͡GPOUTJ[FΛม͍͑ͨ
    ˠDBMDΛ࢖ͬͯॊೈʹมԽͤ͞Δ
    $445BMLWPM
    ը໘෯͕QYͷ࣌ɺGPOUTJ[F͸QY
    ը໘෯͕QY૿Ճ͢Δ͝ͱʹ
    GPOUTJ[F͕QY ը໘෯ͷˠWX
    ૿Ճ
    GPOUTJ[FDBMD QYWX
    
    

    View Slide

36. 
    ϨεϙϯγϒରԠ
    ը໘෯ʹԠͯ͡GPOUTJ[FΛม͍͑ͨ
    ˠ͔͠͠ຖճܭࢉ͢Δͷ͸໘౗
    $445BMLWPM
    

    View Slide

37. 
    ϨεϙϯγϒରԠ
    ͱ͍͏͜ͱͰ
    $445BMLWPM
    ࡞ͬͪΌ͍·ͨ͠
    

    View Slide

38. 
    ࠓճͷ಺༰
    $445BMLWPM
    w ͸͡Ίʹʜʜ
    w $44Ͱ࢖͏୯Ґ
    w σϞ
    
    w DBMDͷొ৔
    w ϨεϙϯγϒରԠ
    w σϞ
    
    w ·ͱΊ
    

    View Slide

39. 
    σϞ
    
    IUUQTDPEFQFOJPU@NPSJOBHBGVMMXRXRE9
    $445BMLWPM
    

    View Slide

40. 
    σϞ
    
    ࣾ಺Ͱ౰࣌ίʔσ
    Οϯάۀ຿Λ͍ͯͨ͠
    8͘Μ Ծ໊
    ʹ࢖ͬͯ΋Βͬͨͱ͜Ζ
    $445BMLWPM
    ͜Εੌ͍͡Όͳ͍Ͱ͔͢ʂ
    ΊͬͪΌ࢖͑Δ΍
    ͳ͍Ͱ͔͢ʔʂʂ
    ͚ͬ͜͏සൟʹ࢖͍ͬͯ·ͨ͠ɻ
    

    View Slide

41. 
    ϨεϙϯγϒରԠ
    ଟ෼͜ͷखͷܭࢉπʔϧɺهࣄ͸
    ωοτͰ୳ͤ͹͍Ζ͍Ζ͋Γ·͢
    $445BMLWPM
    IUUQTXFCTFNBOUJDTVLUPPMTSFTQPOTJWFGPOUDBMDVMBUPS
    'MVJESFTQPOTJWFGPOUDBMDVMBUPS
    

    View Slide

42. 
    ࠓճͷ಺༰
    $445BMLWPM
    w ͸͡Ίʹʜʜ
    w $44Ͱ࢖͏୯Ґ
    w σϞ
    
    w DBMDͷొ৔
    w ϨεϙϯγϒରԠ
    w σϞ
    
    w ·ͱΊ
    

    View Slide

43. 
    ·ͱΊ
    $445BMLWPM
    w $44Ͱ࢖͏୯Ґ͸͍Ζ͍Ζ͋Γ·͢
    w DBMDͰෳ਺ͷ୯ҐΛ૊Έ߹Θͤͯܭࢉ͢Δ͜ͱ
    ͰϨεϙϯγϒରԠ΋ॊೈʹߦͳ͑·͢
    w Ϧιʔε͸ωοτ্ʹ͍Ζ͍Ζ͋ΔͷͰௐ΂ͯ
    ษڧ͠ɺܭࢉํ๏Λ೺Ѳͯ͠୯ҐΛࣗ༝ࣗࡏʹ
    ૢΓ·͠ΐ͏
    w ෼Ͱ࡞ͬͨπʔϧͰ΋ͦͦ͜͜໾ʹཱͪ·͢
    

    View Slide

44. ऴ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    

    View Slide