2010年5月29日に開催されたDreamweaver Town Meeting in Tokyoで公演したスライド資料

1. Dreamweaver de HTML5
5Ver.
CS
Akira Maruyama
2010.05.29
1

2. HTML5 Pack が発表！
2

3. HTML5 & CSS3に正式対応
Adobe Labsから機能拡張が
ダウンロードできます。
Adobe Dreamweaver CS5 HTML5 Pack
http://labs.adobe.com/technologies/html5pack/
3

4. HTML5 Pack レビュー
4

5. HTML5 Pack 導入で
得られる主な機能
HTML5のタグ・属性、CSS3
プロパティーのコードヒント
ライブビューのレンダリング
精度向上
マルチスクリーンプレビュー
5

6. 機能1: HTML5、CSS3
コードヒント対応
6

7. DEMO
7

8. 機能2: ライブビュー
レンダリング精度向上
8

9. Safari (Webkit) HTML5 Pack 導入前
9

10. Safari (Webkit) HTML5 Pack 導入後
10

11. ちなみにCS4では…
11

12. こうなります…
12

13. <audio>や<video>
にも対応らしい
13

14. 機能3: マルチスクリーン
プレビュー
14

15. DEMO
15

16. Adobe TVのデモも
ご覧ください
http://tv.adobe.com/watch/adc-
presents/introducing-the-
dreamweaver-cs5-html5-pack/
16

17. 残念ながら、CS5のみ…
17

18. もっと贅沢を言うと…
デザインビューの対応。
コードヒントで出せる
プロパティーの対応が不十分。
opacityとかrgbaなどが出ない。
HTML構文とXML構文の両対応。
HTML5は2つの構文を持っている。
セレクタのコードヒント対応。
18

19. まとめ
HTML5、CSS3のコードヒント表示が
可能になります。
ライブビューがかなり改善されている。
マルチプレビュー機能が便利。
スマートホン向けサイト制作に使えます。
HTML5 Packは導入の価値あり。
残念ながらCS5のみ。
19