こんにちは、デジタルスケープの伊藤和博です!

今週は、Dreamweaverの新機能に関してご紹介していきます。

Dreamweaverは一言でいうと、「すっきりわかりやすくなった」という新機能が、特にCSSを中心にいくつか搭載されています。


新しいサイト定義


サイト定義が非常に簡単になりました。サイトメニュー→新規サイトで設定するのは変わりありませんが、最初の設定項目は以下のウインドウのみで、設定後、すぐに作業を開始することが可能です。

サーバーへの設定等は必要に応じて行うようになりましたので、CS4以前のようにナビゲーションに従ってサーバー等への設定も含めたサイト定義を行う必要がなくなりました。




複雑な子孫セレクタが無くなった、CSSスターターレイアウト


Dreamweaverでは、新規でHTMLを作成する際に、あらかじめ用意されているCSSスターターレイアウトがありますが、CS4では32種類あり、CS5では16種類に数は減りました。

数は減りましたが、16種類の中のどのレイアウトを見ても、複雑な子孫セレクターは廃止されて、単純でわかりやすいクラスに置き換えられるようになりました。

下のスターターレイアウトのCSSスタイルパネルは、「2列をリキッドに、左サイドバー、ヘッダー、フッダー」時のもので、左がCS4、右がCS5です。見てすぐに、それが何であるかが判断つきます。




CSS の有効化と無効化


CSSスタイルパネルに「CSS の有効化と無効化 」のボタンが加わりました。無効化したいセレクタを選択し、ボタンをクリックすると、そのセレクタがコメントアウトの状態に変更になります。





CSSインスペクト


ライブビューの隣に、「インスペクト」というボタンが加わりました。このボタンをクリックし、デザインビューの上にマウスカーソルをのせると、padding、border、marginなどの各要素を、視覚的にわかりやすいように、それぞれハイライト表示してくれるようになります。




CS4までは、設定や表記が複雑な部分がありましたが、CS5になってからよりわかりやすく、コーディングをスタートしやすくなっています。




もっとDreamweaver CS5 を使いこなすなら!
Dreamweaver CS5の使い方・基本トレーニングの受講がオススメです!




イトウ先生が、Twitterを始めました!
みなさんもぜひ、フォローしてくださいね!

http://twitter.com/itoh_sensei