Styleguide
Driven
Development
Content
Management
System

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

Styleguide Driven Development
(SGDD/SDD)

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

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

mozilla Style guide - introduction

mozilla Style guide - buttons & icons

mozilla Style guide - backgrounds & color

mozilla Style guide - grid system

Primer

Primer - Buttons

Primer - Navigation

Primer - States

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

Styleguide Driven Development

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

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

SGDDに適したStyleguide

SGDD - Design

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

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

mozilla Style guide - backgrounds & color

Material design - Google design guidelines

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

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

Layout - Google design guidelines

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.

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

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

SGDD - HTML/CSS

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

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

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

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

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

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

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

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>

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>

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

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

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

CSS Specificity Graph Generator

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

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

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

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

CSS Specificity Graph Generator - ブログのCSS

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

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

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

CSSフレームワーク

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

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

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

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

Styleguide Generator
(Living Styleguide)

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

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

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

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

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

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

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

hologramの見え方

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

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

Movable Type = Styleguide

ネタです

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

さくっと作ってみた

おさらい

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

Image Credits
• Tokyo Night ¦ Flickr - Photo Sharing!

ありがとうございました