[作成した色] タブ ([カラー ピッカー] ダイアログ ボックス)
更新 : 2007 年 11 月
カスタム カラーを作成するには、[プレビュー] フィールドに目的の色が表示されるまで、[赤]、[緑]、および [青] の 3 原色のスライダをドラッグします。[色] フィールドに表示される RGB コードは、[スタイル ビルダ] ダイアログ ボックスを閉じると、カスケード スタイル シート (CSS) スタイル定義に挿入されます。
.gif "メモ") メモ : |
|---|
カスタム カラーは、使用しているモニタの現在の画面設定を使って表示されます。ほかのユーザーのモニタや Web ブラウザでは、同じように表示されない可能性があります。カスタム カラーを予約して、一般的で予測可能な画面設定を共有しているユーザーが対象となる Web プロジェクトで使用することもできます。 |
たとえば、CSS スタイル シートを編集しているときに、INPUT.button スタイルの CSS スタイルの中かっこ ({ }) の間にカーソルを移動し、[ビルド スタイル] ダイアログ ボックスの [背景] をクリックします。次に、[色] フィールドの横にある省略記号ボタン (...) をクリックして、[カラー ピッカー] ダイアログ ボックスを表示します。[作成した色] タブで、[赤] と [緑] のスライダを既定値の 255 に設定したまま、[青] のスライダを左に 102 までドラッグします。
| メモ : |
|---|
[プレビュー] フィールドに明るい色調の黄色が表示され、[色] フィールドに RGB カラー コード #ffff66 が表示されます。これは、255,255,102 と同じです。 |
[スタイル ビルダ] ダイアログ ボックスを閉じると、次のような attribute:RGBcolor のペアがスタイルの中かっこ ({ }) の間に挿入されます。
INPUT.button { background-color: #ffff66; }
[カラー ピッカー] ダイアログ ボックスの 1 つのタブで選択した色は、自動的にすべてのタブで選択されます。この場合では、[Web パレット] タブで同じ明るい黄色の色見本が選択され、[色] フィールドに RGB コード "#ffff66" が表示されます。この黄色は、Web セーフ カラーです。
このダイアログ ボックスを表示するには
Microsoft Visual Web Developer のデザイン ビューでマークアップを描画するコントロールまたは HTML 要素 (Table コントロールや HTML [<input>] ボタンなど) を選択します。
次のいずれかの処理を実行して、[スタイル ビルダ] ダイアログ ボックスを表示します。
デザイン ビューで、コントロールまたは要素を選択し、[書式] をクリックして [スタイル] をクリックします。
デザイン ビューで、コントロールまたは要素を右クリックし、[スタイル] をクリックします。
コントロールまたは要素を選択し、[プロパティ] ウィンドウのスタイルプロパティをクリックします。次に、省略記号ボタン (...) をクリックします。
[ドキュメント スタイル] ウィンドウで作業している場合は、[要素]、[クラス]、または [要素 ID] を選択し、[ビルド スタイル] アイコンをクリックします。
CSS スタイル シートを編集している場合は、CSS スタイルの中かっこ ({ }) の間にカーソルを移動し、[スタイル] メニューの [ビルド スタイル] をクリックします。
[スタイル ビルダ] ダイアログ ボックスが表示されます。
[色] ドロップダウン リストを含む任意の [スタイル ビルダ] ダイアログ ボックスのいずれかのタブを選択し、ボックスの横にある省略記号ボタン (…) をクリックします。
[カラー ピッカー] ダイアログ ボックスが表示されます。
[作成した色] タブをクリックします。
処理手順
UI 要素
[赤]
既定値は、255 (最大) です。カスタム カラーの赤の量を減らすには、[赤] のスライダを左にドラッグします。最小値は、0 (なし) です。[緑]
既定値は、255 (最大) です。カスタム カラーの緑の量を減らすには、[緑] のスライダを左にドラッグします。最小値は、0 (なし) です。[青]
既定値は、255 (最大) です。カスタム カラーの青の量を減らすには、[青] のスライダを左にドラッグします。最小値は、0 (なし) です。[プレビュー]
スライダをドラッグすると、その結果の色が表示されます。[色]
結果の色の 16 進数の RGB コードが表示されます。[OK]
[カラー ピッカー] ダイアログ ボックスを閉じます。選択した attribute:color のペアは、[スタイル ビルダ] ダイアログ ボックスを閉じるときに挿入される CSS マークアップに追加されます。
参照
概念
ASP.NET Web サーバー コントロールと CSS スタイル
参照
[Web パレット] タブ ([カラー ピッカー] ダイアログ ボックス)