Suche senden
Hochladen
モダンなCSS設計パターンを考える
•
89 gefällt mir
•
16,019 views
拓樹 谷
Folgen
HTML5 Conference 2013 "モダンなCSS設計パターンを考える" の一部を改変したQCon Tokyo 2014 版スライドです。
Weniger lesen
Mehr lesen
Design
Melden
Teilen
Melden
Teilen
1 von 120
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
Beyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
Try Web Components
Try Web Components
拓樹 谷
Slow kinda sucks
Slow kinda sucks
Tim Wright
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Todd Zaki Warfel
Rapid Prototyping
Rapid Prototyping
Even Wu
Empfohlen
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
Beyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
Try Web Components
Try Web Components
拓樹 谷
Slow kinda sucks
Slow kinda sucks
Tim Wright
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Todd Zaki Warfel
Rapid Prototyping
Rapid Prototyping
Even Wu
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Todd Zaki Warfel
Html5 ux london
Html5 ux london
Todd Zaki Warfel
Html5 intro
Html5 intro
Wilfred Nas
Html5 & CSS overview
Html5 & CSS overview
Ivan Frantar
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
UXPA International
Você precisa aprender Web
Você precisa aprender Web
Jean Carlo Emer
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
Estelle Weyl
Xlrays online web tutorials
Xlrays online web tutorials
Yogesh Gupta
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
Myles Braithwaite
Html22
Html22
passkalilo
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
HTML5 & CSS3 Flag
HTML5 & CSS3 Flag
Christopher Schmitt
Slicing the web
Slicing the web
Mohamad Hemmat
Real World Web Standards
Real World Web Standards
gleddy
Guia de-estudio-2
Guia de-estudio-2
59vallebenito
Critical Rendering Path
Critical Rendering Path
BarbaraFellner1
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Esteve Castells
CSS framework By Palash
CSS framework By Palash
PalashBajpai
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
Erin M. Kidwell
Akka-chan's Survival Guide for the Streaming World
Akka-chan's Survival Guide for the Streaming World
Konrad Malawski
7 key recipes for data engineering
7 key recipes for data engineering
univalence
Weitere ähnliche Inhalte
Was ist angesagt?
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Todd Zaki Warfel
Html5 ux london
Html5 ux london
Todd Zaki Warfel
Html5 intro
Html5 intro
Wilfred Nas
Html5 & CSS overview
Html5 & CSS overview
Ivan Frantar
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
UXPA International
Você precisa aprender Web
Você precisa aprender Web
Jean Carlo Emer
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
Estelle Weyl
Xlrays online web tutorials
Xlrays online web tutorials
Yogesh Gupta
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
Myles Braithwaite
Html22
Html22
passkalilo
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
HTML5 & CSS3 Flag
HTML5 & CSS3 Flag
Christopher Schmitt
Slicing the web
Slicing the web
Mohamad Hemmat
Real World Web Standards
Real World Web Standards
gleddy
Guia de-estudio-2
Guia de-estudio-2
59vallebenito
Critical Rendering Path
Critical Rendering Path
BarbaraFellner1
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Esteve Castells
CSS framework By Palash
CSS framework By Palash
PalashBajpai
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
Erin M. Kidwell
Was ist angesagt?
(20)
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Html5 ux london
Html5 ux london
Html5 intro
Html5 intro
Html5 & CSS overview
Html5 & CSS overview
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Você precisa aprender Web
Você precisa aprender Web
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
Xlrays online web tutorials
Xlrays online web tutorials
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
Html22
Html22
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
HTML5 & CSS3 Flag
HTML5 & CSS3 Flag
Slicing the web
Slicing the web
Real World Web Standards
Real World Web Standards
Guia de-estudio-2
Guia de-estudio-2
Critical Rendering Path
Critical Rendering Path
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
CSS framework By Palash
CSS framework By Palash
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
Andere mochten auch
Akka-chan's Survival Guide for the Streaming World
Akka-chan's Survival Guide for the Streaming World
Konrad Malawski
7 key recipes for data engineering
7 key recipes for data engineering
univalence
Preparing for distributed system failures using akka #ScalaMatsuri
Preparing for distributed system failures using akka #ScalaMatsuri
TIS Inc.
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
schoowebcampus
WebデザイナーのためのGit勉強会 ~準備編~
WebデザイナーのためのGit勉強会 ~準備編~
Satoshi Ebisawa
ゆるふわCSS3
ゆるふわCSS3
Mitsuru Ogawa
WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門
Miho Ishida
エコなWebデザイナーになろう
エコなWebデザイナーになろう
Yasuhisa Hasegawa
軽量マークアップ言語で気楽にマークアップ
軽量マークアップ言語で気楽にマークアップ
Tomohiko Himura
WEBデザイナー3年目を終えて
WEBデザイナー3年目を終えて
fujita_ryo
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
Satoshi Kikuchi
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
Masaya Ando
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル
Tomoyuki Arasuna
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
Andere mochten auch
(20)
Akka-chan's Survival Guide for the Streaming World
Akka-chan's Survival Guide for the Streaming World
7 key recipes for data engineering
7 key recipes for data engineering
Preparing for distributed system failures using akka #ScalaMatsuri
Preparing for distributed system failures using akka #ScalaMatsuri
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WebデザイナーのためのGit勉強会 ~準備編~
WebデザイナーのためのGit勉強会 ~準備編~
ゆるふわCSS3
ゆるふわCSS3
WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門
エコなWebデザイナーになろう
エコなWebデザイナーになろう
軽量マークアップ言語で気楽にマークアップ
軽量マークアップ言語で気楽にマークアップ
WEBデザイナー3年目を終えて
WEBデザイナー3年目を終えて
CSS設計のお勉強
CSS設計のお勉強
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
CSS の歩き方
CSS の歩き方
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Ähnlich wie モダンなCSS設計パターンを考える
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Mario Heiderich
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
Erin M. Kidwell
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
raghavanp4
css.ppt
css.ppt
DakshPratapSingh1
css.ppt
css.ppt
Sana903754
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
TsungWei Hu
I pv6+at+caribbean+sector
I pv6+at+caribbean+sector
max Firmin
Introduction to web components
Introduction to web components
Marc Bächinger
IT1150CapstoneProjectFall2016TedCarr
IT1150CapstoneProjectFall2016TedCarr
Ted Carr
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniques
Wim Godden
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
MeetMagentoNY2014
Advanced CSS Troubleshooting
Advanced CSS Troubleshooting
Denise Jacobs
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Jenn Lukas
HTML CSS Best Practices
HTML CSS Best Practices
hoctudau
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
Denise Jacobs
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
Israel Blancas
关于 Html5 那点事
关于 Html5 那点事
Sofish Lin
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
Renato Iwashima
Class15
Class15
Jiyeon Lee
Ähnlich wie モダンなCSS設計パターンを考える
(20)
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
css.ppt
css.ppt
css.ppt
css.ppt
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
I pv6+at+caribbean+sector
I pv6+at+caribbean+sector
Introduction to web components
Introduction to web components
IT1150CapstoneProjectFall2016TedCarr
IT1150CapstoneProjectFall2016TedCarr
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniques
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
Advanced CSS Troubleshooting
Advanced CSS Troubleshooting
Making Links Magical Again with CSS
Making Links Magical Again with CSS
HTML CSS Best Practices
HTML CSS Best Practices
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
关于 Html5 那点事
关于 Html5 那点事
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
Class15
Class15
Mehr von 拓樹 谷
CSS設計の理想と現実
CSS設計の理想と現実
拓樹 谷
Why Sass?
Why Sass?
拓樹 谷
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
CSS Components
CSS Components
拓樹 谷
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
拓樹 谷
High Performance Webdesign
High Performance Webdesign
拓樹 谷
Thinking about CSS Architecture
Thinking about CSS Architecture
拓樹 谷
Mehr von 拓樹 谷
(7)
CSS設計の理想と現実
CSS設計の理想と現実
Why Sass?
Why Sass?
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
CSS Components
CSS Components
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
High Performance Webdesign
High Performance Webdesign
Thinking about CSS Architecture
Thinking about CSS Architecture
Kürzlich hochgeladen
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja Nehwal
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja Nehwal
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Paromita Roy
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
amitlee9823
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
amanda2495
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
kumaririma588
Tapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the Funnel
jen_giacalone
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
Delhi Call girls
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
Nitya salvi
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Delhi Call girls
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
amitlee9823
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja Nehwal
DESIGN THINKING in architecture- Introduction
DESIGN THINKING in architecture- Introduction
sivagami49
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
Call Girls in Nagpur High Profile
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
RitikaRoy32
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
BarusRa
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
home
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, Pune
LukeKholes
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Delhi Call girls
Kürzlich hochgeladen
(20)
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Tapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the Funnel
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
DESIGN THINKING in architecture- Introduction
DESIGN THINKING in architecture- Introduction
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, Pune
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
モダンなCSS設計パターンを考える
1.
QCon Tokyo 2014
Conference Modern CSS Architecture Hiroki Tani モダンなCSS設計パターンを考える
2.
Hiroki Tani Front-end Engineer CyberAgent,
Inc.
3.
?Why Architecture
4.
5.
6.
7.
#news h2 {
border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; }
8.
#news h2 {
border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } ! #faq .title { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; }
9.
#news h2 {
border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } ! #faq .title { border-bottom: 1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; } ! #service .feature .title { border: 1px solid black; padding: 0.5em; font-size: 16px; }
10.
.column_2 #inbox .list
{ ... } .column_3 #inbox .list { ... } .column_3 #inbox .list .name { ... } .column_3 #inbox .list .name p { ... } .column_3 #inbox .list .name.reply { ... } .column_3 #inbox .list .name.reply a { ... } body#top .column_3 #inbox .list.left { ... }
11.
!important
12.
13.
14.
15.
Goals of Better
CSS Architecture -Predictable -Reusable -Maintainable -Scalable http://article.enja.io/articles/css-architecture.html 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい
16.
Modular CSS
17.
OOCSS Nicole Sullivan https://github.com/stubbornella/oocss/wiki
18.
19.
20.
21.
22.
OOCSS -Separate structure and
skin -Separate container and content 構造と見た目の分離 コンテナとコンテンツの分離
23.
Media object
24.
<div class="media"> <div
class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
25.
<div class="media"> <div
class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
26.
<div class="media"> <div
class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
27.
.media { /*
Clearfix */ } .media-image { float: left; margin-right: 10px; } .media-image > img { display: block; } .media-body { overflow: hidden; }
28.
<div class="media skin-a">
<div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
29.
<div class="media skin-b">
<div class="media-image"> <img src="/img/seminar/15/tani.jpg"> </div> <div class="media-body"> <p>...</p> <ul> <li><a>...</a></li> </ul> <p>...</p> </div> </div>
30.
?How to build
modules
31.
It depends.
32.
Rule of Three ‘Refactoring’ http://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)
33.
3, 6
34.
3, 6, 9,
12, 15 ...
35.
3, 6, 12,
24, 48 ...
36.
3, 6, 9
37.
3, 6, 9,
12, 15 ...
38.
39.
.fontSize10 { font-size:
10px } .colorRed { color: red }
40.
<p class="fontSize18 colorRed"> 入力内容に誤りがあります。 </p>
41.
<p class="box radius10
fontSize18 colorRed"> 入力内容に誤りがあります。 </p>
42.
.fontSize18 { font-size:
18px }
43.
.fontSize18 { font-size:
18px } ! @media only screen and (max-width : 320px) { .fontSize18 { font-size: 14px } } ⚠
44.
.colorRed { color:
red }
45.
.colorRed { color:
orange; } ⚠
46.
.colorRed { color:
orange; /* あとで直す */ } ⚠
47.
⚠
48.
?How to maintain
modules
49.
SMACSS Jonathan Snook http://smacss.com/ja 日本語、あります
50.
SMACSS -Categorization -Naming Convention -Decoupling CSS
from HTML カテゴライズ 命名規則 HTMLとCSSの分離
51.
SMACSS Categories -Base -Layout -Module -State -Theme
52.
/* # Base
*/ body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
53.
/* # Layout
*/ #header { width: 960px; margin: auto; } .l-article { border: solid #CCC; border-width: 1px 0 0; } .l-grid { margin: 0; padding: 0; list-style-type: none; } .l-grid > li { display: inline-block; margin: 0 0 10px 10px; }
54.
/* # State
*/ .is-hidden { display: none; } .is-error { font-weight: bold; color: red; } .is-tab-active { border-bottom-color: transparent; }
55.
/* # Theme
*/ /* ## Spring Theme CSS */ .theme-header { background-image: url("/theme/spring/ header.png"); } .theme-border { 1px solid pink; }
56.
57.
Message-box http://cdpn.io/hKBkm
58.
<div class="msg"> <p>...</p> </div> .msg { display:
block; border: 1px solid #cccccc; border-radius: 8px; padding: 1em; background-color: #efefef; color: #333333; }
59.
60.
<div class="msg msg-error"> <p>...</p> </div> .msg
{ ... } .msg-error { border: 1px solid #c0392b; background-color: #fe9282; }
61.
62.
<div class="msg msg-success"> <p>...</p> </div> .msg
{ ... } .msg-success { border: 1px solid #27ae60; background-color: #99f3c9; }
63.
64.
<div class="msg msg-error"> <h2>...</h2> <p>...</p> </div>
65.
<div class="msg msg-error"> <h2>...</h2> <p>...</p> </div> .msg
h2 { font-size: inherit; font-weight: bold; } ! .msg p { margin-top: 0.6em; }
66.
67.
.msg h2 { font-size:
inherit; font-weight: bold; } ! .msg ul, .msg p { margin-top: 0.6em; } ⚠
68.
<div class="msg msg-error"> <h2
class="msg-title"> ... </h2> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
69.
.msg-title { font-size: inherit; font-weight:
bold; } ! .msg-body { margin-top: 0.6em; }
70.
<div class="msg msg-error"> <p
class="msg-title"> ... </p> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
71.
72.
<div class="msg msg-error"> <h2
class="msg-title"> <i class="msg-title-icon ico ico-label ico-alert"></i> ... </h2> <ul class="msg-body"> <li>...</li> <li>...</li> </ul> </div>
73.
.msg-title-icon { vertical-align: -0.3em; } ! .ico
{ display: inline-block; } ! .ico-alert { background-image: url(...); width: 24px; height: 24px; } ! .ico-label { margin-right: 0.3em; }
74.
%ico { display: inline-block; } ! %ico-alert
{ background-image: url(...); width: 24px; height: 24px; } ! %ico-label { margin-right: 0.3em; } ! .msg-error-icon { vertical-align: -0.3em; @extend %ico; @extend %ico-alert; @extend %ico-label; }
75.
76.
! .msg-error { border: 1px
solid #c0392b; background-color: #fe9282; }
77.
78.
.msg-title { font-size: inherit; font-weight:
bold; } .msg-body { margin-top: 0.6em; }
79.
.msg { ... } .msg-error { border:
1px solid #c0392b; background-color: #fe9282; } .msg-title { font-size: inherit; font-weight: bold; }
80.
BEM Yandex http://bem.info/
81.
BEM stands for
... -Block -Element -Modifier
82.
Block
83.
Element
84.
Modifier
85.
.block { ... } .block__element
{ ... } .block_modifier { ... } .block__element_modifier { ... }
86.
.nav { ... } .nav__item
{ ... } .nav_segmented { ... } .nav__item_segmented { ... }
87.
.nav { ... } .nav__item
{ ... } .nav--segmented { ... } .nav__item--segmented { ... } http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
88.
.msg { ... } .msg--error { border:
1px solid #c0392b; background-color: #fe9282; }
89.
.msg__title { font-size: inherit; font-weight:
bold; } .msg__body { margin-top: 0.6em; } .msg__title-icon { vertical-align: -0.3em; }
90.
MCSS -Base -Project -cosmetic http://operatino.github.io/MCSS/en/
91.
FLOCSS -Foundation -Layout -Object https://github.com/hiloki/flocss -Component -Project -Utility
92.
93.
Front-end Styleguide
94.
Starbucks Style Guide http://www.starbucks.com/static/reference/styleguide/
95.
MailChimp Pattern Library http://ux.mailchimp.com/patterns/
96.
Twitter Bootstrap http://getbootstrap.com
97.
A Pattern Apart http://patterns.alistapart.com/
98.
http://alistapart.com/blog/post/getting-started-with-pattern-libraries Code Example view
99.
http://alistapart.com/blog/post/getting-started-with-pattern-libraries Patchwork view
100.
Front-end Styleguide
101.
Front-end Styleguide Living
102.
103.
KSS http://warpspire.com/kss/styleguides/
104.
Kalei http://kaleistyleguide.com/
105.
StyleDocco http://jacobrask.github.io/styledocco/
106.
// // # 見出し // //
説明文を書きます。マークダウン形式です。 // // ``` // <button type="button" class="btn btn-default"> // ``` で囲んだ部分にデモのHTMLを記述します。 // </button> // ``` ! .btn { display: inline-block; ... &:hover, &:focus { color: @btn-default-color; text-decoration: none; } }
107.
$ styledocco -n
"ProjectName" css/ $ styledocco -n "ProjectName" -o "mydocs" $ styledocco -n "ProjectName" --preprocessor "lessc" less/
108.
http://d.pr/v/46BF
109.
110.
⚏🎬 👤👤 ⚏🎬 👤 Building
Pages Systems
111.
Styleguide Driven Development http://www.stubbornella.org/content/2014/04/09/style-guide-driven-development/
112.
Developer vs Designer
?
113.
⚏🎬 👤👤
114.
Developer with Designer
115.
Best Practice
116.
Best Practices
117.
どんなに多くの人が貢献したとしても どのコードも一人で書いたようにする https://github.com/necolas/idiomatic-css - Idiomatic CSS All
code in any code-base should look like a single person typed it, even when many people are contributing to it. “ ”
118.
壊れない完璧な設計を求めるのではなく 壊れたときに勇気をもって修復できる設計を “ ” - Anonymous
119.
Thanks. - twitter.com/hiloki - inkdesign.jp -
slideshare.net/hiloki
120.
Photo credit - http://www.flickr.com/photos/bpotstra/3490333174/sizes/l/ -
http://www.flickr.com/photos/bettybroadbent/3704523854/sizes/o/ - http://www.flickr.com/photos/drewmaughan/8209503226/sizes/l/ - http://www.flickr.com/photos/biodork/6849406792/ - http://www.flickr.com/photos/43266097@N03/9444574320/sizes/l/ - http://www.flickr.com/photos/90585146@N08/8234225693/sizes/l/ - http://www.flickr.com/photos/lwr/6778863776/sizes/l/ - http://www.flickr.com/photos/jezpage/4696962046/ - http://www.flickr.com/photos/april-mo/8485249298/sizes/l/ - http://www.flickr.com/photos/4st4roth/2366615948/ - http://www.flickr.com/photos/sharman/4570412801/sizes/l/ - http://www.flickr.com/photos/kaptainkobold/3771497484/ - http://www.flickr.com/photos/laurie_pink/2549598674/sizes/l/ - http://www.flickr.com/photos/dansdata/3266946102/ - http://www.flickr.com/photos/ochre_jelly/6839227477/sizes/l/ - http://www.flickr.com/photos/in-duce/2232109985/sizes/o/ - http://www.flickr.com/photos/pgoyette/5911926699/sizes/z/ - http://www.flickr.com/photos/conradoplg/10091603396/sizes/l/ - http://www.flickr.com/photos/kaptainkobold/4441509147/sizes/l/
Jetzt herunterladen