SlideShare a Scribd company logo
新しいCSSの仕様を
色々調べてみた
第3回HTML5ビギナーズ!	
  
2013/10/23	
@hiromitsuuuuu

1
Who am I?

@	
  hiromitsuuuuu	
  
Hiromi	
  Morikawa	
  

n  html5j スタッフ
n  うどん県 → 福岡 → 東京なう
n  Web Developper
n  HTML5, CSS, JS, UI,

Javaも少々

n  フロントエンド中心のR&Dチーム
でWeb標準系技術担当やってます
n  blog : RIAxDNP, Mitsu.log();
2
みんなはじめはビギナー

調べてみることにしました \(^o^)/
3
新しいCSSの仕様
CSS3でできるようになったこと
n  グラデーション
n  ドロップシャドウ
n  アニメーション
n  角丸
n  不透明度
n  Webフォント
           ・・・etc

そのなかでも、レイアウト系の仕様のお話をします
4
Agenda
n Flexbox 15min

n Regions 5min

n Shapes 5min

n Multi-column 5min n Grid Layout 2min n Exclusions 2min

n まとめ
【引用】	
  CSS	
  Regions	
  Module	
  Level1	
  ,	
  除外 (Internet	
  Explorer)	
  

5
お話しすること
n 何ができるの?
n 使えたら便利になること、これまでと変わること
n 基本的な考え方と使い方
n 簡単なデモ
n 詳しく知りたい場合に参考になるURLなど

6
Attention
n ほとんどが策定中の仕様の先行実装のため、
  ベンダープレフィックスが必要です
•  -webkit , -moz, -ms とか

n 本日おはなししないこと
•  プロパティや実装方法の詳細
•  ブラウザ間の実装差など

さっそく
しようを
みてみよう

7
まえおきが長くなりましたが…ひとつめの仕様

Flexbox
Flexbox ができること

コンテナ上で要素を縦横柔軟に配置できる!
便利になること ∼要素の回り込み∼
Befor
e
float:	
  left; 	
  
float:	
  left;	
  

ユニクロオンラインストア	
  

clear:	
  both;	
clear:	
  both;	
  

After
display:	
  flex; 	
  
display:	
  flex; 	
  

floatの解除を気にしなくていい ヽ(○´∀`)ノ
便利になること ∼可変幅∼
Yahoo!	
  JAPAN	
  

Befor
e
11	

width:	
  33.33%;	

After

flex:	
  1; 	
  

widthの面倒な計算もしなくていいヽ(○´∀`)ノ
11
便利になること

n 対象の要素以外に影響しない
n 固定幅と可変幅の切り替えが簡単にできる
n 並びの順番を簡単に変更できる

12
基本になる考え方

Flexコンテナ

Flexアイテム

Flexアイテム

Flexアイテム

13
Demo
n display : flex;
※ラッパーとなる要素に指定

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

.flex-container {
display: flex;
}
CSS	

HTML	

14
基本になる考え方
Flexコンテナ

Flexアイテム

Flexアイテム

Flexアイテム

Flexコンテナ直下の子要素は
自動的にFlexアイテムになる
Flexコンテナ用、Flexアイテム用のプロパティがある
15
プロパティ一覧
n 並びの方向を変える flex-direction
n 折り返す順を決める flex-wrap
n 並び順を変更する order
n 可変幅に対応する flex
n 横方向の寄せを指定する justify-content
n 縦方向の寄せを指定する align-items
etc…
デモで
かくにん
してみよう。
16
使われている例
flexbox適用前

flexbox適用後

html5j(hFp://html5j.org/)	
  

<section>
<a>
<h4></h4>
<img>
</a>
<p></p>
</section>

img要素	
  
order:	
  -­‐1;	
a要素	
  
display:	
  flex;	
  
flex-­‐direction:	
  column;	

レイアウトと構造を分離できる
17
もっと詳しく

草案

最終草案

勧告候補

勧告案

W3C勧告

n CSS	
  Flexible	
  Box	
  Layout	
  Module
n 過去の仕様に注意
•  box, flexbox, flex
•  IE10だけflexbox仕様…
•  flexboxの旧仕様、改定仕様、現行仕様の一覧	
  
n  ベンダープレフィックス無しで動作する環境も
n  CSS	
  Flexbox	
  Please!	
  
18
電子書籍とか雑誌レイアウトに使えそう

Regions
Regions ができること
複数の要素にまたがって
コンテンツを流し込むことができる

【引用】	
  CSS	
  Regions	
  Module	
  Level1	
  
便利になること

Flipboard	
  

代官山DAIKANYAMA	
  T-­‐SITE	
  

21
便利になること

Befor
e

できなかった!!
でごりごり書かないといけな
かった… まじやりたくない( `д´)
After

•  元となるコンテンツと表示エリアを
用意する
•  CSSを指定する

JSでの処理をしなくてもいいヽ(○´∀`)ノ	
  
22
基本になる考え方

abc…---------------------------------------------------------------------------------------------------------------------------

コンテンツの中身

<div>

+	

<div>

<div>
コンテンツを表示
させたい領域

abc…---------------------------------

=	

------------------------------------------------------------------流し込まれる!

23
Demo
n flow-into, flow-from
<!-- コンテンツの中身の定義 -->

/* コンテンツの中身の定義 */

#source {
-webkit-flow-into: sample;
}

※任意の名前

<div id="source">
<p>むかしむかし、あるところに…</p>
  <p>おじいさんは山へしばかれに…</p>
</div>
<!-- 表示する領域の定義 -->

/* 表示する領域の定義 */

<article>
<p class="region"></p>
<p class="region"></p>
</article>

.region {
-webkit-flow-from: sample;
 }
CSS	

HTML	

24
基本になる考え方

abc…---------------------------------------------------------------------------------------------------------------------------

コンテンツの中身

<div>

+	

<div>

<div>
コンテンツを表示
させたい領域

abc…---------------------------------

=	

------------------------------------------------------------------流し込まれる!

レイアウトとコンテンツを切り離して考える
25
Demo
n  はみ出し部分の表示方法 region-fragment
•  overflowプロパティと同じような動作

n  特定の領域にスタイルを適用する 擬似要素regions
n  Regions - a collection by Adobe Web Platform ‒
CodePen

デモで
かくにん
してみよう。

26
もっと詳しく
作業草稿
Working Draft,
WD	

最終草案
Last Call
WorkingDraft	

勧告候補

勧告案

W3C勧告

Proposed
W3C Recommendation,
Candidate
Recommendation, CR	
 Recommendation, PR	
 REC	

n CSS Regions Module Level1
n  Chrome, IE10+, iOS7 MobileSafari で動く
n  Chromeブラウザのchrome://flags で 「試験運用版の
ウェブプラットフォームの機能を有効にする」をONにする
n  領域 |	
  レイアウト |	
  Adobe	
  &	
  HTML
n  iOS 7 が対応した CSS Regions + Shapes による文字
レイアウトのサンプル	
27
四角形からの脱却!

Shapes
Shapes ができること
シェイプの内側、外側へテキストの流し込みができる

Magazin	
  Layout	
  by	
  Ronel	
  van	
  Heerden	
29
便利になること

Cooking	
  with	
  Shapes	
  

画像・四角形からの脱却 ヽ(○´∀`)ノ	
  
30
基本の考え方

float	

+

	

=	

abc…--------------------------------------------------------------------------------------------

回り込みエリアの形状を定義する
31
Demo
n shape-outside, shape-margin
.circle {
float: left;
-webkit-shape-outside: circle(100px,100px,100px);
-webkit-shape-margin: 10px;
}
<div>
<div class='circle'></div>
<p>ここの文章をまあるく回りこませてください…</p>
</div>

CSS	

HTML	

32
基本の考え方

ここ。

回り込みエリアの形状を定義する

33
Demo
n  さまざまな形状のプロパティ
n  複雑な形状も定義できる
n  Polygon Dawn
n  Nevermore
n  Exclusions and Shapes - a collection by Adobe
Web Platform - CodePen
デモで
かくにん
してみよう。

34
もっと詳しく
作業草稿
Working Draft,
WD	

最終草案
Last Call
WorkingDraft	

勧告候補

勧告案

W3C勧告

Proposed
W3C Recommendation,
Candidate
Recommendation, CR	
 Recommendation, PR	
 REC	

n  【仕様】 CSS Shapes Module Level 1
n  Chrome, iOS7 MobileSafari で動く
n  Chromeブラウザはchrome://flags で 「試験運用版のウェブプ
ラットフォームの機能を有効にする」をONにする
n  シェイプの中への流し込みの仕様は 
CSS Shapes Module Level 2 に延期された
n  シェイプ ¦ レイアウト ¦ Adobe & HTML
n  CSS Shapes the future of the web
35
雑誌のようなレイアウトがWEBでできる!

Multi-column Layout
Multi-column Layout ができること

段組みレイアウトが可能になる
便利になること
n Regionsと同じ流し込みの問題 +

nicoスライム 2012	
  autumn	
  and	
  winter	
  

雑誌のような	
  
レイアウトができる	
  
ヽ(○´∀`)ノ	
  
CSS	
  3	
  の段組みとその使いどころ	
38
Demo
n column-count
.column {
    column-count:2;
}

n column-width
.column {
column-width: 250px;
column-gap: 50px;
}

カラム数を指定する

CSS	

<div class="column">
<p>むかしむかし、あるところに…</p>
  <p>おじいさんは山へしばかれに…</p>
</div>
HTML	

段の幅を指定する

CSS	

<div class="column">
<p>むかしむかし、あるところに…</p>
  <p>おじいさんは山へしばかれに…</p>
HTML	
</div>

39
もっと詳しく

作業草稿
Working Draft,
WD	

最終草案
Last Call
WorkingDraft	

勧告候補

勧告案

W3C勧告

Proposed
W3C Recommendation,
Candidate
Recommendation, CR	
 Recommendation, PR	
 REC	

n  【仕様】 CSS Multi-column Layout Module
n  【対応状況】Can I use CSS3 Multiple column layout?
n  MDN	
  :	
  CSS	
  マルチカラムレイアウトの利用	
  
n  CSS3	
  MULTI	
  COLUMN	
  
• 

カラム数などを入力して確認することができるデモサイト	
  

40
ほかにもこんなのがあります

Grid Layout
Exclusions

&
Grid Layout
要素をグリッド状に
配置できる仕様
CSS Grid Layout Module
Level 1
.myGrid {
    display: grid;
}
【引用】CSS	
  グリッドを使ってアダプティブ レイアウトを作成する方法	
  

n  プロパティを使って列と行を設定する
n  まさにテーブルレイアウト!
n  IE10+ のみ (Can I use CSS Grid Layout?)
•  [参考]グリッド レイアウト(Internet Explorer)
42
Exclusions
要素を囲むように
テキストを折り返す仕様
CSS Exclusions Module
Level 1
.myExclusions {
    wrap-flow: both;
}
【引用】除外 (Internet	
  Explorer)	
  

n  要素の反対側にもフローさせることができる
n  情報も少なく、変更も多いまだまだの仕様
•  HTMLとCSS3でリッチなページレイアウトを実現する (Adobe)
•  除外 (Internet Explorer)
•  Adobe&HTML:除外領域とシェイプ
43
似たようなのがたくさん出てきてややこしくなってきましたが…

まとめ
新しいCSSの仕様
n Flexbox

Floatのような要素の回り込み
や、可変幅なボックスに

n Multi-column

雑誌のような段組レイアウト
をしたいときに

n Regions

複数の要素にまたがってコン
テンツを流し込みたいときに

n Grid Layout

要素をグリッド上に配置し
たいときに

n Shapes

シェイプの内外にテキストを
流し込みたいときに

n Exclusions

要素を囲むようにテキス
トを折り返すときに

【引用】	
  CSS	
  Regions	
  Module	
  Level1	
  ,	
  除外 (Internet	
  Explorer)	
  

45
まとめ
n  これまでのレイアウトがより簡単に!
n  複雑なレイアウトがCSSでできる!
n  でも実用にはもうすこしかかりそうなものも
n  調べる際に注意したいこと
•  Working Draftは仕様がころころ変わるので注意
•  新旧どちらのプロパティが実装されてるか
•  なるべく日付の新しい記事を読む

かんたんになると
ビギナーにもうれしい !!
わたしもできるかも !
46
新しいCSSの仕様を
色々調べてみた
第3回HTML5ビギナーズ!	
  
2013/10/23	

Thank you so much :)
@hiromitsuuuuu
Special thanks @ChisaMi

More Related Content

What's hot

メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化するメディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
Atsushi Tadokoro
 
Slide computational design2016_06_161026
Slide computational design2016_06_161026Slide computational design2016_06_161026
Slide computational design2016_06_161026
hiroshimadesignlab
 
3D CADと3Dプリンタ体験セミナー #1
3D CADと3Dプリンタ体験セミナー #13D CADと3Dプリンタ体験セミナー #1
3D CADと3Dプリンタ体験セミナー #1
Kou Ouchi
 
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウトメディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
Atsushi Tadokoro
 
3 dプリンタの使い方
3 dプリンタの使い方3 dプリンタの使い方
3 dプリンタの使い方
mgwsuzuki
 

What's hot (9)

Slide computational design2017_02_170929
Slide computational design2017_02_170929Slide computational design2017_02_170929
Slide computational design2017_02_170929
 
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化するメディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
 
What's Sketch.app
What's Sketch.appWhat's Sketch.app
What's Sketch.app
 
Slide takenaka cdt_03_170914
Slide takenaka cdt_03_170914Slide takenaka cdt_03_170914
Slide takenaka cdt_03_170914
 
Slide computational design2016_06_161026
Slide computational design2016_06_161026Slide computational design2016_06_161026
Slide computational design2016_06_161026
 
3D CADと3Dプリンタ体験セミナー #1
3D CADと3Dプリンタ体験セミナー #13D CADと3Dプリンタ体験セミナー #1
3D CADと3Dプリンタ体験セミナー #1
 
Slide prototyping workshop_02_170411
Slide prototyping workshop_02_170411Slide prototyping workshop_02_170411
Slide prototyping workshop_02_170411
 
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウトメディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
 
3 dプリンタの使い方
3 dプリンタの使い方3 dプリンタの使い方
3 dプリンタの使い方
 

Viewers also liked

モテる JavaScript
モテる JavaScriptモテる JavaScript
モテる JavaScript
Osamu Monoe
 

Viewers also liked (20)

JavaScriptクイックスタート
JavaScriptクイックスタートJavaScriptクイックスタート
JavaScriptクイックスタート
 
覚醒!JavaScript
覚醒!JavaScript覚醒!JavaScript
覚醒!JavaScript
 
Javascript基礎勉強会
Javascript基礎勉強会Javascript基礎勉強会
Javascript基礎勉強会
 
「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。
「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。
「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。
 
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなことJavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
 
これからはじめるための JavaScript 開発環境
これからはじめるための JavaScript 開発環境これからはじめるための JavaScript 開発環境
これからはじめるための JavaScript 開発環境
 
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
 
JavaScript基礎勉強会
JavaScript基礎勉強会JavaScript基礎勉強会
JavaScript基礎勉強会
 
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へJavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
 
Web × プログラミング ~JavaScript編~(2017/2/16)
Web × プログラミング ~JavaScript編~(2017/2/16)Web × プログラミング ~JavaScript編~(2017/2/16)
Web × プログラミング ~JavaScript編~(2017/2/16)
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScript
 
【Topotal輪読会】JavaScript で学ぶ関数型プログラミング 2 章
【Topotal輪読会】JavaScript で学ぶ関数型プログラミング 2 章【Topotal輪読会】JavaScript で学ぶ関数型プログラミング 2 章
【Topotal輪読会】JavaScript で学ぶ関数型プログラミング 2 章
 
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
JS初心者だけど3ヶ月でこんだけ書けるようになりました
JS初心者だけど3ヶ月でこんだけ書けるようになりましたJS初心者だけど3ヶ月でこんだけ書けるようになりました
JS初心者だけど3ヶ月でこんだけ書けるようになりました
 
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
 
JavaScript Basic 01
JavaScript Basic 01JavaScript Basic 01
JavaScript Basic 01
 
JavaScriptことはじめ
JavaScriptことはじめJavaScriptことはじめ
JavaScriptことはじめ
 
JavaScript 研修
JavaScript 研修JavaScript 研修
JavaScript 研修
 
モテる JavaScript
モテる JavaScriptモテる JavaScript
モテる JavaScript
 

Similar to 新しいCSSの仕様を色々調べてみた

Inside of excel 方眼紙撲滅委員会 #pyfes
Inside of excel 方眼紙撲滅委員会 #pyfesInside of excel 方眼紙撲滅委員会 #pyfes
Inside of excel 方眼紙撲滅委員会 #pyfes
Takeshi Komiya
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
Shinichi Sato
 
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudyExcel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Takeshi Komiya
 
Cocos2d x-sprite3d
Cocos2d x-sprite3dCocos2d x-sprite3d
Cocos2d x-sprite3d
aktsk
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
Taku AMANO
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
Takuya Ueda
 

Similar to 新しいCSSの仕様を色々調べてみた (20)

Inside of excel 方眼紙撲滅委員会 #pyfes
Inside of excel 方眼紙撲滅委員会 #pyfesInside of excel 方眼紙撲滅委員会 #pyfes
Inside of excel 方眼紙撲滅委員会 #pyfes
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
 
CSS3 Design Recipe
CSS3 Design RecipeCSS3 Design Recipe
CSS3 Design Recipe
 
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
 
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudyExcel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
 
㉑CSSでアニメーション!その2
㉑CSSでアニメーション!その2㉑CSSでアニメーション!その2
㉑CSSでアニメーション!その2
 
Cocos2d x-sprite3d
Cocos2d x-sprite3dCocos2d x-sprite3d
Cocos2d x-sprite3d
 
計算機理論入門09
計算機理論入門09計算機理論入門09
計算機理論入門09
 
NVMe でハァハァしようよ #sapporocpp
NVMe でハァハァしようよ #sapporocpp NVMe でハァハァしようよ #sapporocpp
NVMe でハァハァしようよ #sapporocpp
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
 
BMXUG つきじ#4
BMXUG つきじ#4BMXUG つきじ#4
BMXUG つきじ#4
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
 
concrete5 の超便利アドオン Designer Content を極める!
concrete5 の超便利アドオン Designer Content を極める!concrete5 の超便利アドオン Designer Content を極める!
concrete5 の超便利アドオン Designer Content を極める!
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
 
Firefox DevTools
Firefox DevToolsFirefox DevTools
Firefox DevTools
 
C++コミュニティーの中心でC++をDISる
C++コミュニティーの中心でC++をDISるC++コミュニティーの中心でC++をDISる
C++コミュニティーの中心でC++をDISる
 

Recently uploaded

2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
ssuserbefd24
 

Recently uploaded (12)

5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
 
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
 
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 

新しいCSSの仕様を色々調べてみた