脱残念Webデザイン CSS編

Transcript

1. ࢒೦
   8FCσβΠ ϯ
   $44ฤ ୤ ͞ ͘ Βͷ༦΂
   JO ࡸߐ  5PTIJBLJ
   4BTBLJ
   8FC
   %FTJHOFS
   BU
   "--$0//&$5

   
   *OD

2. 5PTIJBLJ
   4BTBLJ 8FC
   %FTJHOFS
   BU
   "--$0//&$5
   *OD !TIJSPLVSP

3. Web Design

4. HTML CSS JavaScript ػೳ ߏ଄ ૷০

5. CSS is fun!

6. http:/ /gcss.info/

7. $44
   ͔Θ͍͍Α$44 ЧA ŰōŰō

8. ͓͍ͱ͍ͯɻ ຊηογϣϯͰ͸ɺ8FCϖʔδͷݟӫ͑Λ Α͘͢ΔͨΊʹ͸ඞཁෆՄܽͳ$44Λ༻͍ͨ σβΠϯͷํ๏ͱπʔϧͷ঺հΛσϞΛ ަ͑ͳ͕ΒਐΊ͍͖ͯ·͢ɻ
   bшb㱬ኯˑ Ч
   ŗřŧŕ

9. Tools

10. Sublime Text http:/ /www.sublimetext.com/

11. Emmet http:/ /emmet.io/

12. Emmet LiveStyle http:/ /livestyle.emmet.io/

13. Sass http:/ /compass-style.org/ Compass ࠓ೔͸͓ٳΈ ]<▓▓>

14. Demo

15. border-radius .selector { border-radius: 10px; }
    
    
    
    
    
    
    
    
    
    
    
    
    
    

16. linear-gradient .selector { background: linear-gradient(#ff0000, #ee0000); }
    
    
    
    
    
    
    
    
    
    
    
    
    
    

17. box-shadow .selector { box-shadow: 0px 1px 20px rgba(0, 0, 0,

    0.6); }
    
    
    
    
    
    
    
    
    
    
    
    
    
    

18. flexbox .selector { display: flex; } .selector .box1{ flex: 1;

    order: 1; } .selector .box2{ flex: 1; order: 2; } .selector .box3{ flex: 1; order: 3; }
    
    
    
    
    
    
    
    
    
    
    
    
    
    .selector .box1 .box2 .box3

19. Web font <link href='http://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'> Hello World ! (Google

    Fonts) .selector { font-family: 'Alex Brush', cursive; }

20. text-shadow .selector { text-shadow: 0px 0px 25px rgba(255, 255, 255,

    1); } Hello World !

21. Media Queries @media screen and (min-width: 480px) .selector { background:

    #ff0000; } } @media screen and (max-width: 479px) .selector { background: #0072ff; } }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    display size > 480px display size < 479px

22. Media Queries + Flexbox @media screen and (max-width: 479px) {

    .selector { display: flex; flex-direction: column; } .selector .box1 { order: 1; } .selector .box2 { order: 3; } .selector .box3 { order: 2; } }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    display size > 480px display size < 479px .box1 .box2 .box3 .box1 .box3 .box2

23. Font Awesome http:/ /fortawesome.github.io/Font-Awesome/icons/

24. CSS3 Button Generator http:/ /css3button.net/

25. CSS 3.0 MAKER http:/ /www.css3maker.com/

26. Can I use... http:/ /caniuse.com/

27. Conclusion

28. Conclusion ✦ $44
    JT
    GVO ✦ σβΠφʔ͡Όͳͯ͘΋σβΠϯ͸ग़དྷΔ ✦ ࢴͱϖϯ
    
    DPEF ✦ ศརͳπʔϧ΍αʔϏεΛ׆༻͠·͠ΐ͏

    ✦ ΍Γա͗஫ҙ
    

29. Thanks! 
    ͞ ͘ Βͷ༦΂
    JO ࡸߐ

30. Photo Credits IUUQXXXqJDLSDPNQIPUPTNBSUJOT@OVOPNJHVFM
    IUUQXXXqJDLSDPNQIPUPTBGUBC Feedback 5PTIJBLJ
    4BTBLJ !TIJSPLVSP