今回は、Dreamweaver のプロパティインスペクタを使って、閲覧中のページに CSS スタイルを手軽に追加したり編集する方法をご紹介します。

CSS のプロパティインスペクタには、CSS スタイルとして設定可能な項目がカテゴリ毎に表示されており、必要な項目に値を入力をするだけで、新しい CSS ルールを設定できるようになっています。新規に HTML 要素に CSS スタイルを追加する場合でも、既に設定済みの CSS スタイルを編集する場合でも、わざわざ CSS ファイルを開くことなく、直接値を編集できます。
→サンプルコードのダウンロード

新規 CSS ルールの追加

今回は jQuery Mobile サイトのトップページのヘッダ領域に CSS スタイルを追加します。ヘッダ領域は home という id の div 領域内の header タグで宣言されています。この部分にはまだ CSS が適用されていないため、新たに CSS ルールを追加していきます。

新規 CSS ルールを追加する際は、プロパティインスペクタを利用します。最初に CSS を追加したいタグにソースコード上でカーソルを当ててから、プロパティインスペクタの左側にある「CSS」を選択します。次に、ターゲットのルールのプルダウンメニューから「<新規 CSS ルール>」を選択して、その下にある「ルールの編集」をクリックします。すると「新規 CSS ルールダイアログ」が表示されます。

セレクター名の指定

「新規 CSS ルール」ダイアログでは、CSS ルールを適用するセレクター名の指定とそのルールを記述するファイルの選択を行います。今回のサンプルでは、#home 直下の header タグのみに CSS ルールを適用したいため、ダイアログのセレクター名の欄に、CSS2 の子セレクターを指定する機能を利用して「#home > header」と入力します。また、ルールの定義では「iphone.css」を選択しておきます。

尚、ダイアログから新規に CSS ルールを追加する場合、追加されたルールは、指定した CSS ファイルの最後に追加されます。今回追加したルールの記述を確かめるには、iphone.css の最後を確認して下さい。

CSS ルールの定義

「新規 CSS ルール」ダイアログの入力後は、「CSS ルール定義」の画面に移ります。CSS ルールはカテゴリごとに分けて表示されます。

ここでは以下の項目を入力します。

• タイプカテゴリの Line-height に 1.25
• 背景カテゴリの 5 種類 （上図参照）
• ボックスのカテゴリ padding に 5px 10px 10px 65px

「CSS ルール定義」には、よく使われるプロパティのみが表示されています。入力欄が表示されないプロパティは、ダイアログで設定した後に、CSSスタイルパネルを利用して追加します。

値に px などの単位が必要ない場合、プルダウンからは単位無しを選択することができません。こちらの場合も、不要な単位の削除は CSS スタイルパネルから行います。

足りないプロパティを CSS スタイルパネルで入力

「CSS ルール定義」ダイアログで設定しなかったプロパティを CSS スタイルパネルから追加します。パネル内の「ルール」から "#home > header" を選択して、以下のように入力します。

これで一つ目のセレクター "#home > header" の CSS ルールの追加は終了です。
同様の手順で "#home > header h1" セレクターにも、font-size に 16px を設定します。font-size はタイプカテゴリ内にあります。
以上のようにして、プロパティインスペクタを使うと、CSS ファイルを開くこと無くルールを楽に追加することができます。
最後に追加した CSS のセレクターとそのルールを確認をしておきましょう。

#home > header {
    background: #fff url(../img/common/logo.png) 10px 0px no-repeat;
    padding: 5px 10px 10px 65px;
    line-height: 1.25;
    -webkit-box-shadow: 0 0 7px rgba(0,0,0,.4);
    min-height: 75px;
}
#home > header h1{
	font-size: 16px;
}