2014年2月6日に開催された「第13回 さくらの夕べ in 鯖江」で使用したスライドです。
೦8FCσβΠϯ$44ฤ͘͞Βͷ༦JO ࡸߐ5PTIJBLJ4BTBLJ 8FC%FTJHOFSBU"--$0//&$5 *OD
View Slide
5PTIJBLJ4BTBLJ8FC%FTJHOFSBU"--$0//&$5 *OD!TIJSPLVSP
Web Design
HTMLCSSJavaScript ػೳߏ০
CSS is fun!
http://gcss.info/
$44͔Θ͍͍Α$44ЧAŰōŰō
͓͍ͱ͍ͯɻຊηογϣϯͰɺ8FCϖʔδͷݟӫ͑ΛΑ͘͢ΔͨΊʹඞཁෆՄܽͳ$44Λ༻͍ͨσβΠϯͷํ๏ͱπʔϧͷհΛσϞΛަ͑ͳ͕ΒਐΊ͍͖ͯ·͢ɻbшb㱬ኯˑЧŗřŧŕ
Tools
Sublime Texthttp://www.sublimetext.com/
Emmethttp://emmet.io/
Emmet LiveStylehttp://livestyle.emmet.io/
Sasshttp://compass-style.org/Compassࠓ͓ٳΈ]<▓▓>
Demo
border-radius.selector {border-radius: 10px;}
linear-gradient.selector {background: linear-gradient(#ff0000, #ee0000);}
box-shadow.selector {box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.6);}
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
Web fontrel='stylesheet' type='text/css'>Hello World !(Google Fonts).selector {font-family: 'Alex Brush', cursive;}
text-shadow.selector {text-shadow: 0px 0px 25px rgba(255, 255, 255, 1);}Hello World !
Media Queries@media screen and (min-width: 480px).selector {background: #ff0000;}}@media screen and (max-width: 479px).selector {background: #0072ff;}}display size > 480pxdisplay size < 479px
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 > 480pxdisplay size < 479px.box1.box2.box3.box1.box3.box2
Font Awesomehttp://fortawesome.github.io/Font-Awesome/icons/
CSS3 Button Generatorhttp://css3button.net/
CSS 3.0 MAKERhttp://www.css3maker.com/
Can I use...http://caniuse.com/
Conclusion
Conclusion✦ $44JTGVO✦ σβΠφʔ͡Όͳͯ͘σβΠϯग़དྷΔ✦ ࢴͱϖϯDPEF✦ ศརͳπʔϧαʔϏεΛ׆༻͠·͠ΐ͏✦ Γա͗ҙ
Thanks!͘͞Βͷ༦JO ࡸߐ
Photo Credits[email protected]IUUQXXXqJDLSDPNQIPUPTBGUBCFeedback5PTIJBLJ4BTBLJ!TIJSPLVSP