セッション3 　『コード嫌いのためのDreamweaver デザインビューの極意』 ▼エディター ガチンコバトル勉強会 in 大阪 http://r360studio.com/gachinko/editorgachinko2/

1. コード嫌いのための
Dreamweaver デザインビューの極意
r360studio 森和恵

2. @r360studio 森和恵
• Web系のセミナー講師（iMedio）
• 書籍執筆「よくわかるFireworksの教科書」など
• 勉強会の主催「ガチンコバトル勉強会 in 大阪」

3. 会場のみなさんに質問です

4. Dreamweaver インストールされてますか？

5. Dreamweaver 使ったことありますか？

6. Dreamweaver デザインビュー派ですか？

7. コードビューはコレ

8. デザインビューはコレ

9. Dreamweaver デザインビュー 楽なのがイイ
• 操作の時間はかかるけど、見ためわかりやすいで
• サイズ計算とかビジュアルで確認できるし
• よその人のコードも楽々調べられるで
• プロっぽい操作に見えないけど…

10. デザインビュー派の使い方、お見せします

11. 本日の内容
• ファイル管理のためのサイト設定
• コンテンツをコピペする
• CSSデザイナーパネルを使いこなす
• コードを確認するツールたち
• 仮であたりを取って、画像を作る
• レスポンシブWebデザインの@media指定

12. ファイル管理のためのサイト設定
• 最初にかならず、サイト設定をする
• ファイルパネルでファイル管理するため
• ローカル（保存先）とサーバ（FTP）情報を設定

13. [サイト]→[サイト管理]

14. ファイルパネルでファイル管理

15. コンテンツをコピペする
• ブラウザ経由でサイトから
• Dwをエディターに（txt）
• Word や Excel から（互換ソフトでもOK）
• [編集]→[ペーストスペシャル]で 書式選択も

16. ローカル→etcフォルダ
に素材や原稿を準備
ファイルパネルで開き
コピーする
拡張子→エディター
指定は環境設定で

17. コードをクリーン化
• [コマンド]→[HTMLのクリーンアップ]
• Office経由の不用コードは
[コマンド]→[WordHTMLのクリーンアップ]
• コードレイアウトは、
[コマンド]→[ソースフォーマットの適用]
• [編集]→[検索／置換]

18. [編集]→[検索／置換]
<td valign="top"><p align="left">18:30</p></td>

19. CSSデザイナーパネル
CSSをパネルで、視覚的にCSSをコーデング
• ソース
• @madia
• セレクター
• プロパティ

20. CSSデザイナーパネル
1
2
3

21. ライブビュー＋CSSデザイナーパネルは、CSS3に対応

22. コードを確認するツールたち
• タグセレクター
• ライブビュー＆インスペクター
• CSSデザイナーパネルの「計算済み」
• デザインビュー＆ビジュアルエイド

23. ライブビュー & CSSデザイナーパネルで確認
ライブビューで調べたい箇所クリック
「計算済み」セレクターが優先順位で並ぶ

24. 複数のセレクターが適用する場合に優先順位や継承を確認

25. [編集]→[Div] で選択範囲をCSSレイアウト

26. Divをデザインビュー ＋ ビジュアルエイドで確認

27. Divをライブビュー ＋インスペクトで確認

28. 仮画像であたりを取ってから作る
• デザインビューは、外部ファイルを展開表示
• 仮の画像を「http://placehold.jp/」で指定
• Photoshop連携で、本番画像を作る

29. まず、インスペクトでサイズを調べる

30. 仮画像を配置（Placehold.jpで作成）
※クイックタグ編集 [Ctrl]＋[T]

31. ダブルクリックで本番画像と差し替え
PSDファイルを直接指定し、Photoshop連携に

32. レスポンシブWebデザインの@media指定
• 画面のサイズに応じてCSSスタイルを指定
（フルHD 1920×1080px ピクセル密度 3 で 360×640）
• @media screen and ( 条件) { }内にセレクターを記述
（今回の条件は、max-width:360px）
• スマホ対応するには、 viewport指定を忘れずに
<meta name="viewport" content="width=device-width">

33. CSSデザイナーパネルの[@Media]に条件指定

34. @mediaの記述例

35. 本日のまとめ
• ファイル管理のための、サイト設定
• コンテンツのコピペとクリーン化
• CSSデザイナーパネル
• タグセレクター、ライブビュー、インスペクター
• 仮画像であたりを取ってから作る
• レスポンシブWebデザインの@media指定

36. r360studio 森和恵
ご清聴ありがとうございました