イトウ先生のTipsnote Dreamweaver CC 2015・強化されたDOMパネル

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

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

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

イトウ先生のTipsnote:目次

【 Dreamweaver CC 2015の新機能:強化されたDOMパネル 】 

今週は、Dreamweaver CC 2015から、「強化されたDOMパネル」をご紹介します。
DOMパネルそのものに関しましては以前のブログもあわせて見ていただきたいのですが、DOMパネルは、従来のDreamweaverを使用している方にとっては、Element Quick Viewの強化版になり、ドキュメントの構造を容易に追うことができる優れものです。
このDOMパネルが、Dreamweaver CC 2015の3月アップデート版で、複数選択、タグ・クラス・IDの編集や適用、新しい要素の挿入等がサポートされ、DOMパネルのみを使用してWebページの多くの部分をレイアウト、デザインできるように強化されています。
手打ちでページを作成される方に取ってみれば、Dreamweaverそのものの使用方法を理解しなくても、このDOMパネルの使い方だけ覚えておけばクラスやIDの適用は非常に簡単にできるようになりますので、ぜひ活用してみてください。

複数選択

CC2015の3月アップデート以前のDOMパネルでは、複数のタグを同時に選択することができませんでしたが、このアップデートでcommand【Ctrl】やshift【Shift】キーの併用で、複数のタグを同時に選択することが可能になりました。複数のタグを選択しておき同時に削除する、などの操作が可能になります。

dwcc15_dom002

ただし、複数のタグを選択すると、以下が無効になります。

・プロパティインスペクターや CSSデザイナーが無効に
・ページ下部に表示されるタグの階層が非表示に
・コードビューの挿入ポイントが非アクティブに

dwcc15_dom004

選択対象が視覚的にわかりやすく

3月アップデート以前では、選択しているタグのみがハイライト表示でしたが、3月アップデート以降では、親要素を選択または複数の親要素を選択すると、その中にある全ての子要素にもブルーのハイライトがあたるようになっています。

dwcc15_dom009

クラスやIDを直接適用

クラスやIDを適用したいタグをダブルクリックすると、タグの横にテキスト入力フィールドが表示され、「.」(ピリオド)を入力するとすでに作成しているクラス名が、「#」(ハッシュ)を入力するとすでに作成しているID名がコードヒントとしてリストで表示されます。クラスやIDを複数設定する場合は、スペースで区切って入力します。

dwcc15_dom006

タグを直接挿入

CC2015の3月アップデート以降は、DOMパネルから直接タグの挿入も可能になっています。挿入箇所を右クリックし、プルダウンから必要な項目を選択します。

dwcc15_dom008

DOMパネルでここまでできると、コードビューとどう違うの?と思う方もいるかも知れませんが、コードビュー上では各テキストノードやタグに対する他の属性を適用する用途として使用し、クラスやIDの適用と新しいタグの挿入は、DOMパネルから、というように使うと効率的だと思います。もちろんコードビュー上で全て行ってもいいわけですが、DOMパネルはあくまでも、HTMLのDOMを操作する、という目的としてとらえればいいと思います。
Dreamwerverの全ての機能を使うわけではないけども、このDOMパネルだけは使う、という方もでてくるかと思いますので、ぜひまだアップデート前の方はアップデートしてみてください。

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop 2020の使い方・基本 | Illustrator 2020の使い方・基本 |
| Photoshop 2020の使い方・画像補正編 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects 2020の使い方・基本 | AfterEffects 2020の使い方・実践1 |
| Premiere Pro 2020の使い方・基本 |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |