Dreamweaver de HTML5

Akira Maruyama2010.05.29

CS5 Ver.

1

HTML5 Pack が発表！

2

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

HTML5 & CSS3に正式対応

3

HTML5 Pack レビュー

4

HTML5 Pack 導入で得られる主な機能

HTML5のタグ・属性、CSS3プロパティーのコードヒント

ライブビューのレンダリング精度向上

マルチスクリーンプレビュー

5

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

6

DEMO

7

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

8

HTML5 Pack 導入前Safari (Webkit)

9

HTML5 Pack 導入後Safari (Webkit)

10

ちなみにCS4では…

11

こうなります…

12

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

13

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

14

DEMO

15

http://tv.adobe.com/watch/adc-presents/introducing-the-dreamweaver-cs5-html5-pack/

Adobe TVのデモもご覧ください

16

残念ながら、CS5のみ…

17

デザインビューの対応。

コードヒントで出せるプロパティーの対応が不十分。opacityとかrgbaなどが出ない。

HTML構文とXML構文の両対応。HTML5は2つの構文を持っている。

セレクタのコードヒント対応。

もっと贅沢を言うと…

18

HTML5、CSS3のコードヒント表示が可能になります。

ライブビューがかなり改善されている。マルチプレビュー機能が便利。スマートホン向けサイト制作に使えます。

HTML5 Packは導入の価値あり。

残念ながらCS5のみ。

まとめ

19