Adob​​e Dreamweaver CS6で新しいタグスタイルを作成する方法 - ダミー

Adob​​e Dreamweaver CS6で タグスタイル （または タイプセレクタ ）を作成することは、新規ユーザーがCSSを理解するための簡単で安全な方法です。既存のHTMLタグ（P、H1、H2など）をターゲットにしています。

ページ上に既存のタグを使用すると、特定のHTMLタグが使用されている場所で自動書式設定を適用することができます。たとえば、

（見出し1） タグ内のテキストを自動的に太字、36ピクセル、赤にすることができます。

<！ - 1 - >

プロパティインスペクタでタグスタイルを作成するには、次の手順を実行します。

1. テキストを含むHTMLページを開きます。

2. プロパティインスペクタで、パネルの左側にあるHTMLボタンをクリックして、プロパティインスペクタをHTMLビューで表示します。

3. テキストの行を選択し、プロパティインスペクタにあるBボタンをクリックして太字にします。

4. パネルの一番左側のCSSボタンをクリックして、プロパティインスペクタのCSSビューに切り替えます。

   <！ - 2 - >

   目的は、テキストを太字にするタグに最終的なスタイル情報を割り当てることで、ページ上の太字のテキストも赤く表示されます。

5. 太字のテキストを選択したままにし、プロパティインスペクタで[ターゲットルール]ドロップダウンリストから選択します。

6. テキストを選択したまま、プロパティインスペクタ（BおよびIボタンの下にあります）の右側にあるカラーセレクタを使用して、選択した太字のテキストに適用する赤色を選択します。

   <！ - 3 - >

   [新しいCSSルール]ダイアログボックスが表示されます。

   

7. 「セレクタの種類」ドロップダウンリストから「タグ（HTML要素の再定義）」を選択します。 Selector NameドロップダウンリストからStrongを選択します。 [ルール定義]ドロップダウンリストから（この文書のみ）を選択します。

   セレクタタイプは、ページ上の選択されたHTMLタグにどのようにフォーマットが適用されるかを決定します。タグスタイルは、その要素がページに表示されているどこにでも自動的に適用されます。

8. OKをクリックして新しいタグスタイルを作成し、パネルを閉じます。

   タグを適用して（Bボタンや他のショートカットを使用して）ボールドテキストを作成するたびに、そのボールドテキストも赤く表示されます。ドキュメントに表示されるときに太字のテキストがどのように表示されるかを決定するタグスタイルを作成しました。

太字のテキストを選択し、プロパティインスペクタからテキストプロパティを変更し続けることで、この新しいタグスタイルをさらに絞り込むことができます。

作成したルールを編集して微調整する場合は、[ターゲットルール]ドロップダウンリストの下にある[ルールの編集]ボタンをクリックして、[CSSルール定義]ダイアログボックスを開きます。このダイアログボックスは、デフォルトで[タイプ]カテゴリに表示され、タイプ関連のプロパティを変更できます。

タグスタイルの微調整が終わったら、ダイアログボックスの下部にある[適用]をクリックして変更を確認します。 [OK]をクリックして変更を適用し、ダイアログボックスを終了することもできます。