Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
脱残念Webデザイン CSS編
Search
Toshiaki Sasaki
February 06, 2014
Design
4
1.6k
脱残念Webデザイン CSS編
2014年2月6日に開催された「第13回 さくらの夕べ in 鯖江」で使用したスライドです。
Toshiaki Sasaki
February 06, 2014
Tweet
Share
More Decks by Toshiaki Sasaki
See All by Toshiaki Sasaki
Let Fast Web Developing DocPad & Ghostlab
shirokuro331
2
6.7k
Hello DocPad
shirokuro331
2
2k
Sassと仲良くお付き合い
shirokuro331
4
1.9k
Other Decks in Design
See All in Design
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
5
1.6k
太田博三(@usagisan2020)
otanet
0
200
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
340
Yahoo Newsletter Clicker Template
xuechunwu
0
300
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.6k
How to go from research data to insights?
mastervicedesign
0
180
Карта реализации историй — убийца USM
ashapiro
0
260
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.8k
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
4
260
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
310
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
150
Featured
See All Featured
Being A Developer After 40
akosma
87
590k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Scaling GitHub
holman
458
140k
Docker and Python
trallard
42
3.1k
Producing Creativity
orderedlist
PRO
341
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Writing Fast Ruby
sferik
628
61k
Speed Design
sergeychernyshev
25
670
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
We Have a Design System, Now What?
morganepeng
51
7.3k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Optimising Largest Contentful Paint
csswizardry
33
3k
Transcript
೦8FCσβΠ ϯ$44ฤ ͞ ͘ Βͷ༦JO ࡸߐ 5PTIJBLJ4BTBLJ 8FC%FTJHOFSBU"--$0//&$5
*OD
5PTIJBLJ4BTBLJ 8FC%FTJHOFSBU"--$0//&$5 *OD !TIJSPLVSP
Web Design
HTML CSS JavaScript ػೳ ߏ ০
CSS is fun!
http:/ /gcss.info/
$44͔Θ͍͍Α$44 ЧA ŰōŰō
͓͍ͱ͍ͯɻ ຊηογϣϯͰɺ8FCϖʔδͷݟӫ͑Λ Α͘͢ΔͨΊʹඞཁෆՄܽͳ$44Λ༻͍ͨ σβΠϯͷํ๏ͱπʔϧͷհΛσϞΛ ަ͑ͳ͕ΒਐΊ͍͖ͯ·͢ɻ bшb㱬ኯˑ Ч ŗřŧŕ
Tools
Sublime Text http:/ /www.sublimetext.com/
Emmet http:/ /emmet.io/
Emmet LiveStyle http:/ /livestyle.emmet.io/
Sass http:/ /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 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; }
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 > 480px display 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 > 480px display size < 479px .box1 .box2 .box3 .box1 .box3 .box2
Font Awesome http:/ /fortawesome.github.io/Font-Awesome/icons/
CSS3 Button Generator http:/ /css3button.net/
CSS 3.0 MAKER http:/ /www.css3maker.com/
Can I use... http:/ /caniuse.com/
Conclusion
Conclusion ✦ $44JTGVO ✦ σβΠφʔ͡Όͳͯ͘σβΠϯग़དྷΔ ✦ ࢴͱϖϯ DPEF ✦ ศརͳπʔϧαʔϏεΛ׆༻͠·͠ΐ͏
✦ Γա͗ҙ
Thanks! ͞ ͘ Βͷ༦JO ࡸߐ
Photo Credits IUUQXXXqJDLSDPNQIPUPTNBSUJOT@OVOPNJHVFM IUUQXXXqJDLSDPNQIPUPTBGUBC Feedback 5PTIJBLJ4BTBLJ !TIJSPLVSP