Material Designなサイトをつくってみる

解説 http://blog.eiel.info/blog/2015/07/05/ltdd-16-material-design/

https://github.com/LTDD/Sessions/wiki/LT%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA16

Transcript

1. .BUFSJBM
   %FTJHOͳ
   αΠτΛͭͬͯ͘ΈΔ 
   -5ۦಈ։ൃ
2. ͻΉΒ
   ͱ΋ͻ͜ σβΠϯͰ͖ͳ͍
3. ݄ͷπΠʔτෆ଍ https://twitter.com/eielh/status/608566613852356609
4. ݄ͷπΠʔτෆ଍ https://twitter.com/eielh/status/608566613852356609 (JUͰཤྺΛ΋Ͳͦ͏
5. .BUFSJBM
   %FTJHO
6. (PPHMF͕ΞϨͯ͠ΔσβΠϯ
7. ͍·Ͳ͖ͳΞϓϦͬΆ͘
   ͏͘͝αΠτΛͭ͘Γ͍ͨ
8. ͦΕ1PMZNFSͰͰ͖ΔΒ͍͠
10. 1PMZNFS
    4UBSUFS
    ,JU 1PMZNFS͕࢖͍΍͍͢Α͏ʹͳͬͯΔ
    (VMQͱ͔
    ςετͱ͔
11. 1PMZNFS 8FC
    $PNQPOFU
    ͕࣮ݱͰ͖Δ
    ϕʔείϯϙʔωϯτ *SPO ͷ্ʹ
    .BUFSJBM
    %FTJHOͷͨΊͷίϯϙʔωϯτ QBQFS
    
12. ͬ͘͟Γݴ͏ͱ ಠࣗλά͕ͭ͘ΕΔ
14. 4UBUFS
    ,JUΛ͔ͭͬͯΈΔ
15. ඞཁͳ΋ͷ OPEFKT
    
    OQN
16. ࠓճ͸
    ZFPNBO
    Λ͔ͭͬͯ 
    OQN
    JOTUBMM
    H
    HFOFSBUPSQPMZNFS
    ZP
    
    NLEJS
    TBNQMF
    
    DE
    TBNQMF
    
    ZP
    QPMZNFS
17. ࠓճ͸
    ZFPNBO
    Λ͔ͭͬͯ 
    OQN
    JOTUBMM
    H
    HFOFSBUPSQPMZNFS
    ZP
    
    NLEJS
    TBNQMF
    
    DE
    TBNQMF
    
    ZP
    QPMZNFS ͱͯ΋͕͔͔࣌ؒΓ·͢
18. ϩʔΧϧαʔόͷىಈ 
    HVMQ
    TFSWF
21. ͬ͘͟Γͱͨ͠ߏ଄
    BQQJOEFYIUNMͷத QBQFSESBXFSQBOFM
    
    
    QBQFSUPPMCBS
    
    
    
    
    
    
    ϝχϡʔ
    
    
    
    
    QBQFSNFOV
    
    
    QBQFSIFBEFSQBOFM
    
    ϔομʔ
    
    
    
    
    QBQFSUPPMCBS
    
    
    JSPOQBHFT
    
    
    
    
    
    
    
    
    
    ίϯςϯπ
    
    
    
    
    
    QBQFSNBUFSJBM
    )PNFͷத਎
    
    
    
    
    
    
    QBQFSNBUFSJBM
    6TFSͷத਎
    
    
    
    
    
    
    QBQFSNBUFSJBM
    $POUBDUͷத਎
    QBQFSUPBTU
    QMBUJOVNTXSFHJTUFS
    
    
    QMBUJOVNTXDBDIF
    
22. ΧόʔΛઃఆͯ͠ΈΔ
23. ϔομʔύωϧ಺
    πʔϧόʔͷഎܠΛઃఆ QBQFSUPPMCBS
    JENBJO5PPMCBS
    
24. ը૾ͷ४උ BQQJNBHFTDPWFSKQH
25. BQQTUZMFTNBJODTT NBJO5PPMCBS
    \
    
    
    CBDLHSPVOEJNBHF
    VSM JNBHFTDPWFSKQH 
    
    
    CBDLHSPVOEQPTJUJPO
    DFOUFS
    DFOUFS
    ^
    
26. ίϯϙʔωϯτͷελΠϧ BQQTUZMFTBQQUIFNFIUNM
27. ίϯϙʔωϯτΛ͔ͭͬͯΈΔ
28. खॱ 
    ίϯϙʔωϯτͷಡΈࠐΈ
    
    )5.-ͷฤू
29. ίϯϙʔωϯτͷಡΈࠐΈ BQQFMFNFOUTFMFNFOUTIUNM
    ʹ௥ه
    
30. )5.-ͷฤू ಡΈࠐΈͨ͠ίϯϙʔωϯτΛ࢖͏͚ͩ
31. ϘλϯΛ͔ͭͬͯΈΔ BQQFMFNFOUTFMFNFOUTIUNM
    ʹ
    ҎԼΛ௥Ճ
    MJOL
    SFMJNQPSU
    
    
    
    
    ISFGʠCPXFS@DPNQPOFOUTQBQFSCVUUPOQBQFSCVUUPOIUNM
32. Ϙλϯͷૠೖ QBQFSCVUUPO
    SBJTFE
    
    
    
    JSPOJDPO
    JDPOMBCFMJSPOJDPO
    
    
    
    Ϙλϯ
    QBQFSCVUUPO
    
34. ͋ͱ͸ΧλϩάΛΈͯ
    ͕Μ͹Δ
35. ΞΠίϯͷҰཡ https://www.google.com/design/icons/
36. ·ͱΊ ؆୯ʹ.BUFSJBM
    %FTJHO
    1PMZNFS
    4UBSUFS
    ,JU
    આ໌ແ͗͢
    ӳޠ͕ಡΊͳ͚Ε͹ίʔυΛݟΖ