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
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
830
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
200
How to go from research data to insights?
mastervicedesign
0
210
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.8k
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
530
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
250
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
170
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1k
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
450
Карта реализации историй — убийца USM
ashapiro
0
320
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
110
Featured
See All Featured
Done Done
chrislema
182
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
900
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Navigating Team Friction
lara
183
15k
Designing for humans not robots
tammielis
250
25k
Bash Introduction
62gerente
610
210k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Music & Morning Musume
bryan
46
6.3k
Become a Pro
speakerdeck
PRO
26
5.1k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
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