Dreamweaver CC 2015のアップデート

DOMパネルを使う

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
DOMパネルを使うと、コードの構造を確かめながら要素の操作ができます。
講師:
03:54

字幕

このレッスンでは DOM パネルの使い方についてご説明します DOM パネルというのは いま開いている HTML ドキュメントの— 右側のパネルの 下のものです DOM ドキュメント オブジェクト モデルの略ですが— ドムという風に呼んでいます このパネルを使いたいので 上にある「ファイル」などのパネル群は— 右クリックで小さくしてしまいましょう ドキュメント全体の要素が 簡潔に表示されています そしてこの重なったように見える部分— たとえばこのセクションをクリックすると— 実はこれは畳まれていて クリックして広がり— もう1回クリックして畳むという これは比較的おなじみの操作ですね そしてクリックしてお分かりになる通り— DOM パネルでの選択と— ライブビューでの選択は 常に一致しています 例えばこちらの写真を選択すると— DOM パネルでは img イメージの要素が選択されます それから DOM パネルで イメージを含んでいる div を選択すると— ライブビューでも div 要素が選択されています クラスがちゃんと表示されていますね 同じ名前 当然です 対応していますから では 例えばこのフッターをクリックすると— ちょっと影に隠れて見にくいですが— フッターが選択されています ライブビューで作業すると 視覚的に非常に分かりやすいのですが— 例えばこのフッターの部分は— DOM パネルで拡げてみると— div がずいぶん入れ子になっています p 要素のすぐ上の div これを操作したいんだという場合には— ライブビューで目で確認しながら— DOM で照らし合わせて どの要素を選んでいるのか— 特にネストされている場合なのですが— どれが選択されているのか ということを確認しながら— 操作をすると間違いがないと思います 例えばこれを右クリックで— コピーして— この「 About Us 」の— 2つめのパラグラフ この下にペーストしたいと思います もちろんライブビューで 操作することは可能なのですが— 今回は DOM のパネルの方で— いま選んでいる p 要素を選んで— 右クリックでペーストとすると— 下側にペーストすることができます では少し上にスクロールして— ここですね まず一番外側の div 要素があります この div 要素というのは 4つの やはり div 要素なのですが— 4つの div 要素を含んでいます DOM パネルと照らし合わせると お分かりになると思いますが— div が4つあるわけですね その順番を ちょっと入れ替えましょう 例えばこの鉛筆 これですね 鉛筆の div 要素が選ばれました こちらの DOM パネルと 照らし合わせてみると確実です で 移動したいのですが— この DOM パネルの中で移動しましょう 2個目 3個目 その後— いま左側の画面で青い四角の横に— 縦線の緑の線が現れました ここに入りますという印です もちろん前にあったものが後に回りますので— 順番が入れ替わるような形になりますが— これで手を放すと— 鉛筆が3番目に来たということになります このレッスンでは DOM パネルの 使い方についてご紹介しました ライブビューと DOM パネルを 照らし合わせながら使うと— 確実に 思った要素を思った場所に 操作することができるということです

Dreamweaver CC 2015のアップデート

2015年6月のアップデートでDremaweaverにも新しい機能やパネル、インターフェイスが加わりました。このコースではBootstrapフレームワークやビジュアルメディアクエリーの導入、新しくなったCSSデザイナパネルとDOMパネル、コード入力を効率化したり構文チェックを行うツールなど主な新機能を解説します。

1時間44分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年07月27日
アップデート日:2015年11月30日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。