デザインビューと上手にお付き合いする方法(Dreamweaver Town Meeting in Tokyo)
-
Upload
sumito-miyauchi -
Category
Documents
-
view
5.383 -
download
3
Transcript of デザインビューと上手にお付き合いする方法(Dreamweaver Town Meeting in Tokyo)
デザインビューと上手にお付き合いする方法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/