dreamweaver cs5.5でワークフローはどう変わるのか?
DESCRIPTION
2011年6月23日(木)、アップルストア銀座で開催したCSS Nite in Ginza, Vol.57での鷹野 雅弘(スイッチ)のセッション。TRANSCRIPT
鷹野雅弘(スイッチ)
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: @[email protected]