目次:
- このステップは必須ではありませんが（ページにまだない要素のスタイルを作成することもできます）、Dreamweaverはカーソルが現在選択しているページ要素に基づいてセレクタ名を自動的に作成します。
- スタイルを特定のメディアタイプまたは画面サイズに合わせたい場合は、@Mediaパネルでメディアクエリを定義します。
- セレクタパネルに新しいセレクタが追加されました。スタイルの定義を開始したときにカーソルが置かれていた見出しに既に適用されているすべてのスタイルが含まれる複合セレクタ名がDreamweaverに追加されました。
- ハイフン（ - ）やアンダースコア（_）以外のスペースや特殊文字を使用しない限り、クラスやIDスタイルに好きな名前を付けることができます。
- Dreamweaverでは、ワークスペースの下部にあるプロパティインスペクタのクラスおよびIDドロップダウンリストにこれらのスタイルが追加されるため、クラスおよびIDセレクタは作成後のコンテンツに簡単に適用できます。
ビデオ: 2 はじめてのHTML/CSSでレイアウト（IDとClass設計編） 2025
DreamweaverのクラスセレクタとIDセレクタには、多くの類似点と1つの重要な違いがあります。 IDスタイルは1ページにつき1回しか使用できませんが、同じスタイルのページは何度でも同じスタイルで使用できます。
クラスとIDスタイルには、次のような類似点があります。
クラスセレクタとIDセレクタで作成したスタイルの名前を自由に変更できます。アンダースコアとハイフンは大丈夫ですが、スペースや特殊文字をスタイル名に含めてはいけません。すべての小文字の使用は一般的ですが、必須ではありません。
<！ --1 - >ページの任意の要素にクラススタイルとIDスタイルを適用できますが、ヘッダータグ、divタグ、順序付けられていないリストタグ、段落タグ、画像タグ、新しいHTML5に最も一般的に適用されますタグ。
クラスとIDセレクタで作成されたスタイルを使用するのは、2つのステップからなるプロセスです。まず、クラスまたはIDセレクタを使用して新しいスタイルを作成し、名前を付けます。ページ上の要素にスタイルを適用します。
<！新規のクラスまたはIDスタイルを定義するには、新しい文書を作成して保存するか、既存のファイルを開き、次の手順に従います。1新しいスタイルを定義する場合は既存の要素に適用する場合は、クリックして、新しいスタイルで書式設定する要素の上にカーソルを置きます。
このステップは必須ではありませんが（ページにまだない要素のスタイルを作成することもできます）、Dreamweaverはカーソルが現在選択しているページ要素に基づいてセレクタ名を自動的に作成します。
<！ - 3 - >
2 CSS Designerパネルのセレクタパネルで、新しいスタイルを追加するスタイルシートの名前を選択します。スタイルを特定のメディアタイプまたは画面サイズに合わせたい場合は、@Mediaパネルでメディアクエリを定義します。
メディアクエリを指定しない場合、Dreamweaverはグローバルプロパティを使用し、スタイルはすべてのメディア形式と画面サイズで機能します。
3セレクタパネルで、プラス記号（+）をクリックします。
セレクタパネルに新しいセレクタが追加されました。スタイルの定義を開始したときにカーソルが置かれていた見出しに既に適用されているすべてのスタイルが含まれる複合セレクタ名がDreamweaverに追加されました。
4セレクタ名をダブルクリックし、スタイルに使用する名前で編集または置換します。
ハイフン（ - ）やアンダースコア（_）以外のスペースや特殊文字を使用しない限り、クラスやIDスタイルに好きな名前を付けることができます。
クラスセレクタを使用してスタイルを作成する場合は、スタイル名をドットまたはピリオドで始める必要があります。IDセレクタを使用する場合、スタイル名はシャープ記号（#）で始まる必要があります。
5 [プロパティ]パネルで、スタイルルールの設定を指定します。
Dreamweaverでは、ワークスペースの下部にあるプロパティインスペクタのクラスおよびIDドロップダウンリストにこれらのスタイルが追加されるため、クラスおよびIDセレクタは作成後のコンテンツに簡単に適用できます。
