Upgrade to Pro — share decks privately, control downloads, hide ads and more …

脱残念Webデザイン CSS編

Toshiaki Sasaki
February 06, 2014

脱残念Webデザイン CSS編

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

Toshiaki Sasaki

February 06, 2014
Tweet

More Decks by Toshiaki Sasaki

Other Decks in Design

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
    [email protected]
    IUUQXXXqJDLSDPNQIPUPTBGUBC
    Feedback
    5PTIJBLJ4BTBLJ
    !TIJSPLVSP

    View Slide