風のまにまに号
今回「Macromedia風テンプレート」の作成を通して、Dreamweaver MX2004を使ってのCSS編集のコツみたいなものがなんとなく分かってきました。サンプルファイルを元にしていると言っても、MTのテンプレートとして新たに入れ込まないとならない要素も色々あったので、その辺をドリを使ってクラスの追加等する必要があったわけです。HTML×テーブルレイアウトの時もそうだったのですが、WYSIWYGベースのデザインをするのに、ある程度「軌道に乗った」状態での作業というのが一番いい練習になります。一個一個の定義の厳密な意味は分からないけど、他と同じようにコレも配置してアレも配置して・・という具合にポコポコ入れていくうちに、段々ドリでCSSを操るときの「流れ」をつかむことができます。
そこで今回はDreamweaverのインターフェースを使った簡単なCSSの編集手順を紹介します。といっても、ＴＩＰＳというほどのこともない、ただの「触り方」を図説しているだけなので、あくまで参考程度にご覧ください。詳しい機能説明についてはマニュアルを読むことをおすすめします。
DreamweaverでCSSを編集する流れとしては、
- まずデザインビュー上で編集したいブロック（領域）を選択するか、領域の中にカーソルを入れます。（マウスのポインターをその辺りに近づけると、赤い枠線がピコッと出てきます）
- 「ウィンドウ」→「タグインスペクタ」を開くと現在カーソルがいる位置から順番にdivやspanで囲まれているスタイルの名前が一覧で出てくるので、この中から編集したいスタイルを選択します。
- 次に、その下にリストアップされている各属性の値を変更します。（図の例ではカラーパレットから背景色を変更しています）
- すると、呼び出し先のCSSファイルが自動的に開いて、今行った変更がCSSファイルの方にも反映されます。
（※このとき開かれるCSSファイルは、HTML内のlinkタグに記述されているものか、デザインタイムスタイルシートで指定されたものが呼び出されますが、いずれにしても「サイトの定義」で指定されたサイト内にCSSファイルが存在することが前提となります） - デザインビューの方にも編集結果が反映されているので、見栄えを確認してOKだったら最後にタブを切り替え、CSSファイルの方も上書き保存しておきましょう。
ちなみに、「タグインスペクタ」の表示方法は「リストビュー」と「カテゴリビュー」の２種類が切り替え可能で、「リストビュー」だとアルファベット順、「カテゴリビュー」だとスタイルの種類（フォント、背景、ボーダー、位置...etc）別に展開・折り畳みしながら検索できます。全部開くとあまりにパラメータが多くて、さながらVisual Basicでプログラミングしてるような気分になってきますが、辞書を片手に全て手打ちで書くよりは格段に分かりやすく効率的です。何よりタグを知らなくてもなんとなくいじってみたらできた、というようなことも出てくるわけで、デザイナーとしては可能性が広がります。
合わせて「ウィンドウ」→「CSSスタイル」のパネルも開いておくと、CSSファイルに定義されてるスタイル一覧もパッと把握できるので、こっちからスタイルを探してダブルクリック→CSSファイルの方へ移動して、手打ちで変更してしまってもいいです。スタイルによっては手で打ってしまった方が早い場合もあるし、ソースを見ないと不安、という人もいると思うので、そういう場合はこっちからアクセスすると早いです。
この２つのパネルを駆使すれば、「このスタイルはどこだっけ・・？」と迷うことはまずないでしょう。不満点を言うとすれば、先ほども書いたように最後にタブを切り替えてCSSファイル本体も「保存」しないといけないことと、
padding: 10px 0px 10px 10px;のようにmarginやpaddingを一括指定するときに「タグインスペクタ」だけだといまいち入力しずらいこと。この場合はプルダウンが４つ出現してくれれば直感的にポンポン入れられるのに、ここだけコードビューそのままの記述をしないといけないんですよね・・。
この問題だけ解消してくれたら、多分「デザインビュー」だけでもデザイン作業を完結できそうな気がするので、ぜひ次期バージョンではよりインターフェース寄りの進化を期待したいです。ドリの本領はやっぱり「インターフェースだけで本格デザインができる」という所だと思うので・・。
いつも影ながら拝見させて頂いております。
DreamweaverでのMTテンプレート作成はかなり参考になっています。
現在テンプレート作成をはじめて行っているんのですがそこで一つ疑問があります。
Dreamweaverでテンプレート変更を行った後F12キーで簡単に実際のデザイン確認を取る方法はないでしょうか？
pikeyさん、こんばんは。
MTテンプレートをDreamweaver(MX 2004)で編集する場合には、何通りかの方法がありますが、F12でのブラウザプレビューに対応するためには、
(1)CSSの指定を「デザインタイム」ではなく、ルートパスもしくは相対パスで記述する
(2)メタタグの文字コードの記述を、MTのタグではなく直接「UTF-8」等と記述する
の両方を満たしている必要があるようです。
通常MTテンプレートを編集する場合には、文字コードもCSSの場所も固定で決まっている場合が多いので、この方法でもほぼ支障はないのですが、複数デザインを切り替えてデザインビューしたり、複数の文字コード環境に流用するなど、汎用的な使い方がしにくくなる欠点があります。
そのため、私の配布しているMacromedia風テンプレートでは、(1)の方だけ直書きにしていますが、(2)の文字コードも直接記述すれば、きちんとブラウザプレビューできるはずです。
レスありがとうございます。
やはりその方法しかなさそうですねー
標準機能としてDWに搭載されるのを期待しつつ現状はこの方法でやってみます。
実は自分もばりばりテーブルデザイン派だったのでCSSに四苦八苦してます（笑）要約コツもつかめてきたようなのでこれからという感じです。
そうですね。ブラウザの機能に頼ったブラウザプレビューではなく、DW内のデザインビューの方でデザインの確認をしなさい、というのがMacromediaの方針なのかもしれません。
ContributeのようにDW自体がブラウザ機能を搭載してくれれば、すぐに解決すると思うんですけどね・・。