スタイルの作成

クラス、ID、または要素のセレクターを使用して Web ページとそのコンテンツの書式設定に使用するインライン スタイルおよびスタイルを作成できます。各スタイルの種類については、「スタイルの作業」を参照してください。

新しいスタイルは、最初から作成することも、既存のスタイルをコピーして作成することもできます。どちらの方法でも、[新しいスタイル] ダイアログ ボックスを使用して、スタイルが含まれるセレクターの種類、プロパティ、スタイル シートなど、作成するスタイルのすべての設定を定義できます。新しいインライン スタイルを作成する場合は、[CSS プロパティ] パネルを使用することもできます。新しいスタイルを簡単に作成して、プロパティを設定せずにページに適用する場合は、[スタイル] ツール バーも使用できます。

メモ :
[ページ編集オプション] ダイアログ ボックスの [作成] タブで選択されている CSS スキーマによって CSS プロパティがサポートされていない場合、そのプロパティの値の一覧は、[新しいスタイル] ダイアログ ボックスと [スタイルの変更] ダイアログ ボックスでは空白として表示されます。また、その場合 [CSS プロパティ] パネルではプロパティ一覧は表示されません。詳細については、「CSS の IntelliSense オプションの設定」を参照してください。

[新しいスタイル] ダイアログ ボックスで新しいスタイルを作成するには

1. 次のいずれかの操作を行います。

   • 外部 CSS にスタイルを追加するには、.css ファイルを開きます。

   • 内部 CSS にスタイルを追加するには、Web ページを開きます。

   • インライン スタイルを追加するには、Web ページを開き、スタイルを追加するコンテンツを選択します。

2. 次のいずれかの操作を行います。

   • 新しいスタイルを作成するには、[スタイルの適用] パネルまたは [スタイルの管理] パネルの [スタイル] ツール バーか [書式設定] メニューで、[新しいスタイル] をクリックします。

   • [スタイルの適用]、[スタイルの管理]、または [CSS プロパティ] パネルで既存のスタイルをコピーするには、コピーするスタイルを右クリックし、[新しいスタイルのコピー] をクリックします。

3. [新しいスタイル] ダイアログ ボックスで以下の操作を行います。

   項目	目的
   [セレクター]	クラス セレクターを使用するには、ピリオド (.) に続けて一意の名前を入力します。 ID セレクターを使用するには、番号記号 (#) に続けて一意の名前を入力します。 メモ : クラスおよび ID のセレクター名には、下位要素および子要素セレクターを作成する場合を除いて、スペースは使用できません。 要素セレクターを使用するには、HTML 要素の名前を入力するか、[セレクター] ボックスをクリックして要素名を選択します。 インライン セレクターを使用するには、[インライン スタイル] を選択します。 下位要素および子要素セレクターを作成するには、そのセレクターを入力します。
   定義先	次のいずれかを選択します。 [現在のページ] を選択して、現在の Web ページの内部 CSS に新しいスタイルを追加します。 [新しいスタイル シート] を選択して、新しい空の外部 CSS に新しいスタイルを追加します。 [既存のスタイル シート] を選択して、指定した既存の外部 CSS に新しいスタイルを追加します。
   [新しいスタイルをドキュメントの選択範囲に適用する]	現在の Web ページ内の、現在の選択範囲にスタイルを適用します。
   URL	[定義先] で [既存のスタイル シート] を選択した場合は、.css ファイルを指す URL を入力します。
   [カテゴリ]	以下の中から選択し、ダイアログ ボックスの右に表示されるプロパティを設定します。 ヒント : [カテゴリ] 一覧に太字で表示されているカテゴリには設定されたプロパティが含まれます。 [フォント] では、サイズ、太さ、文字飾り、色などのフォントのプロパティを設定します。 [ブロック] では、行の高さ、テキストの配置、テキストのインデント、およびテキストの間隔を設定します。 [背景] では、背景色と背景画像のプロパティを設定します。 [枠線] では、枠線とそのプロパティを設定します。 [ボックス] では、ボックス要素およびブロック レベル要素のパディングと余白のプロパティを設定します。 [配置] では、ボックス要素およびブロック レベル要素の大きさと位置を設定します。 [レイアウト] では、ボックス要素およびブロック レベル要素の表示と非表示、表示位置や周囲の要素の折り返し、切り抜きなどのレイアウトのプロパティを設定します。 [リスト] では、リストの種類、位置、画像など、リスト要素のプロパティを設定します。 [テーブル] では、間隔、レイアウト、枠線など、テーブル関連要素のプロパティを設定します。

[CSS プロパティ] パネルでインライン スタイルを作成するには

1. [デザイン] ビューまたは [コード] ビューで、インライン スタイルを追加する Web ページのコンテンツを選択します。

2. [CSS プロパティ] パネルの [適用されているルール] ボックスの一覧に既存のルールが表示された場合、インライン スタイルを適用するセレクターを右クリックして、ショートカット メニューの [新しいインライン スタイル] をクリックします。ボックスの一覧に [(ルールは適用されていません)] と表示された場合は、[適用されているルール] ボックスの下の任意の位置をクリックし、同様に操作します。

3. [CSS のプロパティ] で、作成するプロパティを設定します。

新しい未定義のスタイルを作成して適用するには

1. [デザイン] ビューまたは [コード] ビューで、スタイルを適用する Web ページのアイテムを選択します。

2. プロパティを定義せずに新しいスタイルを作成して適用するには、[スタイル] ツール バーの [クラス] ボックスまたは [ID] ボックスのどちらかに、作成するスタイルの一意な名前を入力します。

関連項目

タスク

カスケード スタイル シートの作成
スタイルの変更

概念

スタイルの作業
カスケード スタイル シートの参照