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.8k
Hello DocPad
shirokuro331
2
2.1k
Sassと仲良くお付き合い
shirokuro331
4
2k
Other Decks in Design
See All in Design
Installing and Running decksh/pdfdeck
ajstarks
1
840
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.5k
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
710
mento Design Team Portfolio
mento0fficial
1
610
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
UXデザインはなぜ定着しないのか?
designstudiopartners
0
930
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.2k
portfolio.pdf
onof003
0
160
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
390
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
940
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.5k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Optimizing for Happiness
mojombo
379
70k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Unsuck your backbone
ammeep
671
58k
What's in a price? How to price your products and services
michaelherold
246
12k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.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