HTML5 Pack for Dreamweaver CS5 の使い方

HTML5 Pack for Dreamweaver CS5 は Dreamwever に HTML5 と CSS3 のサポートを追加する機能拡張です。この記事では、HTML5 と CSS3 の簡単な説明と、機能拡張のインストール後に Dreamweaver で利用可能になる新しい機能の概要を紹介します。

HTML5 Pack for Dreamweaver CS5 の使い方を示すビデオのデモは、Adobe TV の Introducing the Dreamweaver CS5 HTML5 Pack をご覧ください。

HTML5 and CSS3

HTML5 は World Wide Web コンソーシアムの中核をなす言語である Hypertext Markup Language (HTML) の 5 回目の大幅な改定です。Web が進化を続けるにつれ、Web の主要な言語と Web プロフェッショナルの能力に対する要求も高まってきました。HTML5 では、動的な Web サイトや Web アプリケーションの爆発的な増加や、ビデオや双方向性の利用の急増といった、長年かけて Web コミュニティの中で起きた多くの進歩が考慮されています。HTML5 は、今までの全ての主要な改定の目標と同じく、長い間、最適からは程遠い方法で実現したいページを制作せざるを得なかった Web デザイナーや開発者の体験を改善することを追及しています。

同様に、次世代の CSS である CSS3 の進歩は、HTML5 と共に Web 開発と閲覧体験の改善を約束するものです。CSS3 は Web コンテンツのスタイル設定をより多くの手段で行えるように、新しい種類のセレクタや属性を沢山導入しました。さらに、CSS3 では、ひとつの大きな仕様として記述されている CSS2 とは異なり、CSS の仕様が複数の要素に分割されました。この新しい仕様の体裁により、必要に応じて仕様の異なる部分を個別に更新することが可能になります。そのため、全体としてよりタイムリー且つ柔軟に仕様の進化を実現できることが期待されます。

HTML5 と CSS3 はまだ最終仕様の確定作業中ですが、どちらも HTML5 と CSS3 をサポートするブラウザであれば既に使うことができます。主要なブラウザ （Safari, Firefox, Opera, Internet Explorer, Chrome） の殆どの最新バージョンは少なくとも多少の （いくつかのブラウザはかなりの） HTML5 および CSS3 の機能をサポートしています。

Dreamweaver CS5 と HTML5 Pack

HTML5 Pack をインストールすると以下の機能やサポートが Dreamweaver CS5 から利用可能になります。

HTML5 コードヒント

HTML5 のコードヒントが他の Dreamweaver のコードヒントと同様に使えます。コードビューで目的のタグをタイプし始めると Dreamweaver がコードヒントを表示します。

Dreamweaver は、新しい HTML5 タグのヒントに加え、既存タグの新しい属性や値のコードヒントも提供します。（例えば、input タグの新しい属性や値など）

CSS3 サポートとコードヒント

HTML5 Pack は、HTML5 のコードヒントに加え、CSS3 のコードヒントも Dreamweaver CS5 に追加します。新しいコードヒントは CSS3 のセレクタや属性を全てサポートするものではなく、むしろ現在の W3C 仕様に最も適合したものになっています。

また、この機能拡張には、-moz, -webkit, -o のいくつかの CSS 属性に対する基本的なサポートも含まれています。

マルチスクリーンプレビューとメディアクエリ

マルチスクリーンプレビュー (ウィンドウ > Multiscreen Preview、または ファイル > Multiscreen Preview) は、編集中のページを 3 種類の異なる画面サイズ （スマートフォン、タブレット、デスクトップ） に表示されているかのごとくプレビューできる機能です。

（訳者注：マルチスクリーンプレビューは一度も保存されていないファイルを表示できません。新しいファイルを作成した場合は、ファイル名を指定して保存してからパネルを開くようにします。その後はパネル内の更新ボタンを押せば、編集内容がそのまま反映されるようになります。）

スマートフォン、タブレット、そしてデスクトップのプレビューに使用される領域の広さは標準値が設定されています。しかし、マルチスクリーンプレビューパネルの Viewport Sizes ボタンをクリックすることでこれらの数値を簡単に調整することができます。

ターゲットとするデバイスの寸法が分かれば、HTML ページにメディアクエリを追加して、サイズの異なるデバイスに対してそれぞれ異なるスタイルを指定することができます。メディアクエリを追加するには、マルチスクリーンプレビューパネルの Add Media Queries ボタンをクリックします。ビジュアルインターフェースからメディアクエリを追加したり読み込んだりできるのは Dreamweaver CS5 の重要な進歩です。異なるメディアクエリにより、ページが、スマートフォン、タブレット、標準的なデスクトップのブラウザ上それぞれでどのように見えるかを指定することが可能です。

ライブビューでの video と audio タグのサポート

video と audio タグは、プラグインや外部プレーヤを必要とせず直接ブラウザ内で映像や音声ファイルの再生を可能にする新しい HTML5 タグです。実質的に HTML5 ではブラウザがプレーヤになります。この機能は QuickTime のインストールを前提としています。

ライブビューの描画エンジンである Webkit は、タグが適切に使用されれば、ライブビュー内で映像や音声を再生できるように更新されています。また、いくつかの （全てではありませんが） CSS3 プロパティもライブビューの描画に反映されます。

HTML5 スターターレイアウト

HTML5 Pack 機能拡張は、HTML5 のレイアウト作業に取り掛かり易いよう 2 つの新しいレイアウトをインストールします。

このレイアウトは、他の CSS レイアウトと同様に、新規ドキュメントダイアログボックス （ファイル > 新規） から利用することができます。

デザインビューの表示改善

伝統的に、Dreamweaver は理解できないタグが見つかると、それを単純に無視していたため、デザインビューはデザインが最終的にどのように見えるか完全に理解できない状態でした。HTML5 タグに対しては、デザインビューは改善されており、関連するコンテンツが占める領域をブロックすることで、そのコンテンツがページ内の他の領域のレイアウトに持つ影響を理解しやすくなっています。

結論

Dreamweaver HTML5 Pack を使うと、HTML5 や CSS3 に準拠したページを作り、Web サイトを更新したり、最新の携帯デバイスでの表示に最適化したりすることができます。マルチスクリーンプレビューとメディアクエリのサポートによって、Dreamweaver で Web ページがスマートフォン、タブレット、デスクトップでどのように見えるかを、同時に確認し、テストし、編集することができます。