Soumettre la recherche
Mettre en ligne
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
•
15 j'aime
•
1,922 vues
Keisuke Todoroki
Suivre
HTML5 Conference 2012での講演を再演したHTML5とか勉強会の時の資料です。Adobe Edgeツール&サービスで少し更新してあります。
Lire moins
Lire la suite
Signaler
Partager
Signaler
Partager
1 sur 32
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
Keisuke Todoroki
ZOMEKIご紹介
ZOMEKIご紹介
zomeki
第1回勉強会
第1回勉強会
zomeki
Adobe Animate CCを触ってみた
Adobe Animate CCを触ってみた
Yusuke Kano
dotFes - Web標準にEdgeを利かそう
dotFes - Web標準にEdgeを利かそう
Andy Hall
モダンなWebとモダンな開発ツールの新ネタ
モダンなWebとモダンな開発ツールの新ネタ
Andy Hall
Adobe & HTML5
Adobe & HTML5
Andy Hall
モダンなウェブをモダンなツールで創ろう!
モダンなウェブをモダンなツールで創ろう!
Andy Hall
Recommandé
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
Keisuke Todoroki
ZOMEKIご紹介
ZOMEKIご紹介
zomeki
第1回勉強会
第1回勉強会
zomeki
Adobe Animate CCを触ってみた
Adobe Animate CCを触ってみた
Yusuke Kano
dotFes - Web標準にEdgeを利かそう
dotFes - Web標準にEdgeを利かそう
Andy Hall
モダンなWebとモダンな開発ツールの新ネタ
モダンなWebとモダンな開発ツールの新ネタ
Andy Hall
Adobe & HTML5
Adobe & HTML5
Andy Hall
モダンなウェブをモダンなツールで創ろう!
モダンなウェブをモダンなツールで創ろう!
Andy Hall
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
HTML5 Caravan 福岡・Adobe&HTMLのスライド
HTML5 Caravan 福岡・Adobe&HTMLのスライド
Andy Hall
About rails 3
About rails 3
issei126
[AWSマイスターシリーズ] Amazon DynamoDB
[AWSマイスターシリーズ] Amazon DynamoDB
Amazon Web Services Japan
既存システムへの新技術活用法 ~fluntd/MongoDB~
既存システムへの新技術活用法 ~fluntd/MongoDB~
じゅん なかざ
Adobe&HTML 札幌 - HTML5 Caravan
Adobe&HTML 札幌 - HTML5 Caravan
Andy Hall
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
Adobe Creative SuiteではじまるHTML5の民主化
Adobe Creative SuiteではじまるHTML5の民主化
Teiichi Ota
AWSマイスターシリーズReloaded -AWS SDK for .NET-
AWSマイスターシリーズReloaded -AWS SDK for .NET-
Amazon Web Services Japan
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Akira Inoue
Web matrix2とvisual studio
Web matrix2とvisual studio
Tadahiro Ishisaka
Gaming cicd-pipeline gaming-technight-2
Gaming cicd-pipeline gaming-technight-2
Amazon Web Services Japan
[AWSマイスターシリーズ] AWS Client Side SDK -Android,iOS & JavaScript-
[AWSマイスターシリーズ] AWS Client Side SDK -Android,iOS & JavaScript-
Amazon Web Services Japan
PHP開発者のためのNoSQL入門
PHP開発者のためのNoSQL入門
じゅん なかざ
良くわかる!Adobe Creative Cloud グループ版
良くわかる!Adobe Creative Cloud グループ版
Tsuyoshi Nakao
Googleクラウドサービスを利用したシステム構築
Googleクラウドサービスを利用したシステム構築
Naomichi Yamakita
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発
Andy Hall
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Osamu Shimoda
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
Keisuke Todoroki
Webデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツール
Keisuke Todoroki
Contenu connexe
Similaire à 更に進化するCSSの表現力と 新しいWebツール [Reloaded]
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
HTML5 Caravan 福岡・Adobe&HTMLのスライド
HTML5 Caravan 福岡・Adobe&HTMLのスライド
Andy Hall
About rails 3
About rails 3
issei126
[AWSマイスターシリーズ] Amazon DynamoDB
[AWSマイスターシリーズ] Amazon DynamoDB
Amazon Web Services Japan
既存システムへの新技術活用法 ~fluntd/MongoDB~
既存システムへの新技術活用法 ~fluntd/MongoDB~
じゅん なかざ
Adobe&HTML 札幌 - HTML5 Caravan
Adobe&HTML 札幌 - HTML5 Caravan
Andy Hall
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
Adobe Creative SuiteではじまるHTML5の民主化
Adobe Creative SuiteではじまるHTML5の民主化
Teiichi Ota
AWSマイスターシリーズReloaded -AWS SDK for .NET-
AWSマイスターシリーズReloaded -AWS SDK for .NET-
Amazon Web Services Japan
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Akira Inoue
Web matrix2とvisual studio
Web matrix2とvisual studio
Tadahiro Ishisaka
Gaming cicd-pipeline gaming-technight-2
Gaming cicd-pipeline gaming-technight-2
Amazon Web Services Japan
[AWSマイスターシリーズ] AWS Client Side SDK -Android,iOS & JavaScript-
[AWSマイスターシリーズ] AWS Client Side SDK -Android,iOS & JavaScript-
Amazon Web Services Japan
PHP開発者のためのNoSQL入門
PHP開発者のためのNoSQL入門
じゅん なかざ
良くわかる!Adobe Creative Cloud グループ版
良くわかる!Adobe Creative Cloud グループ版
Tsuyoshi Nakao
Googleクラウドサービスを利用したシステム構築
Googleクラウドサービスを利用したシステム構築
Naomichi Yamakita
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発
Andy Hall
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Osamu Shimoda
Similaire à 更に進化するCSSの表現力と 新しいWebツール [Reloaded]
(20)
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
HTML5 Caravan 福岡・Adobe&HTMLのスライド
HTML5 Caravan 福岡・Adobe&HTMLのスライド
About rails 3
About rails 3
[AWSマイスターシリーズ] Amazon DynamoDB
[AWSマイスターシリーズ] Amazon DynamoDB
既存システムへの新技術活用法 ~fluntd/MongoDB~
既存システムへの新技術活用法 ~fluntd/MongoDB~
Adobe&HTML 札幌 - HTML5 Caravan
Adobe&HTML 札幌 - HTML5 Caravan
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Adobe Creative SuiteではじまるHTML5の民主化
Adobe Creative SuiteではじまるHTML5の民主化
AWSマイスターシリーズReloaded -AWS SDK for .NET-
AWSマイスターシリーズReloaded -AWS SDK for .NET-
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Web matrix2とvisual studio
Web matrix2とvisual studio
Gaming cicd-pipeline gaming-technight-2
Gaming cicd-pipeline gaming-technight-2
[AWSマイスターシリーズ] AWS Client Side SDK -Android,iOS & JavaScript-
[AWSマイスターシリーズ] AWS Client Side SDK -Android,iOS & JavaScript-
PHP開発者のためのNoSQL入門
PHP開発者のためのNoSQL入門
良くわかる!Adobe Creative Cloud グループ版
良くわかる!Adobe Creative Cloud グループ版
Googleクラウドサービスを利用したシステム構築
Googleクラウドサービスを利用したシステム構築
PhoneGapとハイブリッド開発
PhoneGapとハイブリッド開発
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Plus de Keisuke Todoroki
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
Keisuke Todoroki
Webデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツール
Keisuke Todoroki
PhoneGap Introduction
PhoneGap Introduction
Keisuke Todoroki
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
Keisuke Todoroki
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
Keisuke Todoroki
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Keisuke Todoroki
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
PhoneGap Introduction
PhoneGap Introduction
Keisuke Todoroki
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
Keisuke Todoroki
Adobe Flash platform の法人利用
Adobe Flash platform の法人利用
Keisuke Todoroki
Flexでサクッと作れ!Androidアプリ開発のススメ
Flexでサクッと作れ!Androidアプリ開発のススメ
Keisuke Todoroki
Air for android with flex
Air for android with flex
Keisuke Todoroki
Adobe flash platform update 2010/11/17
Adobe flash platform update 2010/11/17
Keisuke Todoroki
MA6 Caravan Adobe AIR
MA6 Caravan Adobe AIR
Keisuke Todoroki
Adobe Flash Platform Update 2010/09
Adobe Flash Platform Update 2010/09
Keisuke Todoroki
Adobe flex and mobile 4p
Adobe flex and mobile 4p
Keisuke Todoroki
Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介
Keisuke Todoroki
Plus de Keisuke Todoroki
(17)
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
Webデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツール
PhoneGap Introduction
PhoneGap Introduction
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
PhoneGap Introduction
PhoneGap Introduction
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
ADC MEETUP Round01 / SESSION1 : CS5.5 Web Premium Overall
Adobe Flash platform の法人利用
Adobe Flash platform の法人利用
Flexでサクッと作れ!Androidアプリ開発のススメ
Flexでサクッと作れ!Androidアプリ開発のススメ
Air for android with flex
Air for android with flex
Adobe flash platform update 2010/11/17
Adobe flash platform update 2010/11/17
MA6 Caravan Adobe AIR
MA6 Caravan Adobe AIR
Adobe Flash Platform Update 2010/09
Adobe Flash Platform Update 2010/09
Adobe flex and mobile 4p
Adobe flex and mobile 4p
Flex開発を加速するFlash Builder 4新機能紹介
Flex開発を加速するFlash Builder 4新機能紹介
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
1.
更に進化するCSSの表現力と
新しいWebツール 轟 啓介 / Adobe Systems HTML5とか勉強会 - Oct 23, 2012 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
2.
Who?
• 轟 啓介(とどろき けいすけ) • twitter: @keisuke322 • アドビのデベロッパーマーケティング • 担当製品 • 前職は開発者 • Java/J2EE(7年)、AS3/Flex/AIR(2年) • HTML/JS/PHPなどは必要な範囲で © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
3.
Adobe & HTML
http://html.adobe.com/jp © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
4.
Open Source Projects
jQuery Mobile Brackets CreateJS Apache Cordova © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
5.
Open Source Projects
Web Platform Docs Web Platform Docs http://www.webplatform.org/ W3C、Adobe、Apple、Facebook、 Google、HP、Microsoft、Mozilla、 Nokia、Opera WebKit WebKit http://html.adobe.com/jp/webstandards/ CSSによるレイアウトや 視覚効果の取り組み © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
6.
CSS Regions
雑誌のようなレイアウトをシンプルなCSSで表現 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
7.
CSS Regions
• レイアウトとコンテンツ(文字)を切り 離して考えるDTP(出版)のような手法 をCSSで実現 • 複数のDivなどで作られたRegion(領 域)に対して、別途用意した文字列を 流し込む • 各Region(領域)の配置に制約は無い © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
8.
CSS Regions
CSS article { flow-into: main-thread; } .region { flow-from: main-thread; } HTML <article> <p>HTML5 Conferenceにご参加のみなさん、こんにちは。私 は、轟というものです。どーぞ、よろしくお願い…</p> </article> <div id=”region1” class=”region”></div> <div id=”region2” class=”region”></div> <div id=”region3” class=”region”></div> © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
9.
CSS Regions
3つのRegion(領域)を定義した例。このRegionに文字列を流し込んでいる。画面サイ ズが変化すると、先頭Region(この場合は一番左のカラム)から文字列がオーバーフ ローして、次のRegion(この場合は真ん中のカラム)へと文字がフローしている。 http://adobe.github.com/web-platform/samples/css-regions/basic/single-flow.html ※Chromeブラウザで「chrome://flags」から「CSS領域を有効にする」でトライ可能 ※Webkit Nightly Buildでもトライ可能 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
10.
CSS Regions
解説記事 http://www.adobe.com/jp/devnet/html5/articles/css3-regions.html © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
11.
CSS Exclusions
自由なレイアウトに沿ってテキストを流し込む © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
12.
CSS Exclusions
• コンテンツ(文字)をフローさせる レイアウトを自由に設定する • shape-inside と shape-outside プロ パティを使って、指定の領域の内外 に文字をフロー • 複雑な図形にもSVGフォーマットで 対応可能 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
13.
CSS Exclusions
CSS .circle { shape-inside: polygon(0px, 150px /* ...more points */); } .heart{ shape-inside: polygon(150px, 32px /* ...more points */); } © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
14.
CSS Exclusions
CSS .circle_exclusion { shape-outside: polygon(0px, 150px /* ...more points */); } .heart_exclusion { shape-outside: polygon(150px, 32px / * ...more points */); } © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
15.
CSS Exclusions
雑誌のようなレイアウトにCSS RegionsとCSS Exclusionsを採用した例。複雑な形状もSVG フォーマットで定義できる。 CSS Regionsは、2012年9月の段階で80%の仕 様策定段階。CSS Exclusionsは50%くらい? © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
16.
CSS Custom Filters
映画のような視覚効果をWebで手軽に実現 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
17.
Adobe Edge ツール
& サービス 洗練された最先端のWebサイトを構築できる新しいツール&サービス Edge Animate Edge Reflow Edge Code Edge Inspect Edge Web Fonts Typekit PhoneGap Build © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
18.
Adobe Edge Animate
HTMLアニメーションツール © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
19.
Adobe Edge Code
プレビュー版公開中 HTML / CSS / JavaScript コードエディター © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
20.
Adobe Edge Code
プレビュー版公開中 HTML / CSS / JavaScript コードエディター • HTML/CSS/JavaScriptで作られた、オープンソースの超軽量 なコードエディター • Web制作者の作業効率を一気に上げる2つの機能 • QUICK EDIT(クイック編集) • Cmd + E (Mac) / Ctrl + E (Win) • カーソルのあるHTMLタグやJSのプロパティ、メソッ ドの定義をファイル切り替えせずにダイレクトに表示 • LIVE PREVIEW(ライブプレビュー) • Chromeブラウザと連携して、CSSの変更を保存する 前にライブプレビュー © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
21.
Adobe Edge Inspect
モバイルサイトのリモート検証ツール © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
22.
Adobe Edge Inspect
モバイルサイトのリモート検証ツール • スマホやタブレット向けのWebサイトを母艦PCからリモートで 検証する超便利ツール • モバイルサイト検証者の作業効率を一気に上げる2つの機能 • リモートで画面遷移 • 母艦PCの画面遷移が接続されたデバイス上でも追従 • リモートで Web インスペクト • 母艦PCからデバイス上のHTML画面に対して、Webインス ペクトが可能(Developer Tools) • リモートでスクリーンショット • 母艦PCからボタン一発で全デバイスのHTML画面のスク リーンショットを撮影し、母艦PCに保存 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
23.
Adobe Edge Inspect
モバイルサイトのリモート検証ツール • 必要なもの • 母艦PC(Mac / Win)+ Chromeブラウザ • 検証対象デバイス(iOS / Android) • 上記にインストールするInspectアプリ • 母艦PCとデバイスはパスコード(デバイス にインストールしたInspectアプリが最初に 表示)を使ってコネクションを作る © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
24.
Adobe Edge Reflow
近日プレビュー版公開 レスポンシブWebデザイン専用ツール © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
25.
Adobe Edge Web
Fonts 無料のWebフォントサービス © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
26.
Adobe PhoneGap Build
モバイルアプリのパッケージサービス © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
27.
Adobe & HTML
http://html.adobe.com/jp © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
28.
HTML5 特設サイト
http://adobe-html5.jp © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
29.
ADC
Adobe Developer Connection http://www.adobe.com/jp/devnet/ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
30.
ADC OnAir
http://onair.adclounge.jp © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
31.
CREATE THE WEB
TOUR Edge AnimateからCode、PhoneGap、Inspectなど 紹介するイベント。全セッション録画公開中。 http://adobe.ly/adcmeetup06 © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
32.
© 2012 Adobe
Systems Incorporated. All Rights Reserved. Adobe Confidential.
Télécharger maintenant