Dreamweaver入門 第6回 CSSデザイナーパネルで簡単にスタイル設定

by 山本 和泉

Posted on 01-05-2015

連載

Dreamweaver入門

HTMLファイルが完成したら、次はCSSファイルを作成して見た目を調整していきます。CSSは(Cascading Style Sheets)の略で、Webブラウザーに表示されているHTMLの情報の文字の色や大きさを変えたり、余白を入れたりを、ブラウザーでの表示を調整するためのルールです。

DreamweaverはHTMLファイルだけでなく、CSSファイルの作成や編集も簡単に行うことができます。[CSSデザイナー]パネルでだいたいのことはできてしまいます。本記事では、そうしたCSS関連の機能の使い方を解説します。

※サンプルファイルとして、本連載を通して解説するテクニックを使って制作できるWebサイトの例(完成例)と、本記事の内容を試すための素材データを用意しています。ダウンロードしたサイトフォルダーを、まず「サイト設定」をしてからご利用ください。サイト設定の詳細については、「第1回 サイト設定がDreamweaverのカナメです」を参考にしてください。

__
Dreamweaver CC 体験版
ダウンロード

__
サンプルファイル(完成例)
ダウンロード

__
サンプルファイル(本記事用の素材)
ダウンロード

新規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]タブから、使いたいフォントを選択します。

Topics: クリエイティブ, UI/UX & Web

Products: