イトウ先生のTipsnote Dreamweaver CC 2015・DOMパネル

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

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

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

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

お客様index

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


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 Dreamweaver CC 2015の新機能:DOMパネル 】 

今週も前回に引き続き、Dreamweaver CC 2015の中から、DOMパネルをご紹介します。
DOMとは、Document Object Modelの略でHTML各ページ毎に異なる各要素の構造のことをいいます。HTML要素の中に、head、bodyがあり、bodyの中にheader、main、footerなどの各要素と、その中の子要素としてdivがあるなど、概ねページの骨子を作成する要素は同じになるケースが多いといえますが、divの中にp、img、spanなどがあり、formの中にtableを作成するなど、各Webページ毎、様々な要素が含まれることでページは構成されているため、このDOMはHTMLの各ページ毎に異なるものになります。
Dreamweaver にはこのDOMを視覚化し、DOMをそのまま編集する機能が搭載されています。これは、Dreamweaver CC 2014に搭載された、Element Quick ViewというパネルがCC 2015でDOMというように名称変更されたものですが、Element Quick ViewパネルもDOMパネルも、基本的な使用方法は同じになり、従来からあるタグインスペクタをより使いやすくしたようなパネルになっています。
このパネルを使用することで、既存コンテンツのコピーペースト、複製、順番の入れ替えなどが容易に行うことが可能になりますので、ソースに直接入力したり、divなどの同じコンテンツを挿入パネルから何度も設定しなくても、DOMパネルだけでページを作成することが可能になります。

さっそくやってみよう!

Dreamweaver CC 2015では、デフォルトのワークスペースでウインドウ右下にDOMパネルが表示されています。Dreamweaver CC 2014の場合は、表示メニュー>Element Quick Viewを選択すると、同様のパネルを表示することが可能です。

Dwcc15_DOM002

DOMパネル内に表示されている各要素に子要素を含んでいる場合は、以下の画像のようにアイコンが三重に重なった状態になっており、クリックすると展開することが可能です。たたむ場合は再度クリックします。

Dwcc15_DOM005

DOMパネル上で必要な要素をクリックするとライブビュー上でフォーカスされ、また逆に、ライブビュー上でコンテンツをクリックしても、DOMパネル上でそのコンテンツにフォーカスがあたるため、DOMの構造上、そのコンテンツがページ内のどこにあるのかが双方向ですぐ確認可能です。また、IllustratorやPhotoshopのレイヤーの階層を変更するように要素ごと必要な箇所にドラッグすると、コンテンツの入れ替えを容易に行うことが可能です。

Dwcc15_DOM007

コンテンツを複製する場合は、DOMパネル上で複製したいコンテンツを右クリックし、複製を選択するだけで、現在のコンテンツの直下に複製が作成されます。さらに、このコンテンツにidが設定されていた場合は、idが重複しないよう別の値を自動的に作成してくれます。 また、DOMの構造がおかしな構造になるような要素の移動や、マークアップに誤りがでるような要素の移動はできないようになっています。例えばリストタグのみをdivの直下に移動する、などulやolなどの親要素を伴わないと成立しない要素の移動や、meta要素をbodyの中に入れる、等の操作は最初からできないようになっています。

Dwcc15_DOM009

このDOMパネル内で操作可能なことは、以下にあるように要素の削除、複製、コピー、ペースト、子としてペーストとなり、これらの操作は分割ビューまたはコードビュー上でソースコードそのものを選択し、そのままドラッグで要素の移動、option【Alt】+ドラッグで複製することも可能ですが、これらの操作は分割ビューまたはコードビュー上で行うよりも、このDOMパネルから行うことで、改行等も含めたソースの成形も行うため操作が早くなります。

Dwcc15_DOM011

新規で要素を作成する場合は、挿入パネルから挿入するか分割ビューまたはコードビューで手打ちするかになりますが、新規で作成する以外のことはすべてこのDOMパネルで行うと作業が非常に効率化できるかと思いますので、ぜひ使ってみてください。

関連講座

↑ページ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付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |