SlideShare a Scribd company logo
なんでCSS 
すぐ死んでしまうん 
Frontrend in Kanazawa 
https://www.flickr.com/photos/tveskov/3387394098
@pocotan001 
Hayato Mizuno
@大阪 
http://peatix.com/event/55901
BIG CSS 
https://www.youtube.com/watch?v=R-BX4N8egEc 
https://www.flickr.com/photos/nickpiggott/5212359135
“CSSはその単純さゆえに、 
大規模な実装では管理が難しい。 
BIG CSS 
“CSS, for all its simplicity, is a difficult language to manage in 
large-scale implementations. ” 
- MVCSS / Overview 
https://www.youtube.com/http://watch?mvcss.v=github.R-BX4N8egEc 
io/ 
https://www.flickr.com/photos/nickpiggott/5212359135
簡単なシンタックス ≠ 簡単な言語 
! 異なるバージョンとブラウザベンダーへの依存 
! ネームスペースの問題 
! 紳士協定だけでルBIG ールをCSS 
制限する難しさ 
! … 
https://www.youtube.com/watch?v=R-BX4N8egEc 
https://www.flickr.com/photos/nickpiggott/5212359135
http://p.twipple.jp/qk9sw
http://p.twipple.jp/qk9sw 
div { 
background: pink; 
}
望ましい設計のゴール 
https://www.flickr.com/photos/nickpiggott/5212959770/in/photostream/
メンテナンス 
60% 
開発 
40% 
http://d.hatena.ne.jp/asakichy/20120420/1334872770
メンテナンス 
60% 
開発 
40% 
要件変更 
60% 
移行 
23% 
バグ修正 
17% 
http://d.hatena.ne.jp/asakichy/20120420/1334872770
メンテナンス 
60% 
開発 
40% 
コードを 
理解する時間 
30% 
http://d.hatena.ne.jp/asakichy/20120420/1334872770
良いCSS設計のゴール 
メンテナンス 
60% 
開発 
40% 
コードを 
理解する時間 
30% 
http://article.enja.io/articles/css-architecture.html 
http://d.hatena.ne.jp/asakichy/20120420/1334872770 
! 予測しやすい 
! 再利用しやすい 
! 保守しやすい 
! 拡張しやすい
http://goo.gl/OnnMm
http://goo.gl/OnnMm 
設計はルーズなプロセスである 
! 問題を解決することで新たな問題を生む 
! うまくいくかどうかは試してみないとわからない 
! 要件が変われば設計も変わる(かもしれない)
メソドロジーとルール 
https://www.flickr.com/photos/bdesham/2432400623
“我々はページをデザインしているの 
ではない、コンポーネントのシステ 
ムをデザインしているのだ。 
“We're not designing pages, we're designing systems of components. ” 
- Stephen Hay 
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
http://styletil.es/
http://sparkbox.github.io/style-prototype/
http://medialoot.com/item/free-flat-ui-design-kit/
http://getbootstrap.com/
https://www.polymer-project.org/
https://www.flihctktpr.c:/o/cmo/dpehpoetons.io/la/peoncuolfetaann0/50914/f3u1ll/3E2tq2r9c6/
<paper-button label="button"> 
</paper-button> 
! 
<paper-button label="button" 
raisedButton> 
</paper-button> 
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button
<paper-button label="button"> 
</paper-button> 
! 
<paper-button label="button" 
raisedButton> 
</paper-button> 
Visual Non-visual 
! <core-icon> 
! <core-list> 
! <core-overlay> 
! … 
! <core-ajax> 
! <core-media-query> 
! <core-localstorage> 
! … 
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button
https:/h/wttwpsw:/./flwicwkrw.c.opmol/ypmheort-opsr/olajeecnt.uolfrega/nto/o5l9s4/d3e1s3ig2n2e9r6/
https://www.flickr.com/photohst/tlape:/n/cuulfesatonm/5e9le4m31e3n2ts2.9io6/
http://www.bestpsdfreebies.com/freebie/appz-psd-theme/
再利用可能な 
チャンクに分離する 
- OOCSS - 
https://github.com/stubbornella/oocss/wiki
.button { ... } 
! 
.panel { ... }
付加要素は 
Modifierで拡張する
HTML 
<a class="button">Download</a> 
CSS 
.button { ... } 
!
HTML 
<a class="button">Download</a> 
CSS 
.button { ... } 
.button-raised { 
box-shadow: 0 1px 1px rgba(0, 0, 0, .5); 
} 
.button-large { 
font-size: 24px; 
}
HTML 
<a class="button button-raised">Download</a> 
CSS 
.button { ... } 
.button-raised { 
box-shadow: 0 1px 1px rgba(0, 0, 0, .5); 
} 
.button-large { 
font-size: 24px; 
}
HTML 
<a class="button button-large">Download</a> 
CSS 
.button { ... } 
.button-raised { 
box-shadow: 0 1px 1px rgba(0, 0, 0, .5); 
} 
.button-large { 
font-size: 24px; 
}
.panel { ... }
.panel { ... } 
! 
.panel-colored { ... }
.panel { ... } 
! 
.panel-colored { ... } 
ステートルール 
- SMACSS - 
https://smacss.com/book/type-state
.panel { ... } 
! 
.panel-colored { ... }
.panel { ... } 
! 
/* States */ 
.is-panel-active { ... }
.panel { ... } 
! 
/* States */ 
.panel.is-active { ... }
.panel { ... } 
! 
/* States */ 
.panel:hover, 
.panel.is-active { ... }
再利用しない 
ユニークな部分は?
プロジェクトレイヤー 
- MCSS - 
http://operatino.github.io/MCSS/ja/
.tagline { ... }
.tagline { ... } 
! 
.tagline .button { ... }
プロジェクトレイヤー 
- FLOCSS - 
https://github.com/hiloki/flocss
.p-tagline { ... } 
! 
.p-tagline .c-button { ... }
関心を分離せよ 
https://www.flickr.com/photos/clement127/9761836954
シナリオを立て 
汎用さに対応する
<a class="button">Download</a>
<a class="button">Download</a> 
! 
<button class="button">Download</button>
<a class="button">Download</a> 
! 
<button class="button">Download</button> 
! 
<span class="button">Download</span>
.button { 
position: relative; 
display: inline-block; 
box-sizing: border-box; 
padding: 12px 26px; 
border: none; 
background: #f12078; 
color: #fff; 
vertical-align: middle; 
text-align: center; 
text-decoration: none; 
font-size: 18px; 
cursor: pointer; 
user-select: none; 
}
.button { 
position: relative; 
display: inline-block; 
box-sizing: border-box; 
padding: 12px 26px; 
border: none; 
background: #f12078; 
color: #fff; 
vertical-align: middle; 
text-align: center; 
text-decoration: none; 
font-size: 18px; 
cursor: pointer; 
user-select: none; 
} 
ベースは後から 
変更するのが難しい
.button { 
position: relative; 
display: inline-block; 
box-sizing: border-box; 
padding: 12px 26px; 
border: none; 
background: #f12078; 
color: #fff; 
vertical-align: middle; 
text-align: center; 
text-decoration: none; 
font-size: 18px; 
cursor: pointer; 
user-select: none; 
} 
Modifierで 
拡張すべき要素か 
どうかをよく検討する
.button { 
position: relative; 
display: inline-block; 
box-sizing: border-box; 
padding: 12px 26px; 
border: none; 
background: #f12078; 
color: #fff; 
vertical-align: middle; 
text-align: center; 
text-decoration: none; 
font-size: 18px; 
cursor: pointer; 
user-select: none; 
}
スタイルとJSの 
フックを分離する
HTML 
<div class="panel"></div> 
JS 
$('.panel').on('click' ...);
HTML 
<div class="panel js-ui-featured"></div> 
JS 
$('.js-ui-featured').on('click' ...);
AngularJS 
https://angularjs.org/
<div class="panel" ng-click="..."> 
</div>
コンポーネント同士の 
関係を疎にする
.panel { ... } 
! 
.panel .heading { ... }
.panel { ... } 
! 
.heading { ... }
.panel { ... } 
! 
.heading 関{ 連...す }る 要素として 
捉えるなら 
サブコンポーネント 
として定義する
.panel { ... } 
! 
.panel-heading { ... }
.panel { ... } 
! 
.panel-heading { ... } 
もしくは命名で 
どのようなルールが 
適用されるかを伝える
http://getbootstrap.com/
http://getbootstrap.com/ 
Button groups
<Bduivtt oclna sgsr=o"butpn-sg:roup"> 
<button class="btn">Left</button> 
<button class="btn">Middle</button> 
<button class="btn">Right</button> 
</div> 
http://getbootstrap.com/
レイアウトを 
分離する 
- SMACSS - 
https://smacss.com/book/type-state
.panel { 
float: left; 
box-sizing: border-box; 
margin-right: 20px; 
padding: 20px; 
width: 220px; 
background: #fff; 
}
.panel { 
float: left; 
box-sizing: border-box; 
margin-right: 20px; 
padding: 20px; 
width: 220px; 
background: #fff; 
}
.l-featured .panel { 
float: left; 
margin-right: 20px; 
width: 220px; 
}
.l-featured .panel { 
float: left; 
margin-right: 20px; 
width: 220px; 
} ユーティリティで 
対応する 
- SUIT CSS - 
https://github.com/suitcss
.u-float-left { 
float: left; 
} 
! 
.u-margin-r-m { 
margin-right: 20px; 
} 
! 
...
.u-float-left { 
float: left; 
} 
! 
.u-margin-r-m { 
margin-right: 20px; 
} 
! 
... 
グリッドシステム 
を活用する 
- Kite - 
http://hiloki.github.io/kitecss/
<div class="kite kite--grid has-gutter"> 
<div class="panel kite__item is-3of12"> 
... 
</div> 
<div class="panel kite__item is-3of12"> 
... 
</div> 
<div class="panel kite__item is-3of12"> 
... 
</div> 
<div class="panel kite__item is-3of12"> 
... 
</div> 
</div>
http://hiloki.github.io/kitecss/
命名のルール 
https://www.flickr.com/photos/bfishadow/3634061465
https://bem.info/
https://bem.info/ 
block 
block_modifier 
block__element 
block__element_modifier
http://article.enja.io/articles/about-html-semantics-and-front-end-architecture.html
component 
component--modifier 
component__subcomponent 
component__subcomponent--modifier 
http://article.enja.io/articles/about-html-semantics-and-front-end-architecture.html
https://github.com/hiloki/flocss
c-component 
c-component—modifier 
c-component__subcomponent 
c-component__subcomponent—modifier 
https://github.com/hiloki/flocss
.button { ... } 
! 
.button-raised { ... } 
! 
.button-large { ... }
.button { ... } 
! 
.button—-raised { ... } 
! 
.button—-large { ... }
.panel { ... } 
! 
.panel-heading { ... }
.panel { ... } 
! 
.panel__heading { ... }
https://github.com/bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection
スタイルガイドドリブン開発 
http://webuild.envato.com/blog/styleguide-driven-development/ 
https://www.flickr.com/photos/tveskov/5550625027
http://kaleistyleguide.com/
http://kaleistyleguide.com/ 
シナリオを 
可視化する
生きたスタイルガイド 
を持ち込む
https://www.flickr.com/photos/dex1138/7002850433 
Code Smells 
http://article.enja.io/articles/code-smells-in-css.html
スタイルの取り消し
.button { 
box-sizing: border-box; 
padding: 12px 26px; 
text-align: center; 
} 
! 
.button—-no-padding { 
スタイルの取り消し 
padding: 0; 
}
.button { 
box-sizing: border-box; 
padding: 12px 26px; 
text-align: center; 
} 
! 
.button—-no-padding { 
スタイルの取り消し 
padding: 0; 
}
.button { 
box-sizing: border-box; 
text-align: center; 
} 
! 
.button—-large { 
スタイルの取り消し 
padding: 12px 26px; 
}
マジックナンバー
マジックナンバー 
.bubble { 
position: absolute; 
top: -57px; 
left: 0; 
... 
}
マジックナンバー 
.bubble { 
position: absolute; 
top: -57px; 
left: 0; 
... 
}
マジックナンバー 
.bubble { 
position: absolute; 
bottom: 100%; 
left: 0; 
... 
}
受動的な詳細度
#main .button { 
margin: 20px !important; 
width: 100% !important; 
受動的な詳細度 
}
#main .button { 
margin: 20px !important; 
width: 100% !important; 
受動的な詳細度 
}
.u-margin-m { 
margin: 20px !important; 
} 
! 
.button--full { 
受動的な詳細度 
width: 100%; 
}
競合する要素に優先順位を 
! ピクセルパーフェクト or フレキシブル 
! すぐに稼働するコード or 美しいコード 
競合する要素に優先順位を 
! DRY or 保守性 
! 正しさ or 一貫性 
! 汎用性 or シンプルさ
https://github.com/pocotan001/ptan-no-css
https://github.com/pocotan001/ptan-no-css 
! ベースはFLOCSSを採用 
! 例外としてコンポーネントはプリフィックスなし 
! ユーティリティのみ略語を許容 
! CSSプリプロセッサーはなし 
! Concat, Myth, Autoprefixer, Minify
Designer ♥ Developer 
http://www.flickr.com/photos/fallentomato/11768159726
“壊れない完璧な設計を求めるのでは 
なく、壊れたときに勇気を持って修 
復できる設計を。 
- cssradar
THANK YOU 
https://www.flickr.com/photos/tveskov/3387394098

More Related Content

What's hot

react-scriptsはwebpackで何をしているのか
react-scriptsはwebpackで何をしているのかreact-scriptsはwebpackで何をしているのか
react-scriptsはwebpackで何をしているのか
暁 三宅
 
Redmine + MySQL 応答性能の調査結果と対策
Redmine + MySQL 応答性能の調査結果と対策Redmine + MySQL 応答性能の調査結果と対策
Redmine + MySQL 応答性能の調査結果と対策
Kuniharu(州晴) AKAHANE(赤羽根)
 
Data Factory V2 新機能徹底活用入門
Data Factory V2 新機能徹底活用入門Data Factory V2 新機能徹底活用入門
Data Factory V2 新機能徹底活用入門
Keisuke Fujikawa
 
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
Takuto Wada
 
パッケージの循環参照
パッケージの循環参照パッケージの循環参照
パッケージの循環参照
pospome
 
Redmineの意外と知らない便利機能(Redmine 4.2対応版)
Redmineの意外と知らない便利機能(Redmine 4.2対応版)Redmineの意外と知らない便利機能(Redmine 4.2対応版)
Redmineの意外と知らない便利機能(Redmine 4.2対応版)
Go Maeda
 
RedmineのFAQとアンチパターン集
RedmineのFAQとアンチパターン集RedmineのFAQとアンチパターン集
RedmineのFAQとアンチパターン集
akipii Oga
 
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 ( Redmine of one plant 2022 ...
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 (  Redmine of one plant 2022 ...ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 (  Redmine of one plant 2022 ...
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 ( Redmine of one plant 2022 ...
Kohei Nakamura
 
Redmineでメトリクスを見える化する方法
Redmineでメトリクスを見える化する方法Redmineでメトリクスを見える化する方法
Redmineでメトリクスを見える化する方法
Hidehisa Matsutani
 
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
Y Watanabe
 
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことマルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
Amazon Web Services Japan
 
初学者のためのプロンプトエンジニアリング実践.pptx
初学者のためのプロンプトエンジニアリング実践.pptx初学者のためのプロンプトエンジニアリング実践.pptx
初学者のためのプロンプトエンジニアリング実践.pptx
Akifumi Niida
 
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Springドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
増田 亨
 
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
Atsushi Kambara
 
RDRA DDD Agile
RDRA DDD AgileRDRA DDD Agile
RDRA DDD Agile
増田 亨
 
Go 製リアルタイムサーバーの Kubernetes での運用について
Go 製リアルタイムサーバーの  Kubernetes での運用についてGo 製リアルタイムサーバーの  Kubernetes での運用について
Go 製リアルタイムサーバーの Kubernetes での運用について
KairiOkumura
 
JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...
JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...
JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...
NTT DATA Technology & Innovation
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
 
いまさら聞けないselectあれこれ
いまさら聞けないselectあれこれいまさら聞けないselectあれこれ
いまさら聞けないselectあれこれ
lestrrat
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
 

What's hot (20)

react-scriptsはwebpackで何をしているのか
react-scriptsはwebpackで何をしているのかreact-scriptsはwebpackで何をしているのか
react-scriptsはwebpackで何をしているのか
 
Redmine + MySQL 応答性能の調査結果と対策
Redmine + MySQL 応答性能の調査結果と対策Redmine + MySQL 応答性能の調査結果と対策
Redmine + MySQL 応答性能の調査結果と対策
 
Data Factory V2 新機能徹底活用入門
Data Factory V2 新機能徹底活用入門Data Factory V2 新機能徹底活用入門
Data Factory V2 新機能徹底活用入門
 
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
 
パッケージの循環参照
パッケージの循環参照パッケージの循環参照
パッケージの循環参照
 
Redmineの意外と知らない便利機能(Redmine 4.2対応版)
Redmineの意外と知らない便利機能(Redmine 4.2対応版)Redmineの意外と知らない便利機能(Redmine 4.2対応版)
Redmineの意外と知らない便利機能(Redmine 4.2対応版)
 
RedmineのFAQとアンチパターン集
RedmineのFAQとアンチパターン集RedmineのFAQとアンチパターン集
RedmineのFAQとアンチパターン集
 
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 ( Redmine of one plant 2022 ...
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 (  Redmine of one plant 2022 ...ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 (  Redmine of one plant 2022 ...
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 ( Redmine of one plant 2022 ...
 
Redmineでメトリクスを見える化する方法
Redmineでメトリクスを見える化する方法Redmineでメトリクスを見える化する方法
Redmineでメトリクスを見える化する方法
 
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
JavaでWebサービスを作り続けるための戦略と戦術 JJUG-CCC-2018-Spring-g1
 
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことマルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
 
初学者のためのプロンプトエンジニアリング実践.pptx
初学者のためのプロンプトエンジニアリング実践.pptx初学者のためのプロンプトエンジニアリング実践.pptx
初学者のためのプロンプトエンジニアリング実践.pptx
 
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Springドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
 
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
Sansanがメッセージング (SQS) でスケーラビリティを手に入れた話
 
RDRA DDD Agile
RDRA DDD AgileRDRA DDD Agile
RDRA DDD Agile
 
Go 製リアルタイムサーバーの Kubernetes での運用について
Go 製リアルタイムサーバーの  Kubernetes での運用についてGo 製リアルタイムサーバーの  Kubernetes での運用について
Go 製リアルタイムサーバーの Kubernetes での運用について
 
JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...
JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...
JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
 
いまさら聞けないselectあれこれ
いまさら聞けないselectあれこれいまさら聞けないselectあれこれ
いまさら聞けないselectあれこれ
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
 

Viewers also liked

悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
 
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
 
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSTakeharu Igari
 
CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
 
Thinking about CSS Architecture
Thinking about CSS ArchitectureThinking about CSS Architecture
Thinking about CSS Architecture
拓樹 谷
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
 
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみたプログラマがデザインをがんばってみた
プログラマがデザインをがんばってみただいすけ ふるかわ
 
Web design
Web designWeb design
Web design
kazuko kaneuchi
 
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみたプログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Eigoro Yamamura
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
 
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
 
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Sasaki Kouhei
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論tsukasa obara
 

Viewers also liked (20)

悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
 
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
 
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
 
CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
Thinking about CSS Architecture
Thinking about CSS ArchitectureThinking about CSS Architecture
Thinking about CSS Architecture
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
 
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみたプログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
 
Web design
Web designWeb design
Web design
 
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみたプログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
 
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
 
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
 

Similar to なんでCSSすぐ死んでしまうん

CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and ProgrammingTaku AMANO
 
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるReact で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
 
Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話
Yosuke Doke
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
 
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた Shumpei Shiraishi
 
WordBech Osaka No.28
WordBech Osaka No.28WordBech Osaka No.28
WordBech Osaka No.28Kite Koga
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
 
MTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-partMTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-part
bitpart
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
 
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMagento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
 
アプリコンテスト
アプリコンテストアプリコンテスト
アプリコンテストTomonori Yamada
 
HTML5 in Firefox4
HTML5 in Firefox4HTML5 in Firefox4
HTML5 in Firefox4
dynamis
 
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training SlideLabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
Yusuke Tochigi
 
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションPlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
Kazuhiro Hara
 
WordPress と Bootstrap
WordPress と BootstrapWordPress と Bootstrap
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
youku
 
LDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening SlideLDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening Slide
ohotech
 

Similar to なんでCSSすぐ死んでしまうん (20)

CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるReact で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
 
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
 
WordBech Osaka No.28
WordBech Osaka No.28WordBech Osaka No.28
WordBech Osaka No.28
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
 
MTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-partMTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-part
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
 
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMagento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
 
アプリコンテスト
アプリコンテストアプリコンテスト
アプリコンテスト
 
CSS3 Design Recipe
CSS3 Design RecipeCSS3 Design Recipe
CSS3 Design Recipe
 
HTML5 in Firefox4
HTML5 in Firefox4HTML5 in Firefox4
HTML5 in Firefox4
 
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training SlideLabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
 
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC WebアプリケーションPlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
 
WordPress と Bootstrap
WordPress と BootstrapWordPress と Bootstrap
WordPress と Bootstrap
 
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
 
LDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening SlideLDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening Slide
 

More from Hayato Mizuno

レスポンシブWebデザインでうまくやるための考え方
レスポンシブWebデザインでうまくやるための考え方レスポンシブWebデザインでうまくやるための考え方
レスポンシブWebデザインでうまくやるための考え方
Hayato Mizuno
 
"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド
Hayato Mizuno
 
メンテナブルPSD
メンテナブルPSDメンテナブルPSD
メンテナブルPSD
Hayato Mizuno
 
赤い秘密
赤い秘密赤い秘密
赤い秘密
Hayato Mizuno
 
フロントエンドの求めるデザイン
フロントエンドの求めるデザインフロントエンドの求めるデザイン
フロントエンドの求めるデザイン
Hayato Mizuno
 
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hayato Mizuno
 
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニングレンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
Hayato Mizuno
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
 
CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?
Hayato Mizuno
 
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
Hayato Mizuno
 

More from Hayato Mizuno (10)

レスポンシブWebデザインでうまくやるための考え方
レスポンシブWebデザインでうまくやるための考え方レスポンシブWebデザインでうまくやるための考え方
レスポンシブWebデザインでうまくやるための考え方
 
"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド
 
メンテナブルPSD
メンテナブルPSDメンテナブルPSD
メンテナブルPSD
 
赤い秘密
赤い秘密赤い秘密
赤い秘密
 
フロントエンドの求めるデザイン
フロントエンドの求めるデザインフロントエンドの求めるデザイン
フロントエンドの求めるデザイン
 
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
Hello jQuery - 速習jQuery +綺麗なコードを書くためのヒント -
 
レンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニングレンダリングを意識したパフォーマンスチューニング
レンダリングを意識したパフォーマンスチューニング
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
 
CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?
 
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
 

Recently uploaded

Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptxiMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
kitamisetagayaxxx
 
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
Seiya Shimabukuro
 
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
Shinichi Hirauchi
 
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
Osaka University
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
ARISE analytics
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
osamut
 
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
Takuya Minagawa
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
Osaka University
 
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDDなぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
ssuserfcafd1
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
Yuki Miyazaki
 
「進化するアプリ イマ×ミライ ~生成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
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
sugiuralab
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
azuma satoshi
 

Recently uploaded (15)

Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptxiMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
 
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
 
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
 
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
 
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
 
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDDなぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
 
「進化するアプリ イマ×ミライ ~生成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
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
 

なんでCSSすぐ死んでしまうん