SlideShare a Scribd company logo
1 of 17
Download to read offline
How to Win the Heart of CSS Boys
twitter: @hiloki
Blog: inkdesign.jp
Hiroki Tani
JavaScript HTML/CSSB
$('.setting-profile .save-button')	
	 .on('click', function(e){	
	 	 ... 	
});
S
T
<div class="setting-profile">	
...	
<button class="save-button">	
Save!	
</button>	
</div>
<div class="profile">	
...	
<button class="profile__save-button">	
Save!	
</button>	
</div>	
S
T
$('.js-save-profile')	
	 .on('click', function(e){	
	 	 ... 	
});
Q
B
.js-save-profile {	
...	
}
R
c
.js-save-profile {	
...	
}
<div class="setting-profile">	
...	
<button class="save-button js-save-profile">	
Save!	
</button>	
</div>
<div class="profile">	
...	
<button class="profile__save-button	
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 js-save-profile">	
Save!	
</button>	
</div>	
Q
B
$('.js-close').on('click', function(){	
	 	 $(this).parent().parent().parent()	
	 	 	 .hide();	
});
S
T
$('.js-close').on('click', function(){	
	 	 $(this).closest('.js-container')	
.hide();	
});
Q
B
$('.register-button').css({	
'opacity': '0.5',	
‘background-color': '#ccc'	
});
S
T
$('.register-button')	
.addClass(‘is-disabled');
Q
B
B9
Thanks
Z
twitter: @hiloki
Blog: inkdesign.jp
Hiroki Tani
Cover Photo: www.flickr.com/photos/25969014@N06/6930963721/

More Related Content

What's hot

Crea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPressCrea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPressSkillsAndMore
 
jQuery & jQuery Mobile
jQuery & jQuery MobilejQuery & jQuery Mobile
jQuery & jQuery MobileMohammad Raju
 
Code blogtangcan
Code blogtangcanCode blogtangcan
Code blogtangcanQuyên Lê
 
Programación Nativa de un CRUD
Programación Nativa de un CRUD Programación Nativa de un CRUD
Programación Nativa de un CRUD FUNDET ECUADOR
 
J query aula01
J query aula01J query aula01
J query aula01Suissa
 
Un juego creado en php
Un juego creado en phpUn juego creado en php
Un juego creado en phpErwin Lobo
 
Aplikasi Rich Internet HTML5 & CSS3 Developer Mozilla (Kelompok 3)
Aplikasi Rich Internet HTML5 & CSS3 Developer Mozilla (Kelompok 3)Aplikasi Rich Internet HTML5 & CSS3 Developer Mozilla (Kelompok 3)
Aplikasi Rich Internet HTML5 & CSS3 Developer Mozilla (Kelompok 3)Ade Shopyan
 
Patricia Ann Wigginton Medical Resume
Patricia Ann Wigginton Medical ResumePatricia Ann Wigginton Medical Resume
Patricia Ann Wigginton Medical ResumePatricia Wigginton
 
水生态基准方法学概述及建立我国水生态基准的探讨 -生态毒理学报(第一作者)
水生态基准方法学概述及建立我国水生态基准的探讨 -生态毒理学报(第一作者)水生态基准方法学概述及建立我国水生态基准的探讨 -生态毒理学报(第一作者)
水生态基准方法学概述及建立我国水生态基准的探讨 -生态毒理学报(第一作者)leongaber
 
box model
box modelbox model
box modeljay li
 
Presentación WP Versión Keynote
Presentación WP Versión KeynotePresentación WP Versión Keynote
Presentación WP Versión KeynoteJosé Fonseca
 
JS for Rails developers
JS for Rails developersJS for Rails developers
JS for Rails developersTimur Vafin
 
Intro to jQuery UI
Intro to jQuery UIIntro to jQuery UI
Intro to jQuery UIappendTo
 
Facebook app API Vs2.0
Facebook app API Vs2.0Facebook app API Vs2.0
Facebook app API Vs2.0Felix Rivas
 
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...irwinvifxcfesre
 

What's hot (20)

Crea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPressCrea un tema compatibile con le ultime novità WordPress
Crea un tema compatibile con le ultime novità WordPress
 
Macdom html preprocesor
Macdom html preprocesorMacdom html preprocesor
Macdom html preprocesor
 
jQuery & jQuery Mobile
jQuery & jQuery MobilejQuery & jQuery Mobile
jQuery & jQuery Mobile
 
Code blogtangcan
Code blogtangcanCode blogtangcan
Code blogtangcan
 
Programación Nativa de un CRUD
Programación Nativa de un CRUD Programación Nativa de un CRUD
Programación Nativa de un CRUD
 
DOCUMENTACION PAGINA WEB PHP
DOCUMENTACION PAGINA WEB PHPDOCUMENTACION PAGINA WEB PHP
DOCUMENTACION PAGINA WEB PHP
 
Jogos 3.0
Jogos 3.0Jogos 3.0
Jogos 3.0
 
J query aula01
J query aula01J query aula01
J query aula01
 
Un juego creado en php
Un juego creado en phpUn juego creado en php
Un juego creado en php
 
Aplikasi Rich Internet HTML5 & CSS3 Developer Mozilla (Kelompok 3)
Aplikasi Rich Internet HTML5 & CSS3 Developer Mozilla (Kelompok 3)Aplikasi Rich Internet HTML5 & CSS3 Developer Mozilla (Kelompok 3)
Aplikasi Rich Internet HTML5 & CSS3 Developer Mozilla (Kelompok 3)
 
jQuery Tutorial
jQuery TutorialjQuery Tutorial
jQuery Tutorial
 
Patricia Ann Wigginton Medical Resume
Patricia Ann Wigginton Medical ResumePatricia Ann Wigginton Medical Resume
Patricia Ann Wigginton Medical Resume
 
水生态基准方法学概述及建立我国水生态基准的探讨 -生态毒理学报(第一作者)
水生态基准方法学概述及建立我国水生态基准的探讨 -生态毒理学报(第一作者)水生态基准方法学概述及建立我国水生态基准的探讨 -生态毒理学报(第一作者)
水生态基准方法学概述及建立我国水生态基准的探讨 -生态毒理学报(第一作者)
 
box model
box modelbox model
box model
 
CSS 101
CSS 101CSS 101
CSS 101
 
Presentación WP Versión Keynote
Presentación WP Versión KeynotePresentación WP Versión Keynote
Presentación WP Versión Keynote
 
JS for Rails developers
JS for Rails developersJS for Rails developers
JS for Rails developers
 
Intro to jQuery UI
Intro to jQuery UIIntro to jQuery UI
Intro to jQuery UI
 
Facebook app API Vs2.0
Facebook app API Vs2.0Facebook app API Vs2.0
Facebook app API Vs2.0
 
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
Peek inside the fantastical Ukrainian Village home and studio of artists Jare...
 

Viewers also liked

CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書拓樹 谷
 
Locatieve Diensten Context 12-1-2010
Locatieve Diensten Context 12-1-2010Locatieve Diensten Context 12-1-2010
Locatieve Diensten Context 12-1-2010Fabrique
 
Scrum: Fast, furious & effective
Scrum: Fast, furious & effectiveScrum: Fast, furious & effective
Scrum: Fast, furious & effectiveFabrique
 
Business models | Wikilogia Bootcamp for SWDamascus
Business models | Wikilogia Bootcamp for SWDamascusBusiness models | Wikilogia Bootcamp for SWDamascus
Business models | Wikilogia Bootcamp for SWDamascusWikilogia
 
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNaganoカスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNaganoHiroshi Urabe
 
Cheat Your Way With UX
Cheat Your Way With UXCheat Your Way With UX
Cheat Your Way With UXstephtroeth
 
LESS is More
LESS is MoreLESS is More
LESS is Morejsmith92
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来masaaki komori
 
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化masaaki komori
 
Agile for the rest of us
Agile for the rest of usAgile for the rest of us
Agile for the rest of usAnders Ramsay
 

Viewers also liked (13)

CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
 
Hartman chapters 1 4 dec6
Hartman chapters 1 4 dec6Hartman chapters 1 4 dec6
Hartman chapters 1 4 dec6
 
Locatieve Diensten Context 12-1-2010
Locatieve Diensten Context 12-1-2010Locatieve Diensten Context 12-1-2010
Locatieve Diensten Context 12-1-2010
 
Scrum: Fast, furious & effective
Scrum: Fast, furious & effectiveScrum: Fast, furious & effective
Scrum: Fast, furious & effective
 
Business models | Wikilogia Bootcamp for SWDamascus
Business models | Wikilogia Bootcamp for SWDamascusBusiness models | Wikilogia Bootcamp for SWDamascus
Business models | Wikilogia Bootcamp for SWDamascus
 
Discov uga
Discov ugaDiscov uga
Discov uga
 
Types紹介
Types紹介Types紹介
Types紹介
 
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNaganoカスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
 
Cheat Your Way With UX
Cheat Your Way With UXCheat Your Way With UX
Cheat Your Way With UX
 
LESS is More
LESS is MoreLESS is More
LESS is More
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来
 
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
 
Agile for the rest of us
Agile for the rest of usAgile for the rest of us
Agile for the rest of us