[背景] ([スタイルビルダ] ダイアログボックス)

[アーティクル]
09/30/2008

更新 : 2007 年 11 月

[スタイルビルダ] ダイアログボックスの [背景] ページでは、HTML ページまたはテーブルにスタイルが適用されるときの背景色またはイメージを定義するカスケードスタイルシート (CSS) スタイルの属性を設定できます。これらの属性を HTML 要素に直接適用することも、CSS スタイル規則に追加することもできます。

背景属性をページの HTML 要素に直接適用するには

HTML デザイナのデザインビューで HTML ドキュメントを開き、書式を指定する要素を選択します。
[書式] メニューの [スタイル] をクリックし、[スタイルビルダ] ダイアログボックスを表示します。
[スタイルビルダ] ダイアログボックスの左側のペインで [背景] をクリックします。

右側のペインに [[背景] ([スタイルビルダ] ダイアログボックス)] が表示されます。

デザインビューで選択されている要素を書式化すると、ページの HTML マークアップに CSS スタイル属性が挿入されます。HTML ビューに切り替えて、挿入された新しいスタイル属性を確認します。

外部のスタイルシートで定義された CSS スタイル規則に背景属性を追加するには

既存の外部スタイルシートを開き、該当するスタイルのセレクタに続く中かっこ ({ }) の中にカーソルを移動します。
[スタイル] メニューの [ビルドスタイル] をクリックし、[スタイルビルダ] ダイアログボックスを表示します。
[スタイルビルダ] ダイアログボックスの左側のペインで [背景] をクリックします。

右側のペインに [[背景] ([スタイルビルダ] ダイアログボックス)] が表示されます。

メモ :
[スタイル] メニューは、外部 CSS スタイルシートを開いて編集するときに表示されます。スタイルルールのセレクタに続く中かっこの中にカーソルを移動すると、[スタイル] メニューの [ビルドスタイル] オプションを使用できるようになります。

CSS スタイルセレクタを目的の要素の CLASS プロパティとして割り当てると、外部スタイルシートで定義されている CSS スタイルクラスを Web ページの <BODY> 要素内の要素 (この場合は <BODY> 自体を含む) に適用できます。

[スタイルビルダ] ダイアログボックスの [背景] ページでは、次のオプションを使用できます。

処理手順

UI 要素

[背景色]

[色]
スタイルに BACKGROUND-COLOR 属性を設定します。ドロップダウンリストでオプションを選択するか、省略記号ボタン (...) をクリックして [カラーピッカー] ダイアログボックスを表示し、追加する色を選択します。たとえば、[Red] を選択すると、次の CSS マークアップが挿入されます。

BACKGROUND-COLOR: red
[透明]
このチェックボックスを使用して、BACKGROUND-COLOR 属性に値 transparent を設定します。transparent を選択した場合は、背景色を選択できません。次のコードが挿入されます。

BACKGROUND-COLOR: transparent

[背景イメージ]

[イメージ]
スタイルによって、背景に表示されるイメージを設定します。フィールドにパスとファイル名を入力するか、省略記号ボタン (...) をクリックして [背景イメージの選択] を表示し、イメージの場所を指定します。たとえば、Images フォルダにある Background.bmp というイメージを選択すると、次のコードが挿入されます。

BACKGROUND-IMAGE: url (images/background.bmp)

[並べて表示]
スタイルによって割り当てられる、背景イメージのタイリング属性を設定します。イメージは、次のテーブルに示すように、いくつかの方法で並べて表示できます。

タイリング属性	説明
[左右に並べて表示]	イメージはページの上から下ではなく、左から右に並べて表示されます。
[上下に並べて表示]	イメージは上から下に 1 回だけ並べて表示されます。
[上下および左右に並べて表示]	イメージは水平と垂直の両方向に並べて表示されます。
[並べて表示しない]	タイリングを使用しません。イメージは位置値で指定された位置に表示され、繰り返されません。
[<設定なし>]	オプションを選択しません。スタイルにコードは追加されません。

たとえば、[左右に並べて表示] を選択すると、次の CSS マークアップが挿入されます。

BACKGROUND-REPEAT:repeat-x

メモ :
[並べて表示] 属性は、[位置] 属性と連携して動作します。イメージを配置する場合、タイリング属性はページ上のイメージの開始位置に基づいて適用されます。たとえば、イメージをページの左上端に配置し、水平方向にだけ並べて表示します。イメージはページの上端に沿って繰り返します。

[スクロール]
スタイルで適用される背景イメージの BACKGROUND-ATTACHMENT 属性を設定します。ドロップダウンリストで値を選択します。ページがスクロールされたときに、イメージを固定することも、背景のテキストとイメージを同時にスクロールすることもできます。[<設定なし>] (オプションを選択しない)、[スクロール背景]、または [固定背景] のいずれかを選択します。たとえば、[スクロール背景] を選択すると、次の CSS マークアップが挿入されます。

BACKGROUND-ATTACHMENT:scrolling

メモ :

属性が [<設定なし>] の場合、スタイルにコードは追加されません。

メモ :
属性が [<設定なし>] の場合、スタイルにコードは追加されません。

[位置]
スタイルで適用される背景イメージの位置属性を設定します。位置の値は、タイリング属性に関連します。背景の位置を設定したときにタイリング属性を選択しなかった場合は、背景イメージが指定の位置で固定されます。背景の位置を設定したときにタイリング属性を選択すると、設定した位置がタイリング属性の始点となります。

メモ :
水平位置値と垂直位置値の両方を選択する必要があります。値を 1 つだけ指定した場合、CSS エディタには無効なプロパティ名が表示されます。水平と垂直の両方の位置値を選択すると、プロパティは BACKGROUND-POSITION として正確に表示されます。BACKGROUND-POSITION 宣言の有効な例は、BACKGROUND-POSITION:left center となります。

水平位置値と垂直位置値の両方を選択する必要があります。値を 1 つだけ指定した場合、CSS エディタには無効なプロパティ名が表示されます。水平と垂直の両方の位置値を選択すると、プロパティは BACKGROUND-POSITION として正確に表示されます。BACKGROUND-POSITION 宣言の有効な例は、BACKGROUND-POSITION:left center となります。

[左右]
スタイルで適用される背景イメージの水平位置を設定します。[<設定なし>] (オプションを選択しない)、[左]、[中央]、[右]、または [カスタム] のいずれかを選択します。[カスタム] を選択した場合は、[カスタム] の右のフィールドを利用できます。既定値は、50% です。数字フィールドに値を入力し、単位フィールドのドロップダウンリストでインクリメント (px、pt、pc、mm、cm、in、em、ex、または %) を選択します。[カスタム] を選択して既定値を受け入れた場合は、次の CSS マークアップが挿入されます。

BACKGROUND-POSITION:50%

メモ :

属性が [<設定なし>] の場合、スタイルにコードは追加されません。
[上下]
スタイルで適用される背景イメージの垂直位置を設定します。ドロップダウンリストから、[<設定なし>] (オプションを選択しない)、[上]、[中央]、[下]、または [カスタム] のいずれかのオプションを選択します。[カスタム] を選択した場合は、[カスタム] の右のフィールドを利用できます。既定値は、50% です。数字フィールドに値を入力し、単位フィールドのドロップダウンリストで単位オプション (px、pt、pc、mm、cm、in、em、ex、または %) を選択します。[カスタム] を選択して既定値を受け入れた場合は、次の CSS マークアップが挿入されます。

BACKGROUND-POSITION:50%

メモ :

属性が [<設定なし>] の場合、スタイルにコードは追加されません。
[背景イメージを使用しない]
選択時には、現在のページから背景イメージが削除されます。ダイアログボックスでは [イメージ] 属性を使用できません。ページにイメージが指定されている場合は、[OK] をクリックすると BACKGROUND-IMAGE プロパティがスタイルから削除されます。