[スタイル ビルダ] ダイアログ ボックス
更新 : 2007 年 11 月
[スタイル ビルダ] ダイアログ ボックスには、カスケード スタイル シート (CSS) のスタイル属性を定義するオプションが表示されます。CSS スタイルは、個別のの書式属性や位置属性を結合して属性セットにし、一度に適用できるようにしたものです。
[スタイル ビルダ] ダイアログ ボックスは、2 つのペインに分かれています。左側のペインには、8 つの汎用カテゴリ ([フォント]、[背景]、[テキスト]、[位置]、[レイアウト]、[エッジ]、[リスト]、[その他]) が一覧表示されます。カテゴリを選択すると、そのカテゴリのオプションが右のペインに表示されます。[スタイル ビルダ] ダイアログ ボックスでスタイル オプションを選択すると、CSS スタイル定義が自動的に作成されます。
CSS スタイル属性は、単一の Web ページ上にある各 HTML 要素に直接適用できます。または、外部スタイル シートに格納されている CSS スタイル規則にスタイル属性を追加することもできます。外部スタイル シートは、多くの Web ページに共通する外観を一括して定義するために使用できます。
[スタイル ビルダ] ダイアログ ボックスを表示するには
メイン メニューの [書式] をクリックし、[スタイル] をクリックします。
[スタイル ビルダ] ダイアログ ボックスが表示されます。
左側のペインでオプションを選択して CSS スタイル属性を定義します。
[デザイン] ビューでのインライン CSS スタイルの作成
デザイン ビューで選択されている HTML 要素を書式化すると、その要素のマークアップにスタイル属性がインラインで挿入されます。HTML ビューに切り替えて、挿入した新しいスタイル属性を表示して調整します。
CSS スタイル属性を Web ページの HTML 要素に直接適用するには
HTML デザイナのデザイン ビューで HTML ドキュメントを開きます。
[ドキュメント アウトライン] ウィンドウを表示し、書式を指定する要素を選択します。次に、[書式] メニューの [スタイル] をクリックして [スタイル ビルダ] ダイアログ ボックスを表示します。
左側のペインでオプションを選択して CSS スタイル属性を定義します。
[スタイル ビルダ] ダイアログ ボックスのタイトルには、選択した要素の名前が表示されます。CSS スタイルは、HTML ドキュメントの <BODY> 要素内の要素に適用できます。
[HTML] ビューでの CSS スタイル マークアップ
デザイン ビューで HTML 要素にインライン スタイルを追加する場合は、次のコード例に示すように、開始タグに HTML マークアップを追加します。その後、HTML ビューで表示して編集できます。
<DIV style="font-size:9pt; font-weight:bold; color:darkblue;">CSS Styles</DIV>
または、HTML ドキュメントの <HEAD> 要素内に STYLE ブロックを作成することもできます。次に例を示します。
<STYLE TYPE="text/css">
BODY {background:#FBFBFB; font-family:Verdana, Arial, Helv, Geneva, Helvetica, sans-serif; font-size:9pt;}
A:link {color:blue;text-decoration:none}
A:active {color:red;text-decoration:none}
A:visited {color:blue;text-decoration:none}
.term { font-size:9pt; font-weight:bold; color:darkblue;}
</STYLE>
外部スタイル シートでの CSS スタイル
スタイルは、.css という拡張子の個別のスタイル シート ドキュメントとして作成することもできます。
拡張子が .css の個別のスタイル シート ドキュメントとしてスタイルを作成するには
外部スタイル シート (.css ドキュメント) を開いて編集します。または、Web アプリケーションに既存のスタイル シートがない場合は、次の処理手順に従って、スタイル シートを作成します。
Web サイトを右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスの [Visual Studio にインストールされたテンプレート] リストの [スタイル シート] を選択し、[追加] をクリックして、新しいスタイル シートを Web サイトに追加します。
スタイル シートをダブルクリックして編集用に開きます。
[スタイル] メニューの [スタイル ルールの追加] をクリックして新しい空のスタイル定義を挿入します。
スタイル ルールのセレクタの後に続く中かっこ ({ }) の中にカーソルを置き、[スタイル] をクリックします。次に、[スタイル] メニューの [ビルド スタイル] をクリックして [スタイル ビルダ] ダイアログ ボックスを表示し、スタイル定義に属性を追加します。
.gif "メモ") メモ : |
|---|
[スタイル] メニューには、[スタイル ルールの追加] オプションと [ビルド スタイル] オプションがあり、外部 CSS スタイル シートを開いて編集すると表示されます。スタイル ルールのセレクタに続く中かっこの中にカーソルを移動すると、[スタイル] メニューの [ビルド スタイル] オプションを使用できるようになります。 |
外部スタイル シートに定義されているスタイルを Web ページの HTML 要素で使用できるようにするには、次の処理手順に従って、外部スタイル シートへのリンクをページの <HEAD> 要素内に作成します。
<LINK REL=stylesheet Type="text/css" HREF="Mystyles.css">
CLASS および ID による、要素へのスタイル定義の適用
次のコード例に示すように、先頭にピリオド (.) を付けてスタイルの CLASS プロパティ定義を開始します。
.term { font-size:9pt; font-weight:bold; color:darkblue;}
定義したスタイルの CLASS プロパティは、HTML デザイナのデザイン ビューまたは HTML ビューで Web ページ上の要素に適用できます。デザイン ビューでは、WYSIWYG エディタでテキストまたは要素を選択できます。また、[ドキュメント アウトライン] ウィンドウで要素を選択することもできます。[書式] ツール バーの [スタイル] メニューでスタイルを選択して、選択した要素にスタイルを適用します。
HTML ビューの [ドキュメント アウトライン] ウィンドウで要素を選択し、[プロパティ] ウィンドウを表示します。下方へスクロールして、選択した要素の CLASS プロパティを見つけ、目的の CSS スタイルのセレクタをピリオドなしで入力します。CLASS プロパティが要素の HTML マークアップに挿入されます。次に例を示します。
<DIV CLASS="term">World Wide Web</DIV>
"term" スタイルの前の定義を使用して、文字列 "World Wide Web" を 9 ポイントのフォント、太字、濃い青で表示します。
また、ページの 1 か所だけに使用する固有のスタイルを定義できます。次のコード例に示すように、一意のスタイル名は、先頭にシャープ記号 (#) を付けます。
#bigdeal {font-decoration:underline; font-size:24pt; color:red;}
一意のスタイルを Web ページ上の 1 つの要素に適用するには
HTML デザイナの HTML ビューでページを表示します。
[ドキュメント アウトライン] ウィンドウで要素を選択し、[プロパティ] ウィンドウを表示します。
この要素の ID プロパティに、目的のスタイルのセレクタを入力します。
ID 属性が要素のマークアップに挿入されます。次に例を示します。
<P ID="bigdeal">Happy Birthday</P>
- "term" スタイルの前の定義を使用して、文字列 "Happy Birthday" を 24 ポイントのフォント、下線付き、赤色で表示します。
処理手順
チュートリアル : Visual Web Developer での基本的な HTML 編集
UI 要素
オプションの詳細情報 |
参照項目 |
|---|---|
フォント |
|
背景 |
|
テキスト |
|
ページでの要素の位置 |
|
フロー制御、オーバーフロー、クリッピング、および改ページの印刷 |
|
境界、マージン、埋め込み |
|
リスト |
|
ユーザー インターフェイス (UI)、テーブル、視覚効果 |