Dreamweaver CC 2015のアップデート

コードビューでのプレビュー

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
コードビューでソースの画像やカラーを視覚的に確かめられます。
講師:
04:44

字幕

このレッスンではコードビューに 加えられる改善についてご紹介します 細かい点ですが 使い易さ・ 使い勝手が大きく向上します 今コードビューでコードを見ていますが 写真などが使われている場合 ライブビューであれば どんな写真が使われるか 見れば直ちに分かりますが コードですと イメージ ( img ) タグに ソースが指定されているので どの写真を 使っているかというテキストは分かるけれど 実際のイメージは分かりにくいです 特に このように photo_top のように 意味のある名前ならまだしも 写真が増えてくると 01, 02, 03 のように 連番でつけてしまいます すると 01, 02, 04 と入れ違っていても 分かりませんね その場合 今回はポインタを合わせただけで サムネイルが表示されます これは DOM パネルと共用して 照らし合わせながら見ると 非常に使いやすいです では DOM パネルをもう少し広げましょう その為にこの上にあるパネル部分を 小さくします するとこの section の中に 後に div 要素があり その中にかなり入れ子になって img があります photo_left 憶えていればいいんですが こちらもポインタを合わせれば この写真だ と分かります 同様に もう少し下を見てみると DOM パネルで img を捜して この img がどんなものだったかが 簡単に分かります これはCSS についても 同様の改善が加えられています ではCSS の方を見てみましょう bootstrap.css に切り替えます CSS ではカラーを沢山使います 勿論 fff とか 000 といった値なら すぐ分かりますが 31708f だと どんな色か思い浮かびませんね この場合もポインタを合わせれば その色が表示されます fcf8e3 ・・・ こんな色です 8a6d3b・・・ 色が分かりますので非常に簡単に確認できます もう一度ソースコードの方に切り替えましょう ソースコードの方では CSS と違い 要素の入れ子が多く発生します ここがそうですね こういう場合折り畳むことができます 従来もできたんですが その場合に 選択をして 三角が出てくるので しかも 三角が今回大きくなりました 小さい三角ではクリックし損なうと 選択が外れてしまいー がっかりした経験があったかと思いますが 今回は選択する必要がありません 三角も大きくなりましたし ここをクリックするとー 直ちに畳むことができます しかも DOM パネルと 照らし合わせながら見るとー 今どの要素が選択されているか分かります では ここも畳んでしまうとー 今選択しているのは この入れ子になった div 要素ですね 簡単に畳んだり広げたりできー いちいち選ぶ必要がなくなりました 畳んだものを全て広げたい場合はー 「すべて展開」で直ちに展開できます この機能は CSS の方にも備わっています では新ためて bootrap.css の方に切り替えてみましょう CSS の方は幸い入れ子になることは無いのでー まだ楽だと思いますがー このようにセレクタが非常に多い場合でも こういった場合でも直ちに畳んでしまって 整理することができます 或いは 畳んだものを すぐ簡単に広げられますので CSS 或いは HTML のソースコードも含めて 使い易くなったと言えます このレッスンでは コードビューの改善についてご紹介しました 細かいですが非常に使い易くなった 或いはストレスが減ったと お分かりいただけたと思います

Dreamweaver CC 2015のアップデート

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

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

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

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

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