CSS の歩き方

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

松戸WordPress部
2015年7月29日
の歩き方
写真AC
http://www.photo-ac.com/

名前　三柴誠一郎
出身　愛媛県
拠点　千葉県松戸市
特徴　絶望的に方向音痴
趣味　カメラ、旅、料理、滝めぐり
自己紹介
活動
松戸でWordPressに関するセミナーを運営
https://www.facebook.com/groups...

第１歩　最近の CSS について
第2歩　CSS の基本をおさらいしよう
第3歩　CSS の設計について
本日のアジェンダ

CSS 書くのって
大変じゃないですか？
写真素材ぱくたそ
https://www.pakutaso.com

これまでの当たり前

画面に動きをつけたい
見栄えをよくしたい
JavaScript
Photoshop 
Illustrator

これらの多くの事が
CSS（CSS3）で
出来るようになった

レスポンシブWebデザイン
スマホ対応
H
T
M
L
5
Bootstrap
Webフォント
角
丸アニメーション
グラデーション
インブラウザデザイン
モーダルウィンドウ
アコーディオン・メニュー
アイコンフォント
CSSハック
疑
似
...

JavaScript
Photoshop 
Illustrator
テキストなので
・修正が簡単
・ファイルサイズが小さい
…etc
CSS

CSS のコード量が
肥大化している

肥大化あるある

書き換えているのに
画面が変わらない！
肥大化あるある

セレクタ名が決められない！
肥大化あるある

というか、前のセレクタ名直したい！
肥大化あるある

（修正後）そこじゃない！
肥大化あるある

もう・・・無理・・・
肥大化あるある

そうなる前に

CSS の基本を理解しよう！
設計の考え方を学ぼう！

第１歩　最近の CSS について
第2歩　CSS の基本をおさらいしよう
第3歩　CSS の設計について
本日のアジェンダ

基本ルール①
カスケーディング

カスケーディング
.entry-title {
color: red;
}
.entry-title {
color: blue;
}
こちらのルールが適用
CSS

カスケーディング
.large {
font-size: 32px;
}
.small {
font-size: 14px;
}
<h1 class=“small large”>タイトル</h1>
こちらのルールが適用
CSS
HTML

基本ルール②
詳細度

詳細度
詳細度セレクタ
!important
インライン記述
IDセレクタ
クラスセレクタ
属性セレクタ・疑似クラス
要素セレクタ・疑似要素
ユニバーサルセレクタ
高い
低い

!important
h1 {
color: red !important;
}
h1 {
color: blue;
}
<h1 class=“entry-title”>title</h1>
CSS
HTML
こちらのルールが適用

インライン記述
h1 {
color: blue;
}
<h1 style=“color: green”>title</h1>
CSS
HTML
こちらのルールが適用

IDセレクタ
#head{
color: yellow;
}
.entry-title {
color: red;
}
<h1 id=“head” class=“entry-title”>title</h1>
CSS
HTML
こちらのルールが...

クラスセレクタ
.entry-title {
color: red;
}
h1 {
color: blue;
}
<h1 class=“entry-title”>title</h1>
CSS
HTML
こちらのルールが適用

属性セレクタ
a[title=“maru”] {
color: red;
}
a {
color: blue;
}
<a title=“maru” href=“#”>link</a>
CSS
HTML
こちらのルールが適用

疑似クラス
li:first-child {
color: red;
}
li {
color: blue;
}
<ul>
<li>list-1<li>
<li>list-2<li>
</ul>
CSS
HTML
こちらのルールが適用

要素セレクタ
h1 {
color: red;
}
* {
color: blue;
}
<h1 class=“entry-title”>title</h1>
CSS
HTML
こちらのルールが適用

ユニバーサルセレクタ
* {
color: gray;
}
CSS
すべての要素にマッチするセレクタ
どのセレクタよりも優先度は低い

ただし

セレクタが複数ある場合
div h1.entry-title {
color: red;
}
.primary .entry-title {
color: green;
}
.entry-title {
color: blue;
}
<div ...

セレクタが複数ある場合
div h1.entry-title {
color: red;
}
.primary .entry-title {
color: green;
}
.entry-title {
color: blue;
}
CSS
こ...

おさらいしよ〜
写真素材ぱくたそ
https://www.pakutaso.com

文字は何色？
div h1.entry-title {
color: red;
}
div .entry-title {
color: green;
}
.entry-title {
color: blue;
}
CSS
<div class=...

文字は何色？
.primary .entry-title {
color: red;
}
div.primary h1 {
color: green;
}
.entry-title {
color: blue;
}
CSS
<div class...

文字は何色？
.primary h1.entry-title {
color: red;
}
div.primary .entry-title {
color: green;
}
.primary .entry-title {
color: b...

第１歩　最近の CSS について
第2歩　CSS の基本をおさらいしよう
第3歩　CSS の設計について
本日のアジェンダ

CSSの設計について

代表的な CSS 設計手法（考え方）紹介
自分にあった手法を考える
この後の流れ

OOCSS
BEM
代表的なCSS設計手法

オブジェクト指向の概念を取り入れ
元・米Yahoo!のニコール・サリバンによって考案
OOCSSとは
参考） https://github.com/stubbornella/oocss

構造と装飾の分離
コンテナーとコンテンツの分離
OOCSSの原則

構造と装飾の分離

OOCSS ぽいサイトのコードを確認してみる
.btn {
position: relative;
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: ...

OOCSS っぽいのサイトのコードを確認してみる
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044;...

<a class=“btn”>PUSH</a>HTML
構造（ボタン）のセレクタを指定

<a class=“btn btn-primary”>PUSH</a>HTML
構造（ボタン）のセレクタを指定
装飾のセレクタを指定

<a class=“btn btn-danger”>PUSH</a>HTML
装飾（別）のセレクタを指定

<a class=“btn btn-primary btn-sm”>PUSH</a>HTML
複数のセレクタを指定
※色とサイズを別々に定義しているから出来る

コンテナーとコンテンツの分離

場所の依存をなくす
#header .btn {
- - -
}
#sidebar .btn {
- - -
}
#footer .btn {
- - -
}

OOCSS
BEM
代表的なCSS設計手法

命名規則について定められている
Block, Element, Modifier の略
ロシアの Yandex 社によって考案
BEMとは

Block__Element_Modifier
BEMの命名規則
Element
Modifier
Block
構成のルートとなる要素。Element, Modifier への基点。
Block の子要素。アンダースコア２つでつなぐ。
Bloc...

BEM ぽいサイトのコードを確認してみる
.m-btn02 {
display: block;
background: #363a3f;
border: 1px solid #1a1c1f;
box-shadow: 0 1px 2px rgba...

$BEM ぽいサイトでコードを確認してみる .m-btn02.m-btn02__icon { height: 1em; display: inline-block; margin-right: 7px; } .m-btn02.m-btn02--i...$

<a class=“m-btn02”>PUSH</a>HTML
Blockのセレクタを指定

<a class=“m-btn02 m-btn02--inline”>PUSH</a>HTML
Block--Modifire のセレクタを指定

<a class=“m-btn02 m-btn02--inline m-btn02--color-orange”>PUSH</a>HTML
Block--Modifire のセレクタをさらに指定

その他の手法

OOCSSをベースに作成された
元・米Yahoo!のジョナサン・スヌークによって考案
SMACSS

いろいろ考え方を参考に
自分にあった手法を考える

名前はなるべく省略しない
セレクタにその要素が必要か一旦考える
セレクタにその階層が必要か一旦考える
コピーするときはコンポーネント設計を一旦考える
私的に行っていること（まとめ）

ご清聴ありがとうございました！
写真AC
http://www.photo-ac.com/

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2016年版フロントエンド開発フォーマット by Kenya Kodaira 38960 views
ヒューマンリーダブルな CSS 記述法（異次元編）：2016年5月13... by Yoshiki Hayama 19064 views
ブラウザにやさしいHTML/CSS by Takeharu Igari 71682 views
メンテナブルでありつづけるためのCSS設計 by 拓樹谷 37354 views
なんでCSSすぐ死んでしまうん by Hayato Mizuno 80156 views
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読み... by Horiguchi Seito 61530 views

View on Slideshare

1 of 67 Ad

View on Slideshare

1 of 67 Ad