イトウ先生のTipsnote・ Dreamweaver CC 2014・新しいライブビューとエレメントクイックビュー

Dreamweaverなどの個別のアプリの前に、まず、各CC 2014のアプリケーション群は、現状のCCのアップデートという形ではなく、新規の別アプリをインストールする、という形になりますので、「Adobe Creative Cloud」というアプリケーションそのものを起動し、これまでのCCとは別に、各CC2014そのものを新規でインストールする必要があります。従来のCCをお使いの方で、各CCアプリケーションの、ヘルプメニュー→アップデート、によって、従来のCCがCC2014にアップデートされるわけではありませんのでご注意ください。また、CC2014をフルセットでインストールすると、それなりに時間もかかりますので、時間に余裕を持ってインストールされることをお勧めします。

新規のアプリとなりますので、当たり前ではありますが、CCとは異なる新しいスタートアップ画面からスタートです。その後、初回の起動時には、新機能の紹介を促すウインドウがいくつか表示された後、初期設定のパネルレイアウトで起動します。

それでは、Dreamweaver CC 2014の新機能の一つをご紹介しますが、Dreamweaverといえば、ライブビューを使用することで、webkitと同等のエンジンでプレビューすることが可能でした。
CC2014では、このライブビュー上で直接編集が可能になっています。CCまでのDreamweaverでは、デザインビューでの編集の場合、CSS3の新しいプロパティを使用すると一部表示がついてこないプロパティがありましたが、ライブビューで編集可能になることで、もうデザインビューにしなくても、リアルタイムで結果を見ながら編集できるのは非常にありがたい機能かといえます。
ライブビューの状態で、テキスト等をドラッグで選択すると、そのノードに一番近い要素を表示し、すぐ右側にある「＋」をクリックすると、クラスやidをそのまま追加することが可能になっています。なお、CSSのレイアウトのボックスモデルなど、いわゆるビジュアルエイドの部分に関しては、従来のデザインビューでの確認が必要になります。

ライブビューの時、挿入パネルのDivを、挿入したい箇所に向かってドラッグします。すると、ドラッグした箇所の前に入れるのか、後ろに入れるのか、ネストするのか、などを聞いてきます。指定の場所をクリックすると、その場所にdivを挿入することが可能になっています。

タグインスペクターの右端に、エレメントクイックビューというボタンが追加されました。 このボタンをクリックすると、現在のページのDOMツリーがそのまま確認することが可能です。従来のタグインスペクターのみの場合、その要素よりも下にあるDOMツリーがどのようになっているのがが追えませんでしたが、このエレメントクイックビューで、全体を確認することができるようになっています。



その他、CSSデザイナーパネルの強化など、魅力的な新機能を搭載したDreamweaver CC 2014ですので、すでにCCをお使いで、またCC 2014をダウンロードしていない方は、ぜひダウンロードして使ってみてください。

◆　Dreamweaver CC の使い方・基本トレーニング