Web制作に欠かせない「Adobe Dreamweaver CS5」新機能を数回に渡り徹底紹介。前編、中編に続いて、今回は、「CSSが適用されたページを確認する機能」、「CSSがある程度適用された状態からコーディングをはじめる機能」など、CSSのコーディングに関する便利な新機能を中心に解説していく。

「Adobe CS5」体験版はこちらから

CMSのCSS編集における作業効率の向上

「CSSが適用されたページを確認する機能」だが、前回も述べた通り「Dreamweaver CS4」で「Webkit」が採用されていたということもあり、Dreamweaver CS5のデザインビューでは大きな変更はない。

CMSにも対応したライブビュー機能は、CSSの確認にも便利だ

ただし、CMSで使われているような入れ子状態のテンプレートがサーバー側のデータなども取り込んだ上でDreamweaverで閲覧できるライブビューの新機能は、CMSのCSS編集においても劇的な作業パフォーマンスの向上に繋がるであろう。

Adobe BrowserLabとの連携

Adobe BrowserLabでは様々なブラウザ上でのレンダリング結果を確認できる

加えて、Dreamweaver CS5では「Adobe BrowserLab」との連携が出来るようになったため、Webkitでの表示エミュレーションだけでなく、様々なOS環境での表示エミュレーションを行なうことが可能になった。

Adobe BrowserLabとは、MacやWindowsに搭載されている主要ブラウザ(Chrome、Safari、Firefox、Internet Explorer)で実際にどのような表示になるのかを同時に確認することが出来るオンラインのサービス。違うブラウザでの表示を左右に並べて比較したり、重ね合わせて表示の違いを確認できたるというような便利な機能がある。もちろんInternet Explorerで確認を行なうと、そのOSで使われているMSゴシックなどのフォントで表示されるし、Mac版Safariを選択してレンダリングを行なうとヒラギノなどのフォントで表示される。

全ての環境を持ち運べないモバイルでの用途に最適なサービスといえるAdobe BrowserLabだが、Dreamweaverからは独自のパネルが用意され、簡単に編集後のファイルを確認できるようになっている。

CSSが適用された状態からコーディングをする機能

「CSSがある程度適用された状態からコーディングをはじめる機能」についてだが、こちらは地味ながら性能が向上している機能である。Dreamweaver CS4にもある程度必要なプロパティやクラスがあらかじめ設定されたCSS付きのHTMLを使って新規作成という機能は実装されていた。

例えば、2段組みで横幅は固定、ヘッダー付きというような構造のサイトを作る場合、細かな内容はサイトごとに異なっても、大枠となる構造はほぼ同じものとなる。Dreamweaver CS4では、よく使われるであろうパターンをCSS付きのHTMLとして数多く用意してあった。

「Dreamweaver CS5」の新規作成パネルは、「CS4」に比べてパワーアップした様々なレイアウトのHTMLページがあらかじめ用意されている。

「CS4」、「CS5」でそれぞれCSS定義付きHTMLページを新規作成

「Dreamweaver CS4」で作成 「Dreamweaver CS5」で作成

純粋に段組みになっているのみというシンプルなものだ

リンクメニューなど、汎用性の高いパーツまで入っているのが嬉しい

Dreamweaver CS5でも基本的に同様のパターンでHTMLの新規作成が行なえるが、色分けがしっかりとしてあったり、メニューがついていたりと、実際にすぐ使えるような構成になっている。またHTMLソースのほうも、見出しタグが整理されたりしてDreamweaver CS4の頃に比べてすっきりとしたHTMLになっている。

こういうあらかじめある程度組み立てられた普遍的な土台をベースにWeb制作を行なう手法は、Webプログラミングの世界でも以前より行なわれており、scaffold(足場)などと呼ばれているのだが、Dreamweaver CS5でも同様の考え方を取り入れたと推測される。

Dreamweaver CS5の新機能について3回に分けて紹介してきたがいかがだっただろうか? CMSのテンプレートコーディングを行なう人からCSSでスタイルコーディングを行なう人まで、より便利になったDreamweaver CS5は、幅広い人に勧められるツールとなっていると思う。