2015年7月29日 松戸WordPress部勉強会スライド

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

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

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

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

5. これまでの当たり前

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

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

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

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

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

11. 肥大化 あるある

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

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

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

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

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

17. そうなる前に

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

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

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

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

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

23. 基本ルール②
詳細度

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

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

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

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

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

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

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

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

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

33. ただし

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

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

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

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

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

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

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

41. CSSの設計について

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

43. OOCSS
BEM
代表的なCSS設計手法

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

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

46. 構造と装飾の分離

47. 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 ボタン（構造）のルールを定義

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

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

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

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

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

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

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

55. OOCSS
BEM
代表的なCSS設計手法

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

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

58. 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

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

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

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

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

63. その他の手法

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

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

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

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