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
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
290
AIで加速するアクセシビリティのこれから
magi1125
4
670
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
280
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
310
#Dubois Challenge 2025: Economics
ajstarks
1
170
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
310
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
2
1.2k
mento Design Team Portfolio
mento0fficial
1
690
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
430
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
400
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.4k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Optimizing for Happiness
mojombo
379
70k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Docker and Python
trallard
46
3.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Side Projects
sachag
455
43k
Typedesign – Prime Four
hannesfritz
42
2.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
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