先日開催した勉強会のスライドです

1. Webの勉強会
CSSの設計方法、マークアップについて説明
2015/10/9 Ver.1.0
1

2.  過去のCSSの記述
 CSS設計とは
 OOCSS、SMACSS、BEM
 命名規則の考え方
 CSSファイルの記述法
 CSS設計を学習する本、サイト
2
アジェンダ

3. 過去のCSSの記述
3

4. 4
#sidebar .list ul li ul li a
1 サイドカラムにリストの入れ子
テキスト
テキスト
テキスト
テキスト
テキスト

5. 5
階層深すぎぃ!!

6. 6
詳細を見る
.button1
2 ボタンをたくさん作りました
PageTop 詳細を見る
詳細を見る 詳細を見る 詳しくはこちら
.button2 .button3
.button4 .button5 .button6

7. 7
どれが何のボタンか
分かりません!!

8. 8
詳細を見る
.button1 {
background
font-size
margin
padding
…
}
3 改めてボタンを作りました

9. 9
記述多すぎ～

10. 10
#header ul
#header ul li
#header ul li a
4 ヘッダーナビゲーション
テキスト テキスト

11. 11
下に配置して
くれ

12. 横に移動し
てくれ
12
下に配置して
くれ 中央にもっ
てきて
外行ってく
る
マークを変
えて
要らない
元に戻して
上にもってき
て
フッターだ
な
真ん中に
もってきて
右へ少しずら
して
色を変えて

13. 13
動かしたら作り直し

14. 14
結論

15. 15
行き当たりばったり

16. 16
こうならないように
するには？

17. CSS設計とは
17

18. 18
CSSは書きやすく直しにくい

19. 19
最初からルールを決めて
作りましょう

20. 1. 予測しやすい
2. 再利用しやすい
3. 保守しやすい
4. 拡張しやすい
20
ポイント

21. 21
http://article.enja.io/articles/css-
architecture.html

22. 22
なげぇ

23. 23
自分が想定した動作をする
記述を行う
1 予測しやすい
A

24. 24
同じ動作をパターン化し、
まとめることで使いやすくする
2 再利用しやすい
A

25. 25
新規記述を行う場合、
既存の記述を壊さないようにする
3 保守しやすい
A B

26. 26
他の人でも
簡単に扱えるようにする
4 拡張しやすい

27. これらを踏まえて
CSS設計を行う
27

28. 28
この設計方法を
考えてまとめたもの

29. OOCSS
SMACSS
BEM
29

30. 30
設計思想は色々ありますが
日本でよく
取りあげられるもの3つ

31. SMACSS
31
1

32. 32
OOCSSとBEMの
いいとこ取り

33. 33
Base
Layout
Module
State
Theme
初期設定
レイアウト
パーツ
状態
テーマ
役割を5つに分割して管理する

34. 34
Baseはreset.cssの様にサイトの
初期状態を記述する

35. 35
Layoutは
ページを構成する
一番大きな要素の
classに「l」または
「layout」をつける
<header class=“l-header”>
l-header
l-nav
l-visual
l-main l-side
l-footer
l-container

36. 36
Moduleは
ページの中にある
部品一つ一つを指す
ロゴ 検索
l-header
l-main
説明
見出し
新着情報
どこに持って行っても
使えるようにする

37. 37
Stateは
JavaScriptで見た目
が変わる箇所に
つける
 テキスト
 テキスト
<ul li a class=“sideList is-hover”>
テキストの色が変わる場合

38. 38
Themeは
サイト全体の見た目
を変更する場合に
つける
<～ class=“theme-XX”>
l-header
l-nav
l-visual
l-main l-side
l-footer
l-container

39. OOCSS
39
2

40. 40
Object-Oriented CSS

41. 41
プログラムで出てくる
「オブジェクト指向」
を取り入れたもの

42. 42
 構造と見た目の分離
 コンテナーとコンテンツの分離
OOCSSの原則

43. 43
構造と見た目の分離 .btn {
height: 60px;
line-height: 1.5;
text-align: center;
width: 100px;
}
.btn-blue {
background-color: blue;
color: white;
}
<p>
<a href=“#” class=“btn btn-blue">
ボタン</a>
</p>
ボタン
色変更した別バージョンも
簡単に作れる
ボタンの構造
ボタンの見た目

44. 44
コンテナーとコンテンツの分離
.subTitle {
font-size:1.1em;
color: #333;
border-bottome: 1px solied #333;
}
<header>
<h1 class=“subTitle”>見出し</h1>
</header>
<footer>
<h1 class=“subTitle”>見出し</h1>
</footer>
同じ内容であれば
Classでまとめる

45. 45
CSSフレームワーク
「bootstrap」は
この設計思想をベースに
作られています

46. BEM
46
3

47. 47
Block
Element
Modifier

48. 48
html構造を明確にする

49. 49
Block
Element
Modifier
どこでも使える大きな
要素、class
Blockの中にある要素
見た目が変わるもの
役割を3つに分割して管理する

50. 50
Blockは
ページの中を構成する
部品
ロゴ 検索
ヘッダー
メインコンテンツブロック
説明
見出し
新着情報
どこに置いても同じ表現
Blockの中に
Blockが入ることもある

51. 51
<div class=“form">
<input class=“form__input" type="text">
<input class=“form__button" type="submit">
</div>
命名規則に注意
ElementはBlockの中にある要素
送信

52. 52
<ul class="list list_type_primary">
Modifierは見た目が違うもの担当
テキスト
テキスト
テキスト
テキスト
<ul class="list list_type_secondary">
命名規則に注意

53. 命名規則の考え方
53

54. 1. Classを使う
2. マルチクラス
3. パーツ基準
4. 基本となるclass
5. 名称担当を分ける
54
ポイント

55.  IdはJavaScriptで使う
 使い回しができない
 上書きが難しい
55
Classを使う1

56. 役割を分離させることで
使いやすくなる
56
マルチクラス
ボタン
文字色、背景色 大きさ 角丸
2

57. 57
パーツ基準
どこに置いても大丈夫
テキスト
テキスト
<div class="list">
<ul>
<li>
…
3

58. 58
基本となるclass
共通部分を
基本としてまとめる
見出し1 <h1 class=“heading heading-primary">
<h2 class=“heading heading-secondary">
<h3 class=“heading heading-tertiary">
4
見出し2
見出し2

59. 59
名称担当を分ける5
.block__element--modifier{…}
.block__element--key_value{…}
部品名__構成要素--状態
状態はさらに分けてわかりやすくする
BEMの場合

60. CSSファイルの記述法
60

61. 1. 目次をつける
2. ABC順
3. 構成場所で分ける
4. 子セレクタを使う
5. Media queryは場所ごとにまとめる
61
ポイント

62. デメリット
62

63. 作るのが大変
63

64. Classの命名に悩む
64

65. Classが長い
65

66. CSSを
学習する本、サイト
66

67. Web制作者のためのCSS設計
の教科書
67

68. https://smacss.com/ja
68

69. CodeGrid
69

70. Qiita
70

71. 悩まないコーディングをしよ
う！
71

72. 以上
72