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
2k
Other Decks in Design
See All in Design
Rayout Pattern 01
one0
0
1.5k
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
480
Dive Deep into Communication
yomtsu
0
220
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
200
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
290
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
660
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
180
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
150
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
920
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
420
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
170
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.7k
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Statistics for Hackers
jakevdp
797
220k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Why Our Code Smells
bkeepers
PRO
336
57k
KATA
mclloyd
29
14k
Git: the NoSQL Database
bkeepers
PRO
428
65k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
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