脱残念Webデザイン CSS編

Abebddb79fcf66d49191fed9332039e7?s=47 Toshiaki Sasaki
February 06, 2014

脱残念Webデザイン CSS編

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

Abebddb79fcf66d49191fed9332039e7?s=128

Toshiaki Sasaki

February 06, 2014
Tweet

Transcript

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

    *OD
  2. 5PTIJBLJ4BTBLJ 8FC%FTJHOFSBU"--$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 ✦ $44JTGVO ✦ σβΠφʔ͡Όͳͯ͘΋σβΠϯ͸ग़དྷΔ ✦ ࢴͱϖϯ DPEF ✦ ศརͳπʔϧ΍αʔϏεΛ׆༻͠·͠ΐ͏

    ✦ ΍Γա͗஫ҙ
  29. Thanks!  ͞ ͘ Βͷ༦΂JO ࡸߐ

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