デザインビューと上手にお付き合いする方法Dreamweaver Town Meeting in Tokyo 大喜利

2010/5/29　株式会社マックグラフィックアーツ：宮内 純人

twitter ID:necoze

デザインビューは使えない？！

実際のブラウザでの表示とだいぶ違う…

表示が崩れてしまう…

ソースビューで十分？

それだけの理由で使わないのはもったいない！

デザインビュー 最大の問題

デザインビューは"clearfix"が効かない（※clearfixの記述にもよりますが）

デザインビューはclearfixが苦手なんすよ

実際の表示 デザインビュー

だいぶ崩れてます…

CS5でも直ってません！！！（当社調べ）

"clearfix"以外の方法を考える

以下の方法であれば、デザインビューでも大丈夫！

✤ 後続の要素でclear: both;等をこまめに指定

✤ 親のボックスにfloatを設定

✤ 親のボックスにoverflow: hiddenを設定

でもデザインビューでの表示を踏まえてCSSを設定するのは

本末転倒？

「デザインタイムスタイルシート」を使おう！

「デザインタイムスタイルシート」とは

✤ 指定した外部CSSファイルを作業中のみ適用させることができる

✤ デザインビュー上で問題のある箇所に、調整用のスタイルを一時的に適用させる

「デザインタイムスタイルシート」ってどこで使えるの？

ここにあったんです！ボタンが…！

「デザインタイムスタイルシート」を使ってみます！

（デモをご覧ください）

さっきのデモはこれで解決しました

✤ 後続の要素でclear: both;等をこまめに指定

✤ 親のボックスにfloatを設定

✤ 親のボックスにoverflow: hiddenを設定

これでfloatを解除させてました

ここまでしてデザインビューを使うメリットって？✤ 実際の見た目を確認しながらコーディングできる…ではなく

✤ 素早くコーディングができる！

は…?

デザインビューで高速コーディング!!!

（デモをご覧ください）

デザインビューで高速コーディング!!!

✤ 1行空いたテキストは、デザインビューにペーストすると段落に変換される

✤ さらにショートカットを活用✤ command＋1～6で H1～6を設定✤ 選択＆tabでblockquote✤ 複数の段落を選択＆プロパティパネルのリストボタンで

ul（ol）・liに変換✤ 複数の段落を定義リスト（dl・dt・dd）に変換

あとでお試しを！

まとめ

まとめ

✤ デザインビューのレンダリングの弱さは、ちょっとした工夫でカバーできる

✤ デザインビューを活用すれば、作業時間の短縮にもつながる

ありがとうございました！

ご意見・ご感想はこちらまで

✤ twitter：necoze

✤ ブログhttp://necoze.cc

✤ ポッドキャストもやってます！http://blog.livedoor.jp/dotabatakaigi/