HTML+CSSによるマークアップからCMSの構築まで、さまざまなWebサイトの制作に関わっ
たあと、2014年にまぼろしに入社。
主な著書に『CSS3&jQueryで作る スマートフォンサイトUI図鑑』(共著、アスキー・メディ
アワークス)、『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新
ルール』(共著、MdN)など。
Adobe公式ブログ「Adobe Creative Station」で、プラグインの「Emmet」について連載。
個人ブログ「Web Design KOJIKA17」を運営。
久保 知己株式会社まぼろし
マークアップエンジニア
Styleguide
スタイル ガイドは、特定の言語について用字用語やスタイル上の決まり
事が定義されたルール集です。
ローカライズに関する通則、技術文書における言語のスタイルや用法に
関する情報、市場に特化したデータ書式に関する情報が含まれます。
“スタイルガイドをダウンロード - マイクロソフト | ランゲージ ポータル
http://www.microsoft.com/Language/ja-jp/StyleGuides.aspx
このセッションのStyleguide
Webサイトを構成するデザインパーツ(モジュール)や作法などを記述したドキュメント
• ドキュメントの形式: HTMLなど
• 記述内容
• ディレクトリ, インデント, ID/classの命名規則
• カラーパレット
• ボタンや見出しなどのWebサイトを構成するパーツなど
Styleguide Driven Development
スタイルガイド(ドキュメント)をもとに開発を進める手法
略称: 「SGDD」または「SDD」
• デザインやコードの一貫性を保持しやすい
• メンテナンスやパフォーマンスなども考えながら作成しやすい
• 量産ページなどのデザインの画面数が減る(ワイヤーだけで作成できる)
• あとからページを作成する時も、スムーズに進めやすい
• レスポンシブWebデザインにも有効
LEGO.com Digital Designer Virtual Building Software http://ldd.lego.com/ja-jp/
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.
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 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>
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の詳細度の起伏をおさえる
詳細度の起伏が激しい場合、複数の人が運用しているとカオスになりやすい
下記はドキュメントがないと起こりそうな夢
• 子孫セレクタを子孫セレクタで上書きして対応する場面が起こりやすい
• !important を使いはじめる
• !important を !important で上書きする
• /* 消したら、なぜか崩れる */ というコメントが出現する
CSSの子孫セレクタ
.pagination { overflow: hidden; } .pagination .next { float: left; } .pagination .prev { float: right; }
CSSの子孫セレクタ
.pagination { overflow: hidden; } .pagination-next { float: left; } .pagination-prev { float: right; }
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/
特にPDFなどは更新されにくい
Styleguide Driven Developmentは、コードとスタイルガイドを反復して書き換え
ることが多いため、容易に書き換えられる工夫が必要。
またスタイルガイドのコードと運用しているコードが常に同じになる工夫も必要。
Styleguide Generator
• KSS · Knyle Style Sheets
• StyleDocco
• Kalei - Style guide
• hologram
• Styledown など
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の記述(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> ```
*/
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!
Recommended