styleguide driven development x cms - mtddc tokyo 2015
TRANSCRIPT
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!
ありがとうございました