dreamweaver cs5.5でワークフローはどう変わるのか？

鷹野雅弘（スイッチ）

Dreamweaver CS5.5でワークフローはどう変わるのか？

4 8 CS4CS3 CS5MX CS5.5

CS5 CS5.5

えっ？お金取るの？

Web Premium（retail）

Web Premium（upgrade）

$1,799150,181円

$39933,309円

1ドル=83.48円

Web Premium（retail）

Web Premium（upgrade）

$1,799150,181円

$39933,309円

236,250円157%

58,800円177%

お金を払うアップグレードに値するのか？

トレンド HTML5 CSS3 マルチデバイス対応（スマホ、タブレット）

HTML5

HTML5 Packβ → 11.0.3

HTML5 PackHTML5タグのサポートCSS3コードヒント

HTML5 Pack

CSS3ドラえもん（精度向上）video/audio対応

画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DDhttp://shopdd.blog51.fc2.com/blog-entry-932.html

ライブビューの強化

HTML5 PackHTML5タグのサポートCSS3コードヒントライブビューの強化

CSS3ドラえもん（精度向上）video/audio対応

ビューポートの設定メディアクエリーのコード挿入!

マルチスクリーン対応

バリデート

DWCS4まで Dreamweaverのバリデート機能 Firefoxでブラウザプレビューして、 Web Developer経由で W3Cバリデーター DWCS5 なし 拡張機能 （Validator for Dreamweaver CS5）

DWCS5.5 W3Cバリデート

CSS入力・編集

CSS入力 編集（修正）

入力

コードビュー［CSSルール定義］ダイアログボックス［CSSスタイル］パネル

編集（修正）

コードビュー［CSSルール定義］ダイアログボックス［CSSスタイル］パネルコードナビゲーターCSSインスペクト

確認作業

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

!

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

o!⁄CS4

Dreamweaverのライブビューのアップデートにより、border-radius、text-shadowにはベンダープリフィックスは不要（ただし、Firefox 3.6のサポートをはずせば／IE9のtext-shadowを除く）。

Safari 5対応のため、box-shadowにはベンダープリフィックスが必要。

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

CS5

DwCS5βローカルコンテンツのプレビューに対応

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

a+s+

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

主要ブラウザMac/Windows各バージョン

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー

タブレット

デスクトップ

スマートフォン

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー{デザインビュー／ライブビュー}＋ウィンドウサイズの固定

デザインビューブラウザプレビューライブビューBrowserLabマルチスクリーンプレビュー{デザインビュー／ライブビュー}＋ウィンドウサイズの固定

［A］デザインビューで作業し、　　ブラウザプレビューで確認

［B］デザインビューで作業し、ライブビューで確認　（たまにブラウザプレビューで確認）

［C］ライブビューを開きながら、コードビューで作業　（たまにブラウザプレビューで確認）

cf. デザインタイムスタイルシート

［A］デザインビューで作業し、　　ブラウザプレビューで確認

［B］デザインビューで作業し、ライブビューで確認　（たまにブラウザプレビューで確認）

［C］ライブビューを開きながら、コードビューで作業　（たまにブラウザプレビューで確認）

関連ファイル

マルチデバイス対応

ウィンドウサイズを変更すると、レイアウト（デザイン）も変更

<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >

<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >

メディア・クエリー

<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >

<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >

メディア・クエリー

320 910

iphone.css tablet.css desktop.css

レスポンシブ・デザイン

Dreamweaver CS5.5での強化ポイント

<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >

<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >

iphone.css tablet.css desktop.css

<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >

<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >

iphone.css tablet.css desktop.css

iphone.css tablet.css desktop.css

<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >

<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >

@import url("phone.css") only screen and (max-width:480px);@import url("tablet.css") only screen 　　and (min-width:481px) and (max-width:768px);@import url("desktop.css") only screen and (min-width:769px);

<meta name="viewport" content="width=device-width">

まとめ

スマートフォン対応 HTML5+CSS3 {デザインビュー／ライブビュー}　＋ウィンドウサイズの固定 メディアクエリー挿入機能

　（5.5からサイト対応） jQuery Mobile PhoneGap

2011年8月

http://www.facebook.com/DreamweaverCS5.5Book

twitter: @swwwitchtakano@swwwitch.com