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.5k
脱残念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.6k
Hello DocPad
shirokuro331
2
2k
Sassと仲良くお付き合い
shirokuro331
4
1.9k
Other Decks in Design
See All in Design
Arborea Art Book
thebogheart
0
110
Commune_Brand_Guideline_JA
commune
1
130
Yahoo Newsletter Clicker Template
xuechunwu
0
280
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
110
デザイナー向け会社紹介資料(採用資料)
dreamarts
0
300
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
2
550
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2.2k
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
370
Haruki_Konaka_Portforio.pdf
haruki556
0
120
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
360
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
340
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
0
180
Featured
See All Featured
Atom: Resistance is Futile
akmur
261
25k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Optimizing for Happiness
mojombo
375
69k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Become a Pro
speakerdeck
PRO
24
4.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
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