コード嫌いのためのdreamweaver デザインビューの極意
DESCRIPTION
セッション3 『コード嫌いのためのDreamweaver デザインビューの極意』 ▼エディター ガチンコバトル勉強会 in 大阪 http://r360studio.com/gachinko/editorgachinko2/TRANSCRIPT
コード嫌いのための 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 森和恵
ご清聴ありがとうございました