狠狠撸

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

名前　三柴誠一郎
出身　愛媛県
拠点　千葉県松戸市
特徴　絶望的に方向音痴
趣味　カメラ、旅、料理、滝めぐり
自己紹介
活動
松戸でWordPressに関するセミナーを運営
https://www.facebook.com/groups/wordpress.banana.cluster/
https://wpmatsudo.doorkeeper.jp/
経歴
1996年にIT会社へ入社。業務システムの
企画?構築?運用等の経験を経て2014年
からフリーランスとして活動中。

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

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

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

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

レスポンシブWebデザイン
スマホ対応
H
T
M
L
5
Bootstrap
Webフォント
角
丸アニメーション
グラデーション
インブラウザデザイン
モーダルウィンドウ
アコーディオン?メニュー
アイコンフォント
CSSハック
疑
似
要
素
ベンダープレフィックス
プリプロセッサ
CMS
ドロップシャドウ
疑
似
ク
ラ
ス
グリッドシステム
ABテスト

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

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

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

セレクタ名が決められない！

というか、前のセレクタ名直したい！

（修正後）そこじゃない！

もう???無理???

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;
}
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;
}
CSS
HTML

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

セレクタが複数ある場合
div h1.entry-title {
color: red;
}
.primary .entry-title {
color: green;
}
.entry-title {
color: blue;
}
<div class=“primary”>
</div>
CSS
HTML

セレクタが複数ある場合
color: red;
}
color: green;
}
.entry-title {
color: blue;
}
CSS
?同じ詳細度の場合は１つのクラスセレクタより２つのクラスセレクタが優先
?詳細度の低いセレクタがいくらあっても詳細度の高いセレクタが優先

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

文字は何色？
color: red;
}
div .entry-title {
color: green;
}
.entry-title {
color: blue;
}
CSS
</div>
HTML

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

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

颁厂厂の设计について

代表的な 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: bold;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
}
CSS ボタン（構造）のルールを定義

OOCSS っぽいのサイトのコードを確認してみる
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border-color: #5ca941
}
.btn-danger {
color: #900
}
.btn-sm {
padding: 2px 10px
}
CSS 装飾のルールを定義文字を白
背景を緑色
文字を赤
余白を変更（小さく）
参考）GitHUB https://github.com/

<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 {
- - -
}

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

Block__Element_Modifier
BEMの命名規則
Element
Modifier
Block
構成のルートとなる要素。Element, Modifier への基点。
Block の子要素。アンダースコア２つでつなぐ。
Block, Element のバリエーションの異なる要素。?
アンダースコア１つでつなぐ。
ハイフン2つでつなぐ（MindBEMding）という記方もある（こちらが一般的？）

BEM ぽいサイトのコードを確認してみる
.m-btn02 {
display: block;
background: #363a3f;
border: 1px solid #1a1c1f;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0.5px
rgba(255, 255, 255, 0.1) inset, 0 0 1px rgba(255, 255, 255, 0.4)
inset;
padding: 11px 13px 10px;
line-height: 1;
font-weight: normal;
text-align: center;
border-radius: 3px;
font-size: 12px;
color: #fff;
box-sizing: border-box;
}
CSS block のルールを定義
Block

BEM ぽいサイトでコードを確認してみる
.m-btn02.m-btn02__icon {
height: 1em;
margin-right: 7px;
}
.m-btn02.m-btn02--inline {
}
.m-btn02.m-btn02--color-orange {
background: #ff3c00;
border-color: #ef3300;
}
CSS Element, Modifier のルールを定義
Element
Modifier
Modifier
参考）comico http://www.comico.jp/

<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/

狠狠撸

CSS の歩き方

More Related Content

CSS の歩き方