Adobe Dreamweaverは、コードエディター、ビジュアルデザインモード、CSSの作成、編集、管理のための高度なカスケーディングスタイルシート（CSS）ツール、そしてコンピューターからWebサーバーへのファイル転送を可能にする内蔵FTPクライアントなどのサイト管理機能を備えた、堅牢なWeb開発ツールです。Dreamweaver CS6では、新しいCSSプロパティの操作、モバイル対応Webサイトの構築、そしてAdobeの関連サービス（商用WebホスティングプラットフォームであるBusiness Catalystと、モバイルプラットフォーム向けアプリをコンパイルするためのクラウドベースサービスであるPhoneGap Build）の活用のためのツールが追加されています。
ウェブフォント
ウェブの歴史の大部分において、デザイナーは世界中のほとんどのコンピュータに既にインストールされている少数のフォントに頼らざるを得ませんでした。従来のウェブタイポグラフィは、訪問者のコンピュータに既に存在するフォントに依存していたため、デザイナーは数千種類もの美しいフォントの中から簡単に選ぶことができませんでした。
しかし現在では、すべての主要ブラウザがWebフォントをサポートしています。これにより、デザイナーは独自のWebサーバーにフォントを配置し、訪問者がそのウェブサイトを閲覧中にダウンロードできるようになります。しかし残念ながら、一部の一般的なWebブラウザでは異なるフォント形式が必要となるため、それらの形式を入手し、それらを使用するためのCSSコードを理解するのは容易ではありません。例えば、TrueType形式は多くのブラウザで動作しますが、すべてのブラウザで動作するわけではありません。FirefoxではWeb Open Font Formatが使用され、Internet Explorer 8ではEmbedded OpenType形式が、一部のiOSバージョンではScalable Vector Graphics形式が必須となっています。
Dreamweaver CS6は、2つ目の部分、つまりサイトコードへのCSSの追加をサポートします。様々なフォントファウンダリーからWeb対応フォントを入手したり、FontSquirrelから無料フォントをダウンロードしたりできます。ダウンロードしたフォントは、プログラムの新しいWebフォントマネージャーを使ってDreamweaverに追加できます。分かりやすいインターフェースでフォントを簡単に選択し、CSSスタイルの作成時に使用できるようになります。CSSスタイルにフォントを追加すると、Dreamweaverは必要なフォントファイルをサイトにコピーし、サイトのページや閲覧者がフォントを使用できるようにするためのCSSコードを生成します。
残念ながら、Dreamweaver には、Google の無料 Web フォントサービスや Adobe 独自の TypeKit といった一般的な Web フォントサービスと連携するためのツールは用意されていません。さらに、Web フォントマネージャーには、特定のフォントのバリエーション（例えば、太字や斜体など）を定義する機能がありません。つまり、Dreamweaver 内でテキストを太字や斜体に設定するだけでは、適切なフォントバージョンが適用されるとは期待できません。この問題を回避するには、各種タグにフォントバリエーションを指定します（例えば、太字バージョンのフォントを「strong」タグに適用し、斜体バージョンのフォントを「em」タグに適用するなど）。しかし、これは Dreamweaver が CSS を少し異なる方法で生成することで対応できたはずの余分な作業です。
それでも、Web フォント マネージャーは Web フォントの使用プロセスを簡素化するため、デザイナーにとっては大きなメリットとなります。
CSSトランジション
CSS トランジションを使用すると、CSS の変化を一定時間にわたってアニメーション化できます。例えば、マウスをリンク上に置いたときにリンクの色が変化し、マウスをリンクから離すと元の色に戻るアニメーションを作成できます。Dreamweaver CS6 では、このようなアニメーションを作成するための CSS トランジション パネルが導入されています。背景色、フォントサイズ、位置、余白、幅、高さなど、ほとんどの CSS プロパティをアニメーション化できます。CSS トランジションは、CSS で使用できる状態の変化に限定されています。つまり、アニメーションをトリガーできるのは、要素にマウスを合わせたとき、フォーム フィールドをクリック (またはタブで移動) したとき、ラジオ ボタンまたはチェックボックスをオンにしたとき、ページ内のアンカーにリンクしたときなど、限られた状況に限られます。Dreamweaver では、ページの読み込み時や訪問者が何かをクリックしたときに、ページにアニメーションを追加することはできません。最も一般的なトランジションはホバー トランジションで、これを使用すると Flash や JavaScript を使用せずに見事な効果を実現できます。
CSSトランジションは、あるCSSプロパティセットから別のCSSプロパティセットへの変化をアニメーション化するため、まずCSSスタイルを作成します。これは、タグ、クラス、ID、またはより高度なセレクターでも可能です。次に、DreamweaverのCSSトランジションウィンドウで、新しいトランジションボタンをクリックして、新しいトランジションを作成するためのコントロールパネルを開きます。ここで、「ターゲットルール」メニューから作成したスタイルを選択します。これは、アニメーションの開始位置を表します。次に、「トランジションオン」メニューから変更状態を1つ選択します。これは、アニメーションの開始タイミング（例えば、要素にマウスオーバーしたときなど）を宣言します。最後に、アニメーションの所要時間、アニメーション化するCSSプロパティ、およびそれらの最終値（例えば、色「オレンジ」）を選択します。
ページ上のCSSトランジションは、いくつでも追加、編集、削除できます。何より素晴らしいのは、CSSトランジションの作成に必要な煩雑なコードをDreamweaverが自動で処理してくれることです。CSSトランジションは楽しく、見た目も美しいですが、Chrome、Safari、Firefox、OperaはCSSトランジションに対応していますが、Internet Explorerのほとんどのバージョンは対応していません（まだリリースされていないIE 10でのみ表示可能です）。つまり、Webサーフィンをする人の多くは、作成したCSSトランジションを楽しむことができないということです。
HTML5 と CSS3 はどこにありますか?
WebフォントとCSSトランジションはCSS3入門として最適ですが、Dreamweaverはbox-shadow、text-shadow、border-radius、グラデーションといった他の一般的なCSS3プロパティについては、ほぼ同等のサポートを提供していません。Dreamweaverにこれらのプロパティ用のツールがないわけではありませんが、混乱しやすい部分です。
Dreamweaver CS6では、CSSの作成と編集に3つの方法が用意されています。コードビュー（独自のCSSを記述する）、CSSルール定義ウィンドウ（CSSのプロパティと値を選択できる、使いやすく親しみやすいウィンドウ）、そしてCSSスタイルパネルのプロパティパネルです。ルール定義ウィンドウは、CSSを作成する上で最も簡単な方法であり、初心者や中級ユーザーによく使用されます。残念ながら、Adobeはこのウィンドウをプログラムのバージョン間で更新していないため、多くの一般的なCSSプロパティ（CSS 2.1以降に存在していたプロパティも含む）が欠落しています。
border-collapse、box-sizing、そして多くの新しいCSS3プロパティといった便利なCSSプロパティを活用したい場合は、手動でコーディングするか、プロパティパネルを使う必要があります。Adobeがこの機会にCSSスタイル作成プロセスを刷新し、CSSコードを生成するための統一された方法を開発するか、少なくともルール定義ウィンドウを更新して一般的なCSSプロパティをすべて含めなかったのは残念です。
さらに、CSSグラデーションのような新しいCSS3プロパティの多くは、視覚的な要素が強く、作成が困難です。こうしたプロパティを作成・プレビューするためのビジュアルツールがあれば非常に有益であり、ビジュアルデザインツールの開発実績を持つ企業にとって、これは理にかなったステップと言えるでしょう。
このリリースでは、HTML5ツールも著しく不足しています。Dreamweaver CS6ではページのHTML5ドキュメントタイプを選択できますが、ビデオ、オーディオ、ヘッダー、セクション、記事、アサイドなどの新しいHTML5タグを挿入したり管理したりするためのツールは提供されていません。また、フォームツールでは、メール、日付、色などの新しいHTML5フォームタイプや、プレースホルダーやオートフォーカスなどのフォーム属性を指定することはできません。もちろん、コードビューでHTML5を手動で追加することもできますし、DreamweaverにはHTML5のコードヒントが用意されているので、使い方をガイドできます。しかし、Dreamweaverが単なるテキストエディター以上の機能を備えているからこそ、私たちはDreamweaverを使うのではないでしょうか。
モバイルWebデザイン
スマートフォンの普及が飛躍的に進んだことで、Webデザイナーはウェブサイト構築の見直しを迫られています。スマートフォンやタブレットなどのモバイルデバイスで閲覧されるサイトが増えるにつれ、デザイナーは小さな画面でもサイトの見栄えとパフォーマンスを向上させるために、様々な手法を取り入れています。Dreamweaver CS6には、モバイルサイト構築を支援する2つの新機能が搭載されています。
Dreamweaver CS5.5では、JavaScriptとCSSを駆使して標準HTML5を驚くほどアプリのようなWebページに変換するjQuery Mobileのサポートが導入されました。Adobeはこのサポートを継続するため、Dreamweaver CS6をjQuery Mobileバージョン1.0にアップデートし、jQuery Mobileスウォッチダイアログを追加しました。これにより、jQuery Mobile要素に様々なスウォッチやデザインを簡単に適用できます。このパネルは現在のjQuery Mobileスタイルシートを読み取り、サイトで利用可能な様々なスウォッチを視覚的に表示します。パネルはコンテキスト依存型であるため、選択した要素の種類（リスト、フッター、折りたたみ可能なパネル）に応じて、その要素に適用できるテーマのみが表示されます。
DreamweaverのjQuery Mobileツールは使いやすいですが、ナビゲーションバー、ダイアログボックスのリンク、ページトランジションといった特定のjQuery Mobile要素を追加するには、（自分でコードを記述する以外に）簡単な方法が用意されていません。さらに、Dreamweaver CS6のリリース前にも、jQuery Mobileは1.1アップデートをリリースしており、Androidサポートの強化など、いくつかの重要な新機能が追加されています。AdobeがDreamweaver内からjQuery Mobileをアップデートする機能を追加するまでは、ユーザーは新しいバージョンを自分でダウンロードしてインストールするか、プログラムに付属する旧バージョンのjQuery Mobileを使い続ける必要があります。
Dreamweaver CS6には、ブラウザウィンドウの幅に合わせて変化するWebページを構築するための「Fluid Grid Layouts」という新機能が搭載されました。CSSメディアクエリと柔軟なグリッドシステムを使用することで、同じHTMLをデバイスごとに異なる形式で表示できます。例えば、iPhoneの狭い画面幅では1列のコンテンツ、iPadでは3列のデザイン、デスクトップブラウザでは複雑な5列のデザインといったように、ページを分割して表示できます。レスポンシブWebデザインと呼ばれるこの手法は、デバイスごとに異なるCSSスタイルセットを巧みに組み合わせてレイアウトを作成する必要があるため、扱いが難しいです。
Dreamweaver CS6は、レイアウトとコントロールを巧みに視覚的に表現し、スマートフォン、タブレット、デスクトップ向けのデザインをプレビューできます。ドキュメントウィンドウ下部の「モバイルサイズ」ボタンをクリックすると、スマートフォン向けのレイアウトを確認できます。その後、新しいレイアウトボックスを追加し、ページ上の様々なコントロールを使ってその位置を調整できます。モバイル版の操作に慣れたら、タブレットボタンをクリックして、そのページのレイアウトを変更してみましょう。
ただし、このツールにはいくつかの制限があります。既存のページに可変グリッドレイアウトを適用することはできません。このタイプのページは最初から作成する必要があります。さらに、複雑なCSSデザインでよく使われるネストされたグリッドも作成できません。さらに、このツールはメディアクエリを使用して、各デバイスに同じCSSセレクターを適用する必要があります。しかし、Dreamweaver CS6のCSSスタイルパネルでは、メディアクエリの開始位置と終了位置が示されないため、どのCSSスタイルがどのレイアウトに適用されているかを特定するのが非常に困難です。
その他の機能強化
Dreamweaver CS6には、数多くの細かな機能強化が施されています。例えば、デザイナーの間でよく使われる手法である、単一のタグに複数のクラスを適用するための使いやすいインターフェース、より高速な同時アップロードとダウンロードを可能にするアップデートされたマルチチャンネルFTPエンジン、そしてWebページへのPhotoshopファイルの挿入ツールの刷新などです。この最後の変更は、ユーザーにとって改善となるかそうでないかは定かではありません。Photoshopファイルをページに挿入する方法が簡素化される一方で、画像の読み込み時にサイズ変更、切り抜き、さまざまな最適化設定の比較を行う機能など、Dreamweaver CS5.5で提供されていた多くのツールが削除されてしまうからです。
Adobeの商用WebホスティングサービスであるBusiness Catalystをご利用の場合、Dreamweaver CS6には、そのサービス固有の機能を追加するためのツールが組み込まれています。さらに、AdobeのPhoneGap Buildサービスへの組み込みアクセスにより、jQuery MobileベースのサイトをiPhone、Android、Blackberryなどのモバイルデバイス向けのモバイルアプリに簡単に変換できます。
プログラムの他の部分も、なかなか古びていきません。Dreamweaverのビジュアルデザインビューは、コンテンツを追加したり、Webページのビジュアル表現を編集したりできるので、シンプルなデザインには最適ですが、複雑なCSSベースのレイアウトを正しく表示できないことがよくあります。Dreamweaverのサーバーサイドツールも、このバージョンでは（過去2バージョンと同様に）あまり好評ではありませんでした。
Macworldの購入アドバイス
Dreamweaver CS6は、優れたコード編集機能、CSS、そしてサイト管理機能を備えた強力なWebビルダーです。CSS3プロパティの操作やモバイルフレンドリーなウェブサイトの構築に役立つ優れた機能が追加されています。しかしながら、このバージョンはWebデザイナーが依存するコアテクノロジーの一部において、やや遅れをとっているように見受けられます。HTML5ツールの不足、整理されていないCSS作成、そして効果的なデザインビューの欠如により、現在の標準や技術を用いたサイト構築は困難を極めています。
[ David Sawyer McFarland は Dreameaver CS5.5: The Missing Manual (O'Reilly, 2011) の著者です]
