[カラー ピッカー] ダイアログ ボックス
更新 : 2007 年 11 月
HTML 要素にスタイル属性を割り当てるときに使用します。
このダイアログ ボックスを表示するには
Microsoft Visual Web Developer のデザイン ビューでマークアップを描画するコントロールまたは HTML 要素 (Table コントロールや HTML [<input>] ボタンなど) を選択します。
次のいずれかの操作を実行して、[スタイル ビルダ] ダイアログ ボックスを表示します。
デザイン ビューで、コントロールまたは要素を選択し、[書式] をクリックし、[スタイル] をクリックします。
デザイン ビューで、コントロールまたは要素を右クリックし、[スタイル] をクリックします。
コントロールまたは要素を選択し、[プロパティ] ウィンドウの [スタイル] プロパティをクリックします。次に、省略記号ボタン (...) をクリックします。
[ドキュメント スタイル] ウィンドウで作業している場合は、[要素]、[クラス]、または [要素 ID] を選択し、[ビルド スタイル] アイコンをクリックします。
カスケード スタイル シート (CSS) を編集している場合は、CSS スタイルの中かっこ ({ }) の間にカーソルを移動し、[スタイル] メニューの [ビルド スタイル] をクリックします。
[スタイル ビルダ] ダイアログ ボックスが表示されます。
[色] ドロップダウン リストを含む任意の [スタイル ビルダ] ダイアログ ボックスのいずれかのタブを選択し、ボックスの横にある省略記号ボタン (...) をクリックします。
[カラー ピッカー] ダイアログ ボックスが表示されます。
処理手順
UI 要素
[Web パレット]
このタブで色見本を選択すると、[色] フィールドに 16 進数の RGB コードが表示されます。また、[スタイル ビルダ] ダイアログ ボックスを閉じると、選択した attribute:RGBcolor のペアが CSS スタイル定義に挿入されます。たとえば、デザイン ビューで HTML ページを編集しているときに、[ドキュメント アウトライン] ウィンドウで <BODY> 要素を選択し、[書式] メニューの [ビルド スタイル] をクリックします。[背景] をクリックし、[色] フィールドの横にある省略記号ボタン (...) をクリックして [カラー ピッカー] ダイアログ ボックスを表示します。[Web パレット] タブで、明るい青の色見本を選択し、[OK] をクリックします。[スタイル ビルダ] ダイアログ ボックスを閉じると、次のような attribute:RGBcolor のペアが BODY スタイルの中かっこ ({ }) の間に挿入されます。
BODY { BACKGROUND-COLOR: #99ffff; }詳細については、「[Web パレット] タブ ([カラー ピッカー] ダイアログ ボックス)」を参照してください。
[名前付きの色]
このタブで色見本を選択すると、[色] フィールドに色の名前と 16 進数の RGB コードが表示されます。[基本] または [追加] の名前付きの色を選択すると、attribute:colorname のペアが CSS スタイル定義に挿入されます。たとえば、デザイン ビューで HTML ページを編集しているときに、[ドキュメント アウトライン] ウィンドウで <BODY> 要素を選択し、[書式] メニューの [ビルド スタイル] をクリックします。[背景] をクリックし、[色] フィールドの横にある省略記号ボタン (...) をクリックして [カラー ピッカー] ダイアログ ボックスを表示します。[名前付きの色] タブで、一番下の行の [LightBlue (#add8e6)] をクリックします。[スタイル ビルダ] ダイアログ ボックスを閉じると、次のような attribute:colorname のペアが BODY スタイルの中かっこ ({ }) の間に挿入されます。
BODY { BACKGROUND-COLOR: lightblue; }詳細については、「[名前付きの色] タブ ([カラー ピッカー] ダイアログ ボックス)」を参照してください。
[システム カラー]
色を選択すると、[色] フィールドにシステム カラー カテゴリが表示されます。また、[スタイル ビルダ] ダイアログ ボックスを閉じるときに、attribute:category のペアが CSS スタイル定義に挿入されます。たとえば、CSS スタイル シートを編集しているときに、<BODY> 要素の CSS スタイルの中かっこ ({ }) の間にカーソルを置き、[書式] メニューの [ビルド スタイル] をクリックします。[背景] をクリックし、[色] フィールドの横にある省略記号ボタン (...) をクリックして [カラー ピッカー] ダイアログ ボックスを表示します。[システム カラー] タブで、[背景] カラー カテゴリをクリックし、[OK] をクリックします。[スタイル ビルダ] ダイアログ ボックスを閉じると、次のような attribute:colorname のペアが BODY スタイルに挿入されます。
BODY { BACKGROUND-COLOR: background; }.gif "メモ")
メモ :システム カラーを使用する場合、表示する色は指定しません。背景色は、ユーザーが選択しているデスクトップの色に応じて、システムごとに変わります。システム カラー カテゴリは、通常、一般的で予測可能な画面設定を共有しているユーザーが対象となる Web プロジェクトだけで使用します。
詳細については、「[システム カラー] タブ ([カラー ピッカー] ダイアログ ボックス)」を参照してください。
[作成した色]
カスタム カラーを作成するには、[プレビュー] フィールドに表示される色が目的の色合いになるまで、[赤]、[緑]、[青] の 3 原色のスライダをドラッグします。[色] フィールドに表示される RGB コードは、[スタイル ビルダ] ダイアログ ボックスを閉じるときに CSS スタイル定義に挿入されます。各スライダの右に表示される 10 進数の値の範囲は 0 (なし) ～ 255 (最大) であり、既定値はいずれも 255 です。メモ :カスタム カラーは、使用しているモニタの現在の画面設定を使って表示されます。ほかのユーザーのモニタや Web ブラウザでは、同じように表示されない可能性があります。対象ユーザーが予測可能な共通の画面設定を使用するような Web プロジェクトでは、カスタム カラーを予約しておくこともできます。
たとえば、CSS スタイル シートを編集しているときに、INPUT.button スタイル クラスの CSS スタイルの中かっこ ({ }) の間にカーソルを移動し、[ビルド スタイル] ダイアログ ボックスの [背景] をクリックします。次に、[色] フィールドの横にある省略記号ボタン (...) をクリックして、[カラー ピッカー] ダイアログ ボックスを表示します。[作成した色] タブで、[赤] と [緑] のスライダを既定値の 255 に設定したまま、[青] のスライダを左に 102 までドラッグします。[スタイル ビルダ] ダイアログ ボックスを閉じると、次のような attribute:RGBcolor のペアがスタイルの中かっこ ({ }) の間に挿入されます。
INPUT.button { background-color: #ffff66; }詳細については、「[作成した色] タブ ([カラー ピッカー] ダイアログ ボックス)」を参照してください。
[色]
選択した色の 16 進数の RGB コードが表示されます。[OK]
[カラー ピッカー] ダイアログ ボックスを閉じます。選択した attribute:color のペアは、[スタイル ビルダ] ダイアログ ボックスを閉じるときに挿入される CSS マークアップに追加されます。
参照
概念
ASP.NET Web サーバー コントロールと CSS スタイル
参照
[Web パレット] タブ ([カラー ピッカー] ダイアログ ボックス)
[名前付きの色] タブ ([カラー ピッカー] ダイアログ ボックス)