SlideShare a Scribd company logo
1 of 128
Download to read offline
モダンなCSS設計パターンを考える

Modern CSS Architecture
Hiroki Tani

HTML5 Conference 2013
Hiroki Tani
CyberAgent, Inc.
http://frontrend.github.io/

Frontrend in Sapporo
Frontrend in Fukuoka

2013年12月7日
2013年1月
Why Architecture ?















#news h2 {
	 border-bottom: 1px solid black;
	 padding: 1em 0.5em;
	 font-size: 18px;
	 font-weight: bold;
}
#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;
}
#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;
}
.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

}
... }
{ ... }
{ ... }
!important
Goals of Better CSS Architecture

- Predictable
- Reusable
- Maintainable
- Scalable

予測しやすい

再利用しやすい
保守しやすい

拡張しやすい

http://enja.studiomohawk.com/2013/07/06/css-architecture/
Modular CSS
OOCSS
Nicole Sullivan

https://github.com/stubbornella/oocss/wiki
OOCSS
- Separate structure and skin
構造と見た目の分離

- Separate container and content
コンテナとコンテンツの分離
Media object
<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>
<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>
<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>
.media {
	 /* Clearfix */
}
.media-image {
	 float: left;
	 margin-right: 10px;
}
.media-image 	 img {
>
	 display: block;
}
.media-body {
	 overflow: hidden;
}
<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>
<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>
How to build modules ?
It depends.
Rule of Three
‘Refactoring’

http://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)
3, 6
3, 6, 9, 12, 15 ...
3, 6, 12, 24, 48 ...
3, 6, 9
3, 6, 9, 12, 15 ...
.fontSize10 {
	 font-size: 10px
}
.colorRed {
	 color: red
}
<p class="fontSize18 colorRed">
入力内容に誤りがあります。
</p>
<p class="box radius10 fontSize18 colorRed">
入力内容に誤りがあります。
</p>
.colorRed {
	 color: red
}
.colorRed {
	 color: orange;
}

⚠
.colorRed {
	 color: orange; /* あとで直す */
}

⚠
.fontSize18 {
	 font-size: 18px
}
.fontSize18 {
	 font-size: 18px
}
@media only screen and (max-width : 320px) {
	 .fontSize18 {
	 	 font-size: 14px
	 }
}

⚠
.radius6 {
	 border-radius:
}
.radius10 {
	 border-radius:
}
.radius12 {
	 border-radius:
}
.radius14 {
	 border-radius:
}

6px;

10px;

12px;

14px;

⚠
How to maintain modules ?
SMACSS
Jonathan Snook

http://smacss.com/ja
日本語、あります

SMACSS
Jonathan Snook

http://smacss.com/ja
SMACSS
- Categorization
カテゴライズ

- Naming Convention
命名規則

- Decoupling CSS from HTML
HTMLとCSSの分離
SMACSS Categories
- Base
- Layout
- State
- Theme
- Module
/* # Base */
body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}
/* # 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;
}
/* # State */
.is-hidden {
	 display: none;
}
.is-error {
	 font-weight: bold;
	 color: red;
}
.is-tab-active {
	 border-bottom-color: transparent;
}
/* # Theme */
/* ## Spring Theme CSS */
.theme-header {
	 background-image: url("/theme/spring/
header.png");
}
.theme-border {
	 1px solid pink;	
}
Message-box
http://cdpn.io/hKBkm
<div class="msg">
<p>...</p>
</div>
.msg {
display: block;
border: 1px solid #cccccc;
border-radius: 8px;
padding: 1em;
background-color: #efefef;
color: #333333;
}
<div class="msg msg-error">
<p>...</p>
</div>
.msg {
...
}
.msg-error {
border: 1px solid #c0392b;
background-color: #fe9282;
}
<div class="msg msg-success">
<p>...</p>
</div>
.msg {
...
}
.msg-success {
border: 1px solid #27ae60;
background-color: #99f3c9;
}
<div class="msg msg-error">
<h2>...</h2>
<p>...</p>
</div>
<div class="msg msg-error">
<h2>...</h2>
<p>...</p>
</div>
.msg h2 {
font-size: inherit;
font-weight: bold;
}
.msg p {
margin-top: 0.6em;
}
.msg h2 {
font-size: inherit;
font-weight: bold;
}
.msg ul,
.msg p {
margin-top: 0.6em;
}
.msg h2 {
font-size: inherit;
font-weight: bold;
}
.msg ul,
.msg p {
margin-top: 0.6em;
}

⚠
<div class="msg msg-error">
<h2 class="msg-title">
...
</h2>
<ul class="msg-body">
<li>...</li>
<li>...</li>
</ul>
</div>
.msg-title {
font-size: inherit;
font-weight: bold;
}
.msg-body {
margin-top: 0.6em;
}
<div class="msg msg-error">
<p class="msg-title">
...
</p>
<ul class="msg-body">
<li>...</li>
<li>...</li>
</ul>
</div>
<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>
.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;
}
%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;
}

.msg-error {
border: 1px solid #c0392b;
background-color: #fe9282;
}

.msg-title {
font-size: inherit;
font-weight: bold;
}
.msg-body {
margin-top: 0.6em;
}
.msg {
...
}
.msg-error {
border: 1px solid #c0392b;
background-color: #fe9282;
}
.msg-title {
font-size: inherit;
font-weight: bold;
}
BEM
Yandex

http://bem.info/
BEM stands for ...
- Block
- Element
- Modifier
Block
Element
Modifier
.block {
	 ...
}
.block__element {
	 ...
}
.block_modifier {
	 ...
}
.block__element_modifier {
	 ...
}
.nav {
	 ...
}
.nav__item {
	 ...
}
.nav_segmented {
	 ...
}
.nav__item_segmented {
	 ...
}
.nav {
	 ...
}
.nav__item {
	 ...
}
.nav--segmented {
	 ...
}
.nav__item--segmented {
	 ...
}
http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
.msg {
...
}
.msg--error {
border: 1px solid #c0392b;
background-color: #fe9282;
}
.msg__title {
font-size: inherit;
font-weight: bold;
}
.msg__body {
margin-top: 0.6em;
}
.msg__title-icon {
vertical-align: -0.3em;
}
MCSS
- Base
- Project
- cosmetic

http://operatino.github.io/MCSS/en/
inuit.css
- Base
- Generic
- Objects

http://inuitcss.com/
SUIT
- Utilities
- Components

https://github.com/suitcss/suit
Front-end Styleguide
Starbucks Style Guide
http://www.starbucks.com/static/reference/styleguide/
Pattern Primer
http://patternprimer.adactio.com/
MailChimp Pattern Library
http://ux.mailchimp.com/patterns/
Twitter Bootstrap
http://getbootstrap.com
KSS
http://warpspire.com/kss/styleguides/
Kalei
http://kaleistyleguide.com/
StyleDocco
http://jacobrask.github.io/styledocco/
//
// # 見出し
//
// 説明文を書きます。マークダウン形式です。
//
// ```
// <button type="button" class="btn btn-default">
//
``` で囲んだ部分にデモのHTMLを記述します。
// </button>
// ```
.btn {
display: inline-block;
...
&:hover,
&:focus {
color: @btn-default-color;
text-decoration: none;
}
}
$ styledocco -n "ProjectName" css/
$ styledocco -n "ProjectName" -o "mydocs"
$ styledocco -n "ProjectName" --preprocessor "lessc" less/
Building Pages

🎬⚏
👤 👤


Building Pages

🎬⚏
👤 👤



🎬⚏






👤
Building Pages
Systems



🎬⚏



🎬⚏
👤 👤





👤
Developer vs Designer ?
🎬⚏
👤 👤


🎬⚏
👤 👤






🎬⚏
👤 👤







🎬⚏
👤 👤





 

🎬⚏
👤 👤





 








🎬⚏
👤 👤

 










🎬⚏
👤 👤

 


Developer with Designer
Best Practice
Best Practices
“

どんなに多くの人が貢献したとしても
どのコードも一人で書いたようにする
All code in any code-base should look like a single person
typed it, even when many people are contributing to it.

”
- Idiomatic CSS

https://github.com/necolas/idiomatic-css
“

壊れない完璧な設計を求めるのではなく
壊れたときに勇気をもって修復できる設計を
- Anonymous

”
Thanks.
- twitter.com/hiloki
- inkdesign.jp
- html5experts.jp/hiloki/
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/

More Related Content

What's hot

The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)Stephen Hay
 
I pv6+at+caribbean+sector
I pv6+at+caribbean+sectorI pv6+at+caribbean+sector
I pv6+at+caribbean+sectormax Firmin
 
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleClass 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleErin M. Kidwell
 
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Esteve Castells
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone InteractivityEric Steele
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingMyles Braithwaite
 
Nanoformats
NanoformatsNanoformats
Nanoformatsrozario
 
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Patrick Lauke
 
Espacios en-tu-vida
Espacios en-tu-vidaEspacios en-tu-vida
Espacios en-tu-vidaepacheco1
 
10 Things Web Designers tend to forget when doing SEO
10 Things Web Designers tend to forget when doing SEO10 Things Web Designers tend to forget when doing SEO
10 Things Web Designers tend to forget when doing SEOTimon Hartung
 
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO  - SMX 201410 Things Webdesigners tend to do Wrong in SEO  - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014Timon Hartung
 

What's hot (20)

The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
 
Dorothea orem-theory
Dorothea orem-theoryDorothea orem-theory
Dorothea orem-theory
 
I pv6+at+caribbean+sector
I pv6+at+caribbean+sectorI pv6+at+caribbean+sector
I pv6+at+caribbean+sector
 
Html22
Html22Html22
Html22
 
Guia de-estudio-2
Guia de-estudio-2Guia de-estudio-2
Guia de-estudio-2
 
Class 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddleClass 4 handout w css3 using j fiddle
Class 4 handout w css3 using j fiddle
 
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
Advanced Web Scraping or How To Make Internet Your Database #seoplus2018
 
Haml, Sass & Compass
Haml, Sass & CompassHaml, Sass & Compass
Haml, Sass & Compass
 
A More Perfect Union with CSS
A More Perfect Union with CSSA More Perfect Union with CSS
A More Perfect Union with CSS
 
Capitulo 3-enegia-y-conservacion-de-masas
Capitulo 3-enegia-y-conservacion-de-masasCapitulo 3-enegia-y-conservacion-de-masas
Capitulo 3-enegia-y-conservacion-de-masas
 
Introducing YUI
Introducing YUIIntroducing YUI
Introducing YUI
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone Interactivity
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
 
WordCamp Bari 2019
WordCamp Bari 2019WordCamp Bari 2019
WordCamp Bari 2019
 
Nanoformats
NanoformatsNanoformats
Nanoformats
 
Hardcore HTML
Hardcore HTMLHardcore HTML
Hardcore HTML
 
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
 
Espacios en-tu-vida
Espacios en-tu-vidaEspacios en-tu-vida
Espacios en-tu-vida
 
10 Things Web Designers tend to forget when doing SEO
10 Things Web Designers tend to forget when doing SEO10 Things Web Designers tend to forget when doing SEO
10 Things Web Designers tend to forget when doing SEO
 
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO  - SMX 201410 Things Webdesigners tend to do Wrong in SEO  - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
 

Similar to モダンなCSS設計パターンを考える

Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersTsungWei Hu
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web componentsMarc Bächinger
 
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-...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
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesRenato Iwashima
 
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithRapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithUXPA International
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designErin M. Kidwell
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićMeetMagentoNY2014
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單偉格 高
 
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniquesWhen dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniquesWim Godden
 
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptHTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptraghavanp4
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practiceshoctudau
 
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015beyond tellerrand
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!Coulawrence
 
Polymer - El fin a tus problemas con el FrontEnd
Polymer - El fin a tus problemas con el FrontEndPolymer - El fin a tus problemas con el FrontEnd
Polymer - El fin a tus problemas con el FrontEndIsrael Blancas
 
Polytechnic 1.0 Granada
Polytechnic 1.0 GranadaPolytechnic 1.0 Granada
Polytechnic 1.0 GranadaIsrael Blancas
 

Similar to モダンなCSS設計パターンを考える (20)

Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web components
 
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-...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-...
 
Critical Rendering Path
Critical Rendering PathCritical Rendering Path
Critical Rendering Path
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
 
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithRapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
When dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniquesWhen dynamic becomes static - the next step in web caching techniques
When dynamic becomes static - the next step in web caching techniques
 
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptHTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
 
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
 
Polymer - El fin a tus problemas con el FrontEnd
Polymer - El fin a tus problemas con el FrontEndPolymer - El fin a tus problemas con el FrontEnd
Polymer - El fin a tus problemas con el FrontEnd
 
Polytechnic 1.0 Granada
Polytechnic 1.0 GranadaPolytechnic 1.0 Granada
Polytechnic 1.0 Granada
 

More from 拓樹 谷

CSS設計の理想と現実
CSS設計の理想と現実CSS設計の理想と現実
CSS設計の理想と現実拓樹 谷
 
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計拓樹 谷
 
CSS Components
CSS ComponentsCSS Components
CSS Components拓樹 谷
 
How to Win the Heart of CSS Boys
How to Win the Heart of CSS BoysHow to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys拓樹 谷
 
Thinking about CSS Architecture
Thinking about CSS ArchitectureThinking about CSS Architecture
Thinking about CSS Architecture拓樹 谷
 

More from 拓樹 谷 (6)

CSS設計の理想と現実
CSS設計の理想と現実CSS設計の理想と現実
CSS設計の理想と現実
 
Why Sass?
Why Sass?Why Sass?
Why Sass?
 
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
 
CSS Components
CSS ComponentsCSS Components
CSS Components
 
How to Win the Heart of CSS Boys
How to Win the Heart of CSS BoysHow to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
 
Thinking about CSS Architecture
Thinking about CSS ArchitectureThinking about CSS Architecture
Thinking about CSS Architecture
 

Recently uploaded

The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 

Recently uploaded (20)

The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 

モダンなCSS設計パターンを考える