Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Styleguide
Driven
Development
Content
Management
System
HTML+CSSによるマークアップからCMSの構築まで、さまざまなWebサイトの制作に関わっ
たあと、2014年にまぼろしに入社。
主な著書に『CSS3&jQueryで作る スマートフォンサイトUI図鑑』(共著、アスキー・メディ
アワークス)、...
Styleguide Driven Development

(SGDD/SDD)
Styleguide
スタイル ガイドは、特定の言語について用字用語やスタイル上の決まり
事が定義されたルール集です。
ローカライズに関する通則、技術文書における言語のスタイルや用法に
関する情報、市場に特化したデータ書式に関する情報が含まれま...
このセッションのStyleguide
Webサイトを構成するデザインパーツ(モジュール)や作法などを記述したドキュメント
• ドキュメントの形式: HTMLなど
• 記述内容
• ディレクトリ, インデント, ID/classの命名規則
• カ...
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」
• デザインやコードの一貫性を保持しやすい
• メンテナンスやパフォーマンスなども考えなが...
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: 7...
ヘッダーからコンテンツからまでの距離
やモジュールの距離などを決めておく
間隔を決めていないと
.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...
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>Hea...
CSSの指定範囲
<div id="main" class="entry">
<h1 class="entry-title">Heading Lv1</h1>
<div class=“entry-body”>
  <!— WYSIWYG —>
...
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 #it...
CSS Specificity Graph Generator
CSSの詳細度の起伏をおさえる
詳細度の起伏が激しい場合、複数の人が運用しているとカオスになりやすい
下記はドキュメントがないと起こりそうな夢
• 子孫セレクタを子孫セレクタで上書きして対応する場面が起こりやすい
• !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 elem...
hologramの記述(CSSファイル)
/*doc
---
title: Buttons
name: button
category: Base CSS
---
Button styles can be applied to any elem...
hologramの記述(CSSファイル)
/*doc
---
title: Buttons
name: button
category: Base CSS
---
Button styles can be applied to any elem...
hologramの記述(CSSファイル)
/*doc
---
title: Buttons
name: button
category: Base CSS
---
Button styles can be applied to any elem...
hologramの見え方
hologramの記述(CSSファイル)
/*doc
---
title: Buttons
name: button
category: Base CSS
---
Button styles can be applied to any elem...
CSSにコメントを書くため
コードとドキュメントが
乖離しにくい
Movable Type = Styleguide
ネタです
Movable Type = Styleguide
MTをスタイルガイドにできないか、考えてみた
1. MTの記事を利用して、HTMLとCSSを投稿
2. CSSはstyle.cssに追記されるようにする
3. HTMLとCSSをドキュメントに...
さくっと作ってみた
おさらい
•Styleguideとは
•Styleguide Driven Development(SGDD)とは
•SGDDに適したStyleguide
•Styleguide Generator(Living Styleguide)
Image Credits
• Tokyo Night ¦ Flickr - Photo Sharing!
ありがとうございました
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Upcoming SlideShare
Loading in …5
×

Styleguide Driven Development x CMS - MTDDC Tokyo 2015

1,315 views

Published on

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

Published in: Technology
  • Be the first to comment

Styleguide Driven Development x CMS - MTDDC Tokyo 2015

  1. 1. Styleguide Driven Development Content Management System
  2. 2. HTML+CSSによるマークアップからCMSの構築まで、さまざまなWebサイトの制作に関わっ たあと、2014年にまぼろしに入社。 主な著書に『CSS3&jQueryで作る スマートフォンサイトUI図鑑』(共著、アスキー・メディ アワークス)、『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新 ルール』(共著、MdN)など。 Adobe公式ブログ「Adobe Creative Station」で、プラグインの「Emmet」について連載。 個人ブログ「Web Design KOJIKA17」を運営。 久保 知己 株式会社まぼろし マークアップエンジニア
  3. 3. Styleguide Driven Development
 (SGDD/SDD)
  4. 4. Styleguide スタイル ガイドは、特定の言語について用字用語やスタイル上の決まり 事が定義されたルール集です。 ローカライズに関する通則、技術文書における言語のスタイルや用法に 関する情報、市場に特化したデータ書式に関する情報が含まれます。 スタイルガイドをダウンロード − マイクロソフト ¦ ランゲージ ポータル http://www.microsoft.com/Language/ja-jp/StyleGuides.aspx
  5. 5. このセッションのStyleguide Webサイトを構成するデザインパーツ(モジュール)や作法などを記述したドキュメント • ドキュメントの形式: HTMLなど • 記述内容 • ディレクトリ, インデント, ID/classの命名規則 • カラーパレット • ボタンや見出しなどのWebサイトを構成するパーツなど
  6. 6. mozilla Style guide - introduction
  7. 7. mozilla Style guide - buttons & icons
  8. 8. mozilla Style guide - backgrounds & color
  9. 9. mozilla Style guide - grid system
  10. 10. Primer
  11. 11. Primer - Buttons
  12. 12. Primer - Navigation
  13. 13. Primer - States
  14. 14. 中・長期的に運用する Webサイトと相性がいい
  15. 15. Styleguide Driven Development
  16. 16. Styleguide Driven Development スタイルガイド(ドキュメント)をもとに開発を進める手法 略称: 「SGDD」または「SDD」 • デザインやコードの一貫性を保持しやすい • メンテナンスやパフォーマンスなども考えながら作成しやすい • 量産ページなどのデザインの画面数が減る(ワイヤーだけで作成できる) • あとからページを作成する時も、スムーズに進めやすい • レスポンシブWebデザインにも有効
  17. 17. LEGO.com Digital Designer Virtual Building Software http://ldd.lego.com/ja-jp/
  18. 18. SGDDに適したStyleguide
  19. 19. SGDD - Design
  20. 20. SGDD - Design 決めておいたり、用意しておくといいこと • カラーパターン • margin
  21. 21. SGDD - Design 決めておいたり、用意しておくといいこと • カラーパターン • margin
  22. 22. mozilla Style guide - backgrounds & color
  23. 23. Material design - Google design guidelines
  24. 24. スウォッチまであると親切
  25. 25. SGDD - Design 決めておいたり、用意しておくといいこと • カラーパターン • margin
  26. 26. Layout - Google design guidelines
  27. 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. 28. ヘッダーからコンテンツからまでの距離 やモジュールの距離などを決めておく
  29. 29. 間隔を決めていないと .mt5∼60など、すべて使うかわからない 汎用クラスが増えることになる
  30. 30. SGDD - HTML/CSS
  31. 31. SGDD - HTML/CSS MovableTypeなど、CMSを構築している方は当たり前だと思いますが、 • モジュールの柔軟性を考えて作成する • CSSの再利用性・指定範囲 • CSSの詳細度の起伏をおさえる
  32. 32. SGDD - HTML/CSS MovableTypeなど、CMSを構築している方は当たり前だと思いますが、 • モジュールの柔軟性を考えて作成する • CSSの再利用性・指定範囲 • CSSの詳細度の起伏をおさえる
  33. 33. SGDD - HTML/CSS MovableTypeなど、CMSを構築している方は当たり前だと思いますが、 • モジュールの柔軟性を考えて作成する • CSSの再利用性・指定範囲 • CSSの詳細度の起伏をおさえる
  34. 34. CSSの再利用性 .categories-pagination { overflow: hidden; } .categories-pagination .next { float: left; } .categories-pagination .prev { float: right; }
  35. 35. CSSの再利用性 .pagination { overflow: hidden; } .pagination .next { float: left; } .pagination .prev { float: right; }
  36. 36. CSSの指定範囲 <div id="main"> <h1>Heading Lv1</h1> <p>Lorem</p> <h2>Heading Lv2</h2> <p>Lorem</p> </div>
  37. 37. CSSの指定範囲 #main h1 { } #main h2 { } #main ul { } #main p { }
  38. 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. 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. 40. CSSの指定範囲 .entry-title { } .entry-body h2 { } .entry-body ul { } .entry-body p { } .contact h2 { }
  41. 41. SGDD - HTML/CSS MovableTypeなど、CMSを構築している方は当たり前だと思いますが、 • モジュールの柔軟性を考えて作成する • CSSの再利用性・指定範囲 • CSSの詳細度の起伏をおさえる
  42. 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. 43. CSS Specificity Graph Generator
  44. 44. CSSの詳細度の起伏をおさえる 詳細度の起伏が激しい場合、複数の人が運用しているとカオスになりやすい 下記はドキュメントがないと起こりそうな夢 • 子孫セレクタを子孫セレクタで上書きして対応する場面が起こりやすい • !important を使いはじめる • !important を !important で上書きする • /* 消したら、なぜか崩れる */ というコメントが出現する
  45. 45. CSSの詳細度の起伏をおさえる 詳細度の起伏を抑えるには? • 子孫セレクタを深くしすぎない • CSSではIDセレクタを控える
  46. 46. CSSの子孫セレクタ .pagination { overflow: hidden; } .pagination .next { float: left; } .pagination .prev { float: right; }
  47. 47. CSSの子孫セレクタ .pagination { overflow: hidden; } .pagination-next { float: left; } .pagination-prev { float: right; }
  48. 48. CSS Specificity Graph Generator - ブログのCSS
  49. 49. CSSの詳細度の比較 詳細度が高い 詳細度が低い
  50. 50. LEGO.com Digital Designer Virtual Building Software http://ldd.lego.com/ja-jp/
  51. 51. LEGO.com Digital Designer Virtual Building Software http://ldd.lego.com/ja-jp/
  52. 52. CSSフレームワーク
  53. 53. SGDDを意識した スタイルガイドを作成
  54. 54. 「ただ作ればいい」という 問題ではない
  55. 55. 最初はしっかりスタイルガイドを作るが、 システムに組み込まれると、 あまり更新されなくなる
  56. 56. 特にPDFなどは更新されにくい Styleguide Driven Developmentは、コードとスタイルガイドを反復して書き換え ることが多いため、容易に書き換えられる工夫が必要。 またスタイルガイドのコードと運用しているコードが常に同じになる工夫も必要。
  57. 57. Styleguide Generator
 (Living Styleguide)
  58. 58. Styleguide Generator • KSS · Knyle Style Sheets • StyleDocco • Kalei - Style guide • hologram • Styledown など
  59. 59. Styleguide Genratorの特徴 • 主にCSSのコメントに記述する • 文章とHTMLの書き方 • 文章はmarkdownで記述する
  60. 60. CSSにコメントを書いて、 「再構築」すれば、 HTMLのスタイルガイドが生成される
  61. 61. 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> ``` */
  62. 62. 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> ``` */
  63. 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. 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. 65. hologramの見え方
  66. 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. 67. CSSにコメントを書くため コードとドキュメントが 乖離しにくい
  68. 68. Movable Type = Styleguide
  69. 69. ネタです
  70. 70. Movable Type = Styleguide MTをスタイルガイドにできないか、考えてみた 1. MTの記事を利用して、HTMLとCSSを投稿 2. CSSはstyle.cssに追記されるようにする 3. HTMLとCSSをドキュメントに反映 4. モジュールのデザインとコードは、ドキュメントで確認できる 5. Data APIを利用して、ドキュメントから直接CSSを修正する
  71. 71. さくっと作ってみた
  72. 72. おさらい
  73. 73. •Styleguideとは •Styleguide Driven Development(SGDD)とは •SGDDに適したStyleguide •Styleguide Generator(Living Styleguide)
  74. 74. Image Credits • Tokyo Night ¦ Flickr - Photo Sharing!
  75. 75. ありがとうございました

×