Your SlideShare is downloading. ×
更に進化するCSSの表現力と 新しいWebツール [Reloaded]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

更に進化するCSSの表現力と 新しいWebツール [Reloaded]

2,186
views

Published on

HTML5 Conference 2012での講演を再演したHTML5とか勉強会の時の資料です。Adobe Edgeツール&サービスで少し更新してあります。

HTML5 Conference 2012での講演を再演したHTML5とか勉強会の時の資料です。Adobe Edgeツール&サービスで少し更新してあります。


0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,186
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 WebKithttp://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.