SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
CSS Regionsを使った新しい
CSSレイアウトを作る方法
新しいWeb標準で新しい表現

HTML5 Conference 2013, Nov 30, 2013
13年11月30日土曜日
Who?
- 轟 啓介(とどろき けいすけ)
- アドビのデベロッパーマーケティング
- 担当はFlashからHTML5まで多岐
- 前職は開発者
- Java/J2EE(7年)、AS3/Flex/AIR(2年)
- HTML/JS/PHPなどは必要な範囲で

- Web DesigningでOne s Viewの
ショート連載を始めました
- 空冷のフォルクスワーゲンが
めちゃくちゃ好き

13年11月30日土曜日

@keisuke322
もうすぐ師走だなんて
信じらんない
まじで
CSSのレイアウト
- Flexbox
- Multi-column
- Grid Layout
- CSS Regions
- CSS Shapes
- CSS Exclusions

13年11月30日土曜日

今日はこの辺
第一章
コンテンツとレイアウトの
分離

13年11月30日土曜日
CSS Regions
複数のコンテナをまたいだ
コンテンツの流し込み

13年11月30日土曜日
13年11月30日土曜日
CSS Regions Support

as of Nov 28

Safari 6.1とiOS7 Safariではサポート開始
Chromeではflagを有効化すれば利用可能
13年11月30日土曜日
CSS Regions in W3C

13年11月30日土曜日
CSS Regions in W3C

13年11月30日土曜日
基本的な考え方
コンテンツとレイアウトを分離
コンテンツ
ワーゲンバス
フォルクスワーゲン・タイプ
2(Volkswagen Type 2)はフォル
クスワーゲンが製造する商用向けの
自動車である。一般には…

レイアウト
.page
#box1

#box2

#box3

13年11月30日土曜日
基本的な考え方
コンテンツとレイアウトを分離
コンテンツ
<article>
<h1>ワーゲンバス</h1>
<section>
<p>フォルクスワーゲン…
</p>
<img src= bus.jpg />
</section>
</article>

13年11月30日土曜日

レイアウト
<div class= page >
<div id= box1 ></div>
<div id= box2 ></div>
<div id= box3 ></div>
</div>
基本的な書き方
コンテンツとレイアウトを分離
コンテンツ
<article>
<h1>ワーゲンバス</h1>
<section>
<p>フォルクスワーゲン…
</p>
<img src= bus.jpg />
</section>
</article>

13年11月30日土曜日

レイアウト
<div class= page >
<div id= box1 class= region >
<div id= box2 class= region >
<div id= box3 class= region >
</div>
基本的な書き方
コンテンツとレイアウトを分離
コンテンツ

レイアウト

<article>
<div class= page >
<h1>ワーゲンバス</h1>
<div id= box1 class= region >
<section>
<div id= box2 class= region >
<p>フォルクスワーゲン…
<div id= box3 class= region >
</p>
</div>
<img src= bus.jpg />
</section>
CSS
流し込み(contents flow)
</article>

article {
-webkit-flow-into: myThread;
}
13年11月30日土曜日

.region {
-webkit-flow-from: myThread;
}
実際のコードを見てみる

13年11月30日土曜日
複数のフローもOK
A
広告
B

1
C

2
// コンテンツ

3
// コンテンツ

-webkit-flow-into: myThread_ABC;

-webkit-flow-into: myThread_123;

// レイアウト

// レイアウト

-webkit-flow-from: myThread_ABC;
13年11月30日土曜日

-webkit-flow-from: myThread_123;
CSS Regionsの応用
Mediaクエリーとの組み合わせ ①
コンテンツがフローするRWD

http://codepen.io/adobe/pen/vKixh
13年11月30日土曜日
CSS Regionsの応用
Mediaクエリーとの組み合わせ ②
UIが最適化される可変レイアウト

http://adobe-webplatform.github.io/regions-adaptive/
13年11月30日土曜日
CSS Regionsのサンプルコード

http://codepen.io/collection/jabto
13年11月30日土曜日
CSS Regionsサポートツール

13年11月30日土曜日
Adobe Edge Code CC
超軽量コードエディター

13年11月30日土曜日
Adobe Edge Code CC
超軽量コードエディター

CSS Regionsプロパティのコードヒント

CSS Regionsプロパティの値のコードヒント
13年11月30日土曜日
Adobe Edge Reflow CC
レイアウトデザインツール

13年11月30日土曜日
Adobe Edge Reflow CC
レイアウトデザインツール

CSSの知識があまりなくても、直感的な操作だけで
ブラウザで動作するレイアウトをデザインできる
13年11月30日土曜日
Edge ReflowでCSS Regions
現在のEdge Reflow CCプレビュー版では、
デフォルトでオフになっているので、
オンにして利用

任意のコンテナをRegionコンテナにできる
13年11月30日土曜日
Edge Reflow Demo

13年11月30日土曜日
第二章
四角形からの脱却

13年11月30日土曜日
CSS Shapes
シェイプの内側または周囲への
テキストの流し込み

Chrome 29, 30, Webkit Nightly 537が一部実装
13年11月30日土曜日
シェイプの内側に流し込み
-webkit-shape-inside

CSS
.circle {
/* shape the element as a circle */
shape-inside: polygon(0px, 150px, ...);
}
13年11月30日土曜日

.heart {
/* shape the element as a heart */
shape-inside: polygon(150px, 32px, ...);
}
シェイプの周囲に回り込み
-webkit-shape-outside

CSS
.circle {
/* shape the element as a circle */
shape-outside: polygon(0px, 150px, ...);
}
13年11月30日土曜日

.heart {
/* shape the element as a heart */
shape-outside: polygon(150px, 32px, ...);
}
http://www.youtube.com/watch?v=zKjoZvRCyh0
13年11月30日土曜日
http://adobe-webplatform.github.io/Demo-forAlice-s-Adventures-in-Wonderland/
13年11月30日土曜日
13年11月30日土曜日

Más contenido relacionado

Destacado

モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える拓樹 谷
 
The Mobile Frontier at HTML5 Conference 2013/11/30
The Mobile Frontier at HTML5 Conference 2013/11/30The Mobile Frontier at HTML5 Conference 2013/11/30
The Mobile Frontier at HTML5 Conference 2013/11/30Yukio Andoh
 
鳥取Python勉強会 第7回
鳥取Python勉強会 第7回鳥取Python勉強会 第7回
鳥取Python勉強会 第7回Yuji Oyamada
 
実践Sass 後編
実践Sass 後編実践Sass 後編
実践Sass 後編kosei27
 
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?Microsoft
 
Cumiki - エンジニアのための、ちょっといい感じのドキュメント作成ツール
Cumiki - エンジニアのための、ちょっといい感じのドキュメント作成ツールCumiki - エンジニアのための、ちょっといい感じのドキュメント作成ツール
Cumiki - エンジニアのための、ちょっといい感じのドキュメント作成ツールRyo Suzuki
 
初心者エンジニアの システム構築 失敗談
初心者エンジニアの システム構築 失敗談初心者エンジニアの システム構築 失敗談
初心者エンジニアの システム構築 失敗談Makoto Haruyama
 
Perl で作るメディアストリーミングサーバー
Perl で作るメディアストリーミングサーバーPerl で作るメディアストリーミングサーバー
Perl で作るメディアストリーミングサーバーHideo Kimura
 
My sqlのha構成について
My sqlのha構成についてMy sqlのha構成について
My sqlのha構成についてYu Komiya
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化masaaki komori
 
JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介Yusuke Hirao
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)Horiguchi Seito
 
[D14] MySQL 5.6時代のパフォーマンスチューニング *db tech showcase 2013 Tokyo
[D14] MySQL 5.6時代のパフォーマンスチューニング *db tech showcase 2013 Tokyo[D14] MySQL 5.6時代のパフォーマンスチューニング *db tech showcase 2013 Tokyo
[D14] MySQL 5.6時代のパフォーマンスチューニング *db tech showcase 2013 Tokyoyoyamasaki
 
「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)swwwitch inc.
 
MySQLバックアップの基本
MySQLバックアップの基本MySQLバックアップの基本
MySQLバックアップの基本yoyamasaki
 
今さらだけどMySQLとライセンス
今さらだけどMySQLとライセンス今さらだけどMySQLとライセンス
今さらだけどMySQLとライセンスHidenori Ishii
 
MySQL Index勉強会外部公開用
MySQL Index勉強会外部公開用MySQL Index勉強会外部公開用
MySQL Index勉強会外部公開用CROOZ, inc.
 
Devsの常識、DBAは非常識
Devsの常識、DBAは非常識Devsの常識、DBAは非常識
Devsの常識、DBAは非常識yoku0825
 

Destacado (20)

モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
The Mobile Frontier at HTML5 Conference 2013/11/30
The Mobile Frontier at HTML5 Conference 2013/11/30The Mobile Frontier at HTML5 Conference 2013/11/30
The Mobile Frontier at HTML5 Conference 2013/11/30
 
鳥取Python勉強会 第7回
鳥取Python勉強会 第7回鳥取Python勉強会 第7回
鳥取Python勉強会 第7回
 
実践Sass 後編
実践Sass 後編実践Sass 後編
実践Sass 後編
 
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
 
実践Sass 前編
実践Sass 前編実践Sass 前編
実践Sass 前編
 
Cumiki - エンジニアのための、ちょっといい感じのドキュメント作成ツール
Cumiki - エンジニアのための、ちょっといい感じのドキュメント作成ツールCumiki - エンジニアのための、ちょっといい感じのドキュメント作成ツール
Cumiki - エンジニアのための、ちょっといい感じのドキュメント作成ツール
 
初心者エンジニアの システム構築 失敗談
初心者エンジニアの システム構築 失敗談初心者エンジニアの システム構築 失敗談
初心者エンジニアの システム構築 失敗談
 
Perl で作るメディアストリーミングサーバー
Perl で作るメディアストリーミングサーバーPerl で作るメディアストリーミングサーバー
Perl で作るメディアストリーミングサーバー
 
My sqlのha構成について
My sqlのha構成についてMy sqlのha構成について
My sqlのha構成について
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
 
JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介
 
MySQLの冗長化 2013-01-24
MySQLの冗長化 2013-01-24MySQLの冗長化 2013-01-24
MySQLの冗長化 2013-01-24
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
[D14] MySQL 5.6時代のパフォーマンスチューニング *db tech showcase 2013 Tokyo
[D14] MySQL 5.6時代のパフォーマンスチューニング *db tech showcase 2013 Tokyo[D14] MySQL 5.6時代のパフォーマンスチューニング *db tech showcase 2013 Tokyo
[D14] MySQL 5.6時代のパフォーマンスチューニング *db tech showcase 2013 Tokyo
 
「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
 
MySQLバックアップの基本
MySQLバックアップの基本MySQLバックアップの基本
MySQLバックアップの基本
 
今さらだけどMySQLとライセンス
今さらだけどMySQLとライセンス今さらだけどMySQLとライセンス
今さらだけどMySQLとライセンス
 
MySQL Index勉強会外部公開用
MySQL Index勉強会外部公開用MySQL Index勉強会外部公開用
MySQL Index勉強会外部公開用
 
Devsの常識、DBAは非常識
Devsの常識、DBAは非常識Devsの常識、DBAは非常識
Devsの常識、DBAは非常識
 

Más de Keisuke Todoroki

プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメプロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメKeisuke Todoroki
 
Webデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツールWebデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツールKeisuke Todoroki
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグKeisuke Todoroki
 
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせモバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせKeisuke Todoroki
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013Keisuke Todoroki
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaKeisuke Todoroki
 
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]Keisuke Todoroki
 
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)Keisuke Todoroki
 
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium OverallADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium OverallKeisuke Todoroki
 
Adobe Flash platform の法人利用
Adobe Flash platform の法人利用Adobe Flash platform の法人利用
Adobe Flash platform の法人利用Keisuke Todoroki
 
Flexでサクッと作れ!Androidアプリ開発のススメ
Flexでサクッと作れ!Androidアプリ開発のススメFlexでサクッと作れ!Androidアプリ開発のススメ
Flexでサクッと作れ!Androidアプリ開発のススメKeisuke Todoroki
 
Adobe flash platform update 2010/11/17
Adobe flash platform update 2010/11/17Adobe flash platform update 2010/11/17
Adobe flash platform update 2010/11/17Keisuke Todoroki
 
Adobe Flash Platform Update 2010/09
Adobe Flash Platform Update 2010/09Adobe Flash Platform Update 2010/09
Adobe Flash Platform Update 2010/09Keisuke Todoroki
 
Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介Keisuke Todoroki
 

Más de Keisuke Todoroki (19)

プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメプロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
 
Webデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツールWebデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツール
 
PhoneGap Introduction
PhoneGap IntroductionPhoneGap Introduction
PhoneGap Introduction
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
 
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせモバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
 
PhoneGap Introduction
PhoneGap IntroductionPhoneGap Introduction
PhoneGap Introduction
 
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]更に進化するCSSの表現力と 新しいWebツール [Reloaded]
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
 
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
 
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium OverallADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
 
Adobe Flash platform の法人利用
Adobe Flash platform の法人利用Adobe Flash platform の法人利用
Adobe Flash platform の法人利用
 
Flexでサクッと作れ!Androidアプリ開発のススメ
Flexでサクッと作れ!Androidアプリ開発のススメFlexでサクッと作れ!Androidアプリ開発のススメ
Flexでサクッと作れ!Androidアプリ開発のススメ
 
Air for android with flex
Air for android with flexAir for android with flex
Air for android with flex
 
Adobe flash platform update 2010/11/17
Adobe flash platform update 2010/11/17Adobe flash platform update 2010/11/17
Adobe flash platform update 2010/11/17
 
MA6 Caravan Adobe AIR
MA6 Caravan Adobe AIRMA6 Caravan Adobe AIR
MA6 Caravan Adobe AIR
 
Adobe Flash Platform Update 2010/09
Adobe Flash Platform Update 2010/09Adobe Flash Platform Update 2010/09
Adobe Flash Platform Update 2010/09
 
Adobe flex and mobile 4p
Adobe flex and mobile 4pAdobe flex and mobile 4p
Adobe flex and mobile 4p
 
Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介
 

Último

「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 

Último (12)

「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 

CSS Regionsを使った新しい CSSレイアウトを作る方法