MTDDC Tokyo 2015で話した内容です。 MTのデモでは、モジュールをダブルクリックするとHTMLやCSSの編集エリアが表示される。 HTML, CSSの編集エリアは、Emmetも利用できるようにしています。 保存すると、Data APを利用して記事を編集・保存し、再構築まで行うようになっています。 ただ実際に使うのは難しいかも。

1. Styleguide
Driven
Development
Content
Management
System

2. HTML+CSSによるマークアップからCMSの構築まで、さまざまなWebサイトの制作に関わっ
たあと、2014年にまぼろしに入社。
主な著書に『CSS3&jQueryで作る スマートフォンサイトUI図鑑』（共著、アスキー・メディ
アワークス）、『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新
ルール』（共著、MdN）など。
Adobe公式ブログ「Adobe Creative Station」で、プラグインの「Emmet」について連載。
個人ブログ「Web Design KOJIKA17」を運営。
久保 知己
株式会社まぼろし
マークアップエンジニア

3. Styleguide Driven Development
(SGDD/SDD)

4. Styleguide
スタイル ガイドは、特定の言語について用字用語やスタイル上の決まり
事が定義されたルール集です。
ローカライズに関する通則、技術文書における言語のスタイルや用法に
関する情報、市場に特化したデータ書式に関する情報が含まれます。
スタイルガイドをダウンロード − マイクロソフト ¦ ランゲージ ポータル
http://www.microsoft.com/Language/ja-jp/StyleGuides.aspx

5. このセッションのStyleguide
Webサイトを構成するデザインパーツ（モジュール）や作法などを記述したドキュメント
• ドキュメントの形式: HTMLなど
• 記述内容
• ディレクトリ, インデント, ID/classの命名規則
• カラーパレット
• ボタンや見出しなどのWebサイトを構成するパーツなど

6. mozilla Style guide - introduction

7. mozilla Style guide - buttons & icons

8. mozilla Style guide - backgrounds & color

9. mozilla Style guide - grid system

10. Primer

11. Primer - Buttons

12. Primer - Navigation

13. Primer - States

14. 中・長期的に運用する
Webサイトと相性がいい

15. Styleguide Driven Development

16. Styleguide Driven Development
スタイルガイド（ドキュメント）をもとに開発を進める手法
略称: 「SGDD」または「SDD」
• デザインやコードの一貫性を保持しやすい
• メンテナンスやパフォーマンスなども考えながら作成しやすい
• 量産ページなどのデザインの画面数が減る（ワイヤーだけで作成できる）
• あとからページを作成する時も、スムーズに進めやすい
• レスポンシブWebデザインにも有効

17. LEGO.com Digital Designer Virtual Building Software
http://ldd.lego.com/ja-jp/

18. SGDDに適したStyleguide

19. SGDD - Design

20. SGDD - Design
決めておいたり、用意しておくといいこと
• カラーパターン
• margin

21. SGDD - Design
決めておいたり、用意しておくといいこと
• カラーパターン
• margin

22. mozilla Style guide - backgrounds & color

23. Material design - Google design guidelines

24. スウォッチまであると親切

25. SGDD - Design
決めておいたり、用意しておくといいこと
• カラーパターン
• margin

26. Layout - Google design guidelines

27. Keylines and margins
• Screen edge left and right margins:
16dp
• Content associated with an icon or
avatar left margin: 72dp
• Horizontal margins on mobile: 16dp.

28. ヘッダーからコンテンツからまでの距離
やモジュールの距離などを決めておく

29. 間隔を決めていないと
.mt5∼60など、すべて使うかわからない
汎用クラスが増えることになる

30. SGDD - HTML/CSS

31. SGDD - HTML/CSS
MovableTypeなど、CMSを構築している方は当たり前だと思いますが、
• モジュールの柔軟性を考えて作成する
• CSSの再利用性・指定範囲
• CSSの詳細度の起伏をおさえる

32. SGDD - HTML/CSS
MovableTypeなど、CMSを構築している方は当たり前だと思いますが、
• モジュールの柔軟性を考えて作成する
• CSSの再利用性・指定範囲
• CSSの詳細度の起伏をおさえる

33. SGDD - HTML/CSS
MovableTypeなど、CMSを構築している方は当たり前だと思いますが、
• モジュールの柔軟性を考えて作成する
• CSSの再利用性・指定範囲
• CSSの詳細度の起伏をおさえる

34. CSSの再利用性
.categories-pagination {
overflow: hidden;
}
.categories-pagination .next {
float: left;
}
.categories-pagination .prev {
float: right;
}

35. CSSの再利用性
.pagination {
overflow: hidden;
}
.pagination .next {
float: left;
}
.pagination .prev {
float: right;
}

36. CSSの指定範囲
<div id="main">
<h1>Heading Lv1</h1>
<p>Lorem</p>
<h2>Heading Lv2</h2>
<p>Lorem</p>
</div>

37. CSSの指定範囲
#main h1 { }
#main h2 { }
#main ul { }
#main p { }

38. CSSの指定範囲
<div id="main">
<h1>Heading Lv1</h1>
<p>Lorem</p>
<h2>Heading Lv2</h2>
<p>Lorem</p>
<div class="contact">
<h2>Heading Contact</h2>
<p>lorem</p>
</div>
</div>

39. CSSの指定範囲
<div id="main" class="entry">
<h1 class="entry-title">Heading Lv1</h1>
<div class=“entry-body”>
<!— WYSIWYG —>
<p>Lorem</p>
<h2>Heading Lv2</h2>
<p>Lorem</p>
<!— /WYSIWYG —>
</div>
<div class="contact">
<h2>Heading Contact</h2>
<p>lorem</p>
</div>
</div>

40. CSSの指定範囲
.entry-title { }
.entry-body h2 { }
.entry-body ul { }
.entry-body p { }
.contact h2 { }

41. SGDD - HTML/CSS
MovableTypeなど、CMSを構築している方は当たり前だと思いますが、
• モジュールの柔軟性を考えて作成する
• CSSの再利用性・指定範囲
• CSSの詳細度の起伏をおさえる

42. CSSの詳細度の起伏をおさえる
.txt { }
#main h2 span { }
#about .list .photo img { }
.box .item .item-lv2 ul li .hoge { }
.box .item #item-lv3 h2 { }
.box .items .item dl dd p { }
.box .items .item ul li h4 { }
#footer #footer-nav #footer-nav-inner ul { }
#footer #footer-nav #footer-nav-inner ul li { }
#footer #footer-nav #footer-nav-inner ul li a
{ }

43. CSS Specificity Graph Generator

44. CSSの詳細度の起伏をおさえる
詳細度の起伏が激しい場合、複数の人が運用しているとカオスになりやすい
下記はドキュメントがないと起こりそうな夢
• 子孫セレクタを子孫セレクタで上書きして対応する場面が起こりやすい
• !important を使いはじめる
• !important を !important で上書きする
• /* 消したら、なぜか崩れる */ というコメントが出現する

45. CSSの詳細度の起伏をおさえる
詳細度の起伏を抑えるには？
• 子孫セレクタを深くしすぎない
• CSSではIDセレクタを控える

46. CSSの子孫セレクタ
.pagination {
overflow: hidden;
}
.pagination .next {
float: left;
}
.pagination .prev {
float: right;
}

47. CSSの子孫セレクタ
.pagination {
overflow: hidden;
}
.pagination-next {
float: left;
}
.pagination-prev {
float: right;
}

48. CSS Specificity Graph Generator - ブログのCSS

49. CSSの詳細度の比較
詳細度が高い 詳細度が低い

50. LEGO.com Digital Designer Virtual Building Software
http://ldd.lego.com/ja-jp/

51. LEGO.com Digital Designer Virtual Building Software
http://ldd.lego.com/ja-jp/

52. CSSフレームワーク

53. SGDDを意識した
スタイルガイドを作成

55. 「ただ作ればいい」という
問題ではない

56. 最初はしっかりスタイルガイドを作るが、
システムに組み込まれると、
あまり更新されなくなる

57. 特にPDFなどは更新されにくい
Styleguide Driven Developmentは、コードとスタイルガイドを反復して書き換え
ることが多いため、容易に書き換えられる工夫が必要。
またスタイルガイドのコードと運用しているコードが常に同じになる工夫も必要。

58. Styleguide Generator
(Living Styleguide)

59. Styleguide Generator
• KSS · Knyle Style Sheets
• StyleDocco
• Kalei - Style guide
• hologram
• Styledown など

60. Styleguide Genratorの特徴
• 主にCSSのコメントに記述する
• 文章とHTMLの書き方
• 文章はmarkdownで記述する

61. CSSにコメントを書いて、
「再構築」すれば、
HTMLのスタイルガイドが生成される

63. hologramの記述（CSSファイル）
/*doc
---
title: Buttons
name: button
category: Base CSS
---
Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:
```html_example
<button class="btn btnDefault">Click</button>
<a class="btn btnPrimary" href="http://trulia.com">Trulia!</a>
```
*/

64. hologramの記述（CSSファイル）
/*doc
---
title: Buttons
name: button
category: Base CSS
---
Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:
```html_example
<button class="btn btnDefault">Click</button>
<a class="btn btnPrimary" href="http://trulia.com">Trulia!</a>
```
*/

65. hologramの記述（CSSファイル）
/*doc
---
title: Buttons
name: button
category: Base CSS
---
Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:
```html_example
<button class="btn btnDefault">Click</button>
<a class="btn btnPrimary" href="http://trulia.com">Trulia!</a>
```
*/

66. hologramの記述（CSSファイル）
/*doc
---
title: Buttons
name: button
category: Base CSS
---
Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:
```html_example
<button class="btn btnDefault">Click</button>
<a class="btn btnPrimary" href="http://trulia.com">Trulia!</a>
```
*/

67. hologramの見え方

68. hologramの記述（CSSファイル）
/*doc
---
title: Buttons
name: button
category: Base CSS
---
Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:
```html_example
<button class="btn btnDefault">Click</button>
<a class="btn btnPrimary" href="http://trulia.com">Trulia!</a>
```
*/

69. CSSにコメントを書くため
コードとドキュメントが
乖離しにくい

70. Movable Type = Styleguide

71. ネタです

72. Movable Type = Styleguide
MTをスタイルガイドにできないか、考えてみた
1. MTの記事を利用して、HTMLとCSSを投稿
2. CSSはstyle.cssに追記されるようにする
3. HTMLとCSSをドキュメントに反映
4. モジュールのデザインとコードは、ドキュメントで確認できる
5. Data APIを利用して、ドキュメントから直接CSSを修正する

75. さくっと作ってみた

77. おさらい

78. •Styleguideとは
•Styleguide Driven Development（SGDD）とは
•SGDDに適したStyleguide
•Styleguide Generator（Living Styleguide）

79. Image Credits
• Tokyo Night ¦ Flickr - Photo Sharing!

80. ありがとうございました