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 full-size slide

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

    View full-size slide

  3. HTML
    CSS
    JavaScript ػೳ
    ߏ଄
    ૷০

    View full-size slide

  4. http:/
    /gcss.info/

    View full-size slide

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

    View full-size slide

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

    Ч
    ŗřŧŕ

    View full-size slide

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

    View full-size slide

  8. Emmet
    http:/
    /emmet.io/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. Thanks!

    ͞
    ͘
    Βͷ༦΂JO ࡸߐ

    View full-size slide

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

    View full-size slide