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

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 11月・12月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 Dreamweaver CC 2014の新機能:新しいライブビューとエレメントクイックビュー 】 

今週は、つい先日、6月19日(木)よりダウンロード開始になりました、Adobe Creative Cloud 2014の中から、Dreamweaver CC 2014の新機能についてご紹介します。
今回のバージョンから、CC 2014というように、CCの次に年代を入れるようになったようです。
考えてみると、CS6からCCになったものも6月でしたので、この時期は新バージョン登場の時期、ということが想定できるのかもしれませんが、 Creative Cloud各アプリケーションともに様々な新機能を搭載していますので、今週はまずDreamweaver CC 2014からご紹介したいと思います。

CC 2014そのもののインストール

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

dwcc14_011

さっそくやってみよう!

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

dwcc14_001

dwcc14_002

ライブビューでの直接編集・1

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

dwcc14_012

ライブビューでの直接編集・2(divをドラッグで入れる)

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

dwcc14_016

dwcc14_017

dwcc14_018

エレメントクイックビュー

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

dwcc14_014

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

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |