SlideShare a Scribd company logo
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!
ありがとうございました

More Related Content

What's hot

Yat-wbnara201602
Yat-wbnara201602Yat-wbnara201602
Yat-wbnara201602
YAT blog
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
 
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介優也 田島
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
 
css基本。
css基本。css基本。
css基本。web12
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
 
SMACSS入門
SMACSS入門SMACSS入門
SMACSS入門
iPride Co., Ltd.
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
 
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
Kenji Karahashi
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
 
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
Takuma Nishiyama
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成Kazuki Akiyama
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
 
サーバの種別を理解しよう
サーバの種別を理解しようサーバの種別を理解しよう
サーバの種別を理解しよう
Hiroyuki Ogawa
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
 
20160927 okubo mt_cloud_handson
20160927 okubo mt_cloud_handson20160927 okubo mt_cloud_handson
20160927 okubo mt_cloud_handson
Six Apart
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
 
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目Takashi Endo
 

What's hot (20)

Yat-wbnara201602
Yat-wbnara201602Yat-wbnara201602
Yat-wbnara201602
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
 
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
 
css基本。
css基本。css基本。
css基本。
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
 
SMACSS入門
SMACSS入門SMACSS入門
SMACSS入門
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
 
モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
 
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
 
サーバの種別を理解しよう
サーバの種別を理解しようサーバの種別を理解しよう
サーバの種別を理解しよう
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
 
20160927 okubo mt_cloud_handson
20160927 okubo mt_cloud_handson20160927 okubo mt_cloud_handson
20160927 okubo mt_cloud_handson
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
 
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
 

Similar to Styleguide Driven Development x CMS - MTDDC Tokyo 2015

コーディングがラクになる!? “自分仕様”のさくさくコーディング法
コーディングがラクになる!? “自分仕様”のさくさくコーディング法コーディングがラクになる!? “自分仕様”のさくさくコーディング法
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
Rico Sengan
 
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
Japan Electronic Publishing Association
 
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかたパララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
 
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろうPHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Atushi Sugiyama
 
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
 
141115 making web site
141115 making web site141115 making web site
141115 making web site
Himi Sato
 
DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」
DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」
DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」
Ikeda Ryou
 
Dreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToDreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowTo
Akira Maruyama
 
「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方
Yusuke Wada
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作Maboroshi.inc
 
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
ssuserd60633
 
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
 
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
 
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
 

Similar to Styleguide Driven Development x CMS - MTDDC Tokyo 2015 (20)

コーディングがラクになる!? “自分仕様”のさくさくコーディング法
コーディングがラクになる!? “自分仕様”のさくさくコーディング法コーディングがラクになる!? “自分仕様”のさくさくコーディング法
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
 
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
 
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかたパララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
 
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろうPHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
 
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
 
141115 making web site
141115 making web site141115 making web site
141115 making web site
 
DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」
DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」
DIST.42 クリエイティブコーディングで生み出すWebデザインの世界観「コードでつくる動きと見た目のこだわり」
 
Dreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToDreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowTo
 
「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
 
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
 
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
 
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
 
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 

Recently uploaded

遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
t m
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
Takayuki Nakayama
 

Recently uploaded (10)

遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
 

Styleguide Driven Development x CMS - MTDDC Tokyo 2015