Dreamweaver入門 第6回 CSSデザイナーパネルで簡単にスタイル設定
Dreamweaver入門
HTMLファイルが完成したら、次はCSSファイルを作成して見た目を調整していきます。CSSは（Cascading Style Sheets）の略で、Webブラウザーに表示されているHTMLの情報の文字の色や大きさを変えたり、余白を入れたりを、ブラウザーでの表示を調整するためのルールです。
DreamweaverはHTMLファイルだけでなく、CSSファイルの作成や編集も簡単に行うことができます。［CSSデザイナー］パネルでだいたいのことはできてしまいます。本記事では、そうしたCSS関連の機能の使い方を解説します。
※サンプルファイルとして、本連載を通して解説するテクニックを使って制作できるWebサイトの例（完成例）と、本記事の内容を試すための素材データを用意しています。ダウンロードしたサイトフォルダーを、まず「サイト設定」をしてからご利用ください。サイト設定の詳細については、「第1回 サイト設定がDreamweaverのカナメです」を参考にしてください。
新規CSSファイル作成も［CSSデザイナー］パネルから
HTMLファイルを開いた状態で、［CSSデザイナー］パネル→［ソース］ペインの右側にある［＋］ボタンをクリックして［新規CSSファイルを作成］を選択し、CSSファイルの保存先を決定します。
保存先は［サイト設定］した［サイト］フォルダー内にしておきます（サイト設定については「第1回 サイト設定がDreamweaverのカナメです」を参考にしてください）。
これで、新規CSSファイルの作成とHTMLファイルにCSSファイルの関連付けが一度にできました。
CSSファイルが関連付けられると、HTMLファイルの［ドキュメントツールバー］の上部に［関連ファイルツールバー］が追加表示されます。［関連ファイルツールバー］とは、HTMLファイルに関連付いたCSSファイルやJavaScriptファイルなどが一覧表示されるエリアです。
あらかじめ用意されているCSSファイルも［CSSデザイナー］パネルで関連付け
ちなみに、あらかじめ用意されているCSSファイルを、HTMLファイルに適用（関連付け）するときも、もちろん［CSSデザイナー］パネルを使います。
CSSファイルを関連付けたいHTMLファイルを開いた状態で、［CSSデザイナー］パネル→［ソース］ペインの右側にある［＋］ボタンをクリックして［既存のCSSファイルを添付］を選択し、該当のCSSファイルを選択します。
CSSの見た目の確認には［ライブビュー］が強い味方
CSSの設定時は［ライブビュー］に切り替えると、Webブラウザー上で表示確認しているような感じでCSSを編集ができるので、とても便利です。
また［ライブビュー］は、CSSの表示だけでなく、JavaScriptなどの動きも確認できます。
CSSスタイルを追加する
CSSスタイルを追加する方法はいくつかあります。［関連ファイルツールバー］の該当CSSファイルを選択すると、［コードビュー］がCSSファイルの表示になるので、CSSのスタイルを追加できます。今回は［CSSデザイナー］パネルを使ってCSSのスタイルを追加する方法を紹介します。
まずはセレクターを設定しよう
CSSスタイルをHTMLのソースコード内の「どこに」設定するかを指す「セレクター」を設定します。
まず、［CSSデザイナー］パネル→［ソース］ペインから、該当のCSSファイルを選択します。
次に［デザインビュー］上でCSSを設定したい場所をクリックしてカーソルを表示します。
そして、［セレクター］ペインの［＋］をクリックし、セレクターを設定します。このとき、セレクター候補が、デザインビュー上でカーソルがある位置のHTMLタグの入れ子として表示されます（例えば、「body div#wrap h1 span」のように）。
しかし、自動的に表示されるセレクターは子孫セレクターすぎるので、私は自分で指定したいセレクターを入力し直すのがいいんじゃないかな、と思います！
プロパティとバリューを設定
セレクターを設定できたら、次はそのセレクターに対して「どのような見た目にするか」を指す「プロパティ」と「バリュー（値）」を設定します。
セレクターを設定すると、［プロパティ］ペインにたくさんのプロパティが一覧表示されます。表示されていないときは［セットを表示］チェックボックスのチェックを外します。
あとは設定したいプロパティを選択し、バリューを設定します。探しづらいときは、プロパティのカテゴリーをクリックしてみたり、［＋］ボタンをクリックして直接プロパティを設定することもできます。
CSSスタイルの修正はクリック！
設定したCSSスタイルを修正したい場合、［コードビュー］で直接CSSファイルを修正する方法以外にも［CSSデザイナー］パネルで簡単にできます。
［CSSデザイナー］パネル→［セレクター］ペインから修正したいセレクターをクリックすると、［プロパティ］ペインに該当のスタイルが表示されるので、あとはバリューを変更するだけです。このとき［セットを表示］チェックボックスにチェックを入れると、設定したスタイルだけが表示されるのでおすすめです。
プロパティの追加は［＋］ボタンから追加できます。
クラスの設定もクリックだけ！
あらかじめCSSファイルに設定したクラスをHTMLタグに指定するのもとても簡単です。［タグセレクター］でクラスを設定したいHTMLタグを指定し、［プロパティインスペクター］の［クラス］プルダウンメニューからクリックして選択するだけです。
複数クラスの設定もクリックだけ！
複数のクラスを設定するのもとても簡単です。［プロパティインスペクター］の［クラス］プルダウンメニューの下の方にある［複数のクラスを適用］をクリックすると、クラスセレクターの一覧が表示されるので、必要なクラスにチェックを入れると複数のクラスを設定できます。
ここでのポイントは「クリックした順番にクラスが設定される」ということです。何気ないけど実は重要ポイントですよね！
［コードナビゲーター］を味方につけろ
CSSファイルのコードを編集するときに困るのが「セレクター探し」。特にCSSファイル内のコードが複雑になればなるほど難しくなりますよね。中には［検索］機能を使う人も…。
でも大丈夫！ ［デザインビュー］で編集したいブロックの上で右クリック→［コードナビゲーター］をクリックします。選択したブロックに関連するセレクターの一覧が表示されるので、該当するセレクターをクリックします。そうするとなんと！ ［コードビュー］の内容がCSSファイルの内容に切り替わり、さらに該当するセレクターのところにカーソルが表示されます。これは便利すぎ！
インジケーターっていいます
［デザインビュー］上にカーソルを一定時間置いておくと謎のマークが出ることがあります。これは［インジケーター］といって、これをクリックすると［コードナビゲーター］が表示されます。
この［インジケーター］は［コードナビゲーター］を表示したときに、右下のチェックボックスで非表示にすることができます。
おまけ Web Fontsの設定も簡単
Adobe Edge Web FontsをDreamweaverで設定することもできます。Web Fontsを使いたいセレクターを選択し、［CSSデザイナー］パネルの［プロパティ］ペインで「font-family」から［フォントを管理］を選択します。
［フォントの管理］ダイアログボックスの［Adobe Edge Web Fonts］タブから、使いたいフォントを選択します。
