Styleguide Driven Development x CMS - MTDDC Tokyo 2015
1 like2,006 views
MTDDC Tokyo 2015で話した内容です。 MTのデモでは、モジュールをダブルクリックするとHTMLやCSSの編集エリアが表示される。 HTML, CSSの編集エリアは、Emmetも利用できるようにしています。 保存すると、Data APを利用して記事を編集・保存し、再構築まで行うようになっています。 ただ実際に使うのは難しいかも。
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
- 2. HTML+CSSによるマークアップからCMSの構築まで、さまざまなWebサイトの制作に関わっ たあと、2014年にまぼろしに入社。 主な著書に『CSS3&jQueryで作る スマートフォンサイトUI図鑑』（共著、アスキー・メディ アワークス）、『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新 ルール』（共著、MdN）など。 Adobe公式ブログ「Adobe Creative Station」で、プラグインの「Emmet」について連載。 個人ブログ「Web Design KOJIKA17」を運営。 久保 知己 株式会社まぼろし マークアップエンジニア
- 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
- 13. Primer - States
- 16. Styleguide Driven Development スタイルガイド（ドキュメント）をもとに開発を進める手法 略称: 「SGDD」または「SDD」 • デザインやコードの一貫性を保持しやすい • メンテナンスやパフォーマンスなども考えながら作成しやすい • 量産ページなどのデザインの画面数が減る（ワイヤーだけで作成できる） • あとからページを作成する時も、スムーズに進めやすい • レスポンシブWebデザインにも有効
- 17. LEGO.com Digital Designer Virtual Building Software http://ldd.lego.com/ja-jp/
- 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.
- 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 で上書きする • /* 消したら、なぜか崩れる */ というコメントが出現する
- 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
- 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フレームワーク
- 59. Styleguide Generator • KSS · Knyle Style Sheets • StyleDocco • Kalei - Style guide • hologram • Styledown など
- 60. Styleguide Genratorの特徴 • 主にCSSのコメントに記述する • 文章とHTMLの書き方 • 文章はmarkdownで記述する
- 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> ``` */
- 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. ありがとうございました