コード嫌いのためのdreamweaver デザインビューの極意

コード嫌いのための Dreamweaver デザインビューの極意

r360studio 森 和 恵

@r360studio 森和恵

• Web系のセミナー講師（iMedio）

• 書籍執筆「よくわかるFireworksの教科書」など

• 勉強会の主催「ガチンコバトル勉強会 in 大阪」

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

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

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

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

コードビューはコレ

デザインビューはコレ

Dreamweaver デザインビュー 楽なのがイイ

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

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

本日の内容

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

ファイル管理のためのサイト設定

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

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

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

コンテンツをコピペする

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

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

コードをクリーン化

• [コマンド]→[HTMLのクリーンアップ] • Office経由の不用コードは

[コマンド]→[WordHTMLのクリーンアップ] • コードレイアウトは、

[コマンド]→[ソースフォーマットの適用] • [編集]→[検索／置換]

[編集]→[検索／置換]

<td valign="top"><p align="left">18:30</p></td>

CSSデザイナーパネル

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

CSSデザイナーパネル

1

2

3

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

コードを確認するツールたち

• タグセレクター • ライブビュー＆インスペクター • CSSデザイナーパネルの「計算済み」 • デザインビュー＆ビジュアルエイド

ライブビュー & CSSデザイナーパネルで確認

ライブビューで調べたい箇所クリック 「計算済み」セレクターが優先順位で並ぶ

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

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

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

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

仮画像であたりを取ってから作る

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

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

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

ダブルクリックで本番画像と差し替え

PSDファイルを直接指定し、Photoshop連携に

レスポンシブWebデザインの@media指定

• 画面のサイズに応じてCSSスタイルを指定 （フルHD 1920×1080px ピクセル密度 3 で 360×640）

• @media screen and ( 条件) { }内にセレクターを記述 （今回の条件は、max-width:360px）

• スマホ対応するには、 viewport指定を忘れずに <meta name="viewport" content="width=device-width">

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

@mediaの記述例

本日のまとめ

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

r360studio 森和恵

ご清聴ありがとうございました