脱残念Webデザイン CSS編

2014年2月6日に開催された「第13回 さくらの夕べ in 鯖江」で使用したスライドです。

Transcript

1. ࢒೦8FCσβΠ
   ϯ$44ฤ
   ୤
   ͞
   ͘
   Βͷ༦΂JO ࡸߐ
   
   5PTIJBLJ4BTBLJ 8FC%FTJHOFSBU"--$0//&$5 *OD
   
   

   View Slide

2. 5PTIJBLJ4BTBLJ
   8FC%FTJHOFSBU"--$0//&$5 *OD
   !TIJSPLVSP
   

   View Slide

3. Web Design
   

   View Slide

4. HTML
   CSS
   JavaScript ػೳ
   ߏ଄
   ૷০
   

   View Slide

5. CSS is fun!
   

   View Slide

6. http:/
   /gcss.info/
   

   View Slide

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

   View Slide

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

   View Slide

9. Tools
   

   View Slide

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

    View Slide

11. Emmet
    http:/
    /emmet.io/
    

    View Slide

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

    View Slide

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

    View Slide

14. Demo
    

    View Slide

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

    View Slide

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

    View Slide

17. box-shadow
    .selector {
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.6);
    }
    
    

    View Slide

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
    

    View Slide

19. Web font
    rel='stylesheet' type='text/css'>
    Hello World !
    (Google Fonts)
    .selector {
    font-family: 'Alex Brush', cursive;
    }
    

    View Slide

20. text-shadow
    .selector {
    text-shadow: 0px 0px 25px rgba(255, 255, 255, 1);
    }
    Hello World !
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. Conclusion
    

    View Slide

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

    View Slide

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

    View Slide

30. Photo Credits
    IUUQXXXqJDLSDPNQIPUPTNBSUJOT@OVOPNJHVFM
    IUUQXXXqJDLSDPNQIPUPTBGUBC
    Feedback
    5PTIJBLJ4BTBLJ
    !TIJSPLVSP
    

    View Slide