作業効率を高めるDreamweaverの小技
第7回 環境設定を見直そう（3）環境設定の最後、スタイルシート（CSS）まわりに関してご紹介します。 ■［HTMLタグの代わりにCSSを使用］「CSSレイアウト」、つまり、書式やレイアウトなどのビジュアル情報を(X)HTMLファイルでなく、CSSファイルに記述するワークフローの場合、Dreamweaverを使っていて困るのは、フォントサイズや文字のカラーなどをプロパティインスペクタ側でいじってしまった時、各ページにCSSの記述がエンベッドされてしまう点です。
※明るくした箇所で設定すると、余計なCSS/HTMLがソースに追加されてしまう。
数ページ程度のものを作る場合には各ページにCSSを記述する制作方法は許容できますが、多ページから構成する「サイト」を形成する場合、ページによってCSSなどの書式が統一されていないという状況が生じてしまいます。 ［環境設定］の［一般］カテゴリでは、［HTMLタグの代わりにCSSを使用］というチェックがあり、デフォルトではオンになっています。
このオプションがオンになっているとき上記の現象が起きてしまいますので、運用を行う担当者であれば、この設定をオフにするとよいかもしれません。 その後、第2回でご紹介した「XHTMLのクリーンアップ」を使って、font要素を一掃するなどを行ってもよいでしょう。 ■ ショートハンド
スタイルシートのコードを記述する際、簡略化して記述する方法があります。Dreamweaverでは、この省略記述を“ショートハンド”と呼んでいます。
筆者は［フォントに使用］［背景に使用］をオフ、残りをオンで使っています。ショートハンドの場合、省略したプロパティが初期化されてしまうという仕様のため、意図せず異なった適用結果になってしまうことがあることを避けるためです。
［フォントに使用］段落を形成するp要素に対して、フォントをArial、サイズを12pixel、ライン高を16pixel、カラーを#FF0000で指定する場合、ショートハンドを使用せずに記述すると、次のようになります。
p { ショートハンドを使用して記述すると、次のように少ない行数で記述することができます。
p {
なお、この場合［font-］ではじまる項目は1行にまとめられますが、同じ［タイプ］カテゴリで設定しますが［color］はfontの行にまとめられることはありません。 ［背景に使用］body要素に対して、背景のカラーを#FFFFCC、背景画像を［bg.jpg］で適用、縦軸(y)に対してのみリピートで指定する場合、ショートハンドを使用せずに記述すると、次のようになります。
body { ショートハンドを使用して記述すると、次のように少ない行数で記述することができます。
body { [マージンと余白に使用]値が1つの場合h1要素に対して、背景のカラーを#FF99FF、余白・マージンそれぞれに［すべて同一］のチェックを入れて、余白の上下左右を5pixel、マージンの上下左右を7pixelで指定する場合は、ショートハンドの使用の有無に関わらず、下記のコードになります。
h1 { 値が2つの場合h1要素に対して、背景のカラーを#FF99FF、余白の上下が5pixel、左右が15pixel、マージンの上下が7pixel、左右が10pixelで指定する場合、ショートハンドを使用せずに記述すると、次のようになります。
h1 { ショートハンドを使用して記述すると、次のように少ない行数で記述することができます。
h1 { 値が3つの場合h1要素に対して、背景のカラーを#FF99FF、余白の上が5pixel、左右が15pixel、下が7pixel、マージンの上が5pixel、左右が10pixel、下が7pixelで指定する場合、ショートハンドを使用せずに記述すると、次のようになります。
h1 { ショートハンドを使用して記述すると、次のように少ない行数で記述することができます。
h1 { ●おぼえておこう：マージンと余白のショートカットと値の数上下、左右それぞれのペアの値が同じときには省略できると考えるとよいでしょう。
●ボーダーとボーダー幅に使用h1要素に対して、背景のカラーを#FF99FF、余白の上下左右が5pixel、上下左右のボーダーのスタイルが実線(solid)で4pixel、上と左のボーダーカラーを#FFCCFFと薄くして、下と右のボーダーカラーを#FF66FFと濃くすることで、エンボス表現を施して設定する際、ショートハンドを使用せずに記述すると、次のようになります。
h1 { ショートハンドを使用して記述すると、次のように少ない行数で記述することができます。
h1 { なお、要素h1に対して、背景のカラーを#FF99FF、余白の上下左右が5pixel、上下左右のボーダーのスタイル、幅、カラー共に［すべて同一］のチェックを入れて、それぞれに実線(solid)、4pixel、#FF66FFを指定した場合の記述は、ショートハンドの使用の有無に関わらず、下記のコードになります。
h1 { ●ショートハンドの使用
［オリジナルで使用している場合］、［上記のチェックボックスに合わせる］のオプションを選択することができます。 ■ 修正時にCSSファイルを開く文字通り、CSSを編集時に、バックグラウンドで該当ファイルが開きます。ファイルが開いたままなので、保存後も閉じない限り、アンドゥ（［ファイル］ → ［取り消し］）が可能だというメリットがあります。
一方、デメリットもあります。
アスタリスクの付いているファイル名が未保存のCSSです。よって、ブラウザプレビュー時にCSSの編集内容が適用されないといった状況が出てくるのです。
［ファイル］ → ［すべて保存］を利用してこまめに保存してからブラウザプレビューを行えばよいのですが、私自身の経験として、頭ではわかっていても、作業中に、追記・編集したCSSがなぜ反映されないのかと感じてしまうことが多いからです。 ■ CSSパネルのダブルクリック時［CSSダイアログを使用して編集］（デフォルト）のほか、［プロパティウィンドウを使用して編集］、［コードビューを使用して編集］の3つの方法から選ぶことができます。
●プロパティウィンドウを使用して編集
プロパティウィンドウは［CSSスタイル］パネル下部のことです。CSSのプロパティが一通りアタマに入ったら、ダイアログボックスを利用するよりもずっと効率的に作業できます。 ●コードビューを使用して編集［CSSスタイル］パネルでセレクタをダブルクリックすると、該当ファイルが開き、ダブルクリックしたセレクタの最初の宣言にカーソルが移動します。 ●コードへ移動
［CSSダイアログを使用して編集］や［プロパティウィンドウを使用して編集］を選択しているときでも、［CSSスタイル］パネルでセレクタを右クリックして［コードへ移動］を選択すると該当ファイルが開き、選択したセレクタの最初の宣言にカーソルが移動します。
■ Dreamweaverではできないこと下記の機能はDreamweaverではできません。次期バージョン（CS3）以降でサポートされるとよいなと思います。
 |
