脱残念Webデザイン CSS編

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

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