IntelliSense を使用した CSS の作成
IntelliSense を使用すると、カスケード スタイル シート (CSS) を作成してコンテンツにスタイルを適用するときの [コード] ビューへの入力作業を効率化することができます。
.gif "ヒント") ヒント : |
|---|
ページの [コード] ビューで使用できる機能およびコマンドの多くにはキーボード ショートカットが用意されています。詳細については、「キーボード ショートカット」を参照してください。 |
IntelliSense のショートカット (自動ポップアップ) メニューを CSS で使用するには
Web ページまたは外部 .css ファイルの [コード] ビューで、CSS を作成または適用する場所にカーソルを置きます。
CSS 用の IntelliSense ショートカット メニューを表示するには、次のいずれかの操作を行います。
「<style」、「{」、「.」、「#」、CSS プロパティ、または「;」を入力します。
[コード ビュー] ツール バーで、[メンバの一覧] ボタン
.gif "Cc295295.f0d23c77-8315-49f6-a8b4-9b928c1f5820(ja-jp,Expression.10).gif")
をクリックします。[編集] メニューで [IntelliSense] をポイントし、[メンバの一覧]
をクリックします。ヒント :IntelliSense ショートカット メニューが表示されない場合は、カーソルを置いた位置が、コードの中で要素、クラス、ID、プロパティ、または値を挿入できる位置ではないか、カーソルを置いた位置の前のコードが有効ではない可能性があります。
.gif "メモ")
メモ :IntelliSense のショートカット メニューを表示するには、[ページ編集オプション] ダイアログ ボックスの [IntelliSense] タブで、ステートメントの補完に関する各種オプションを選択する必要があります (既定では選択されています)。
IntelliSense のショートカット メニューで、コードに挿入するアイテムを選択するには、次のいずれかの操作を行います。
ショートカット メニューのアイテムを 1 つずつ移動するには、下矢印キーまたは上矢印キーを押します。
ショートカット メニューに表示されているアイテムをひとまとまりで移動するには、PageDown キーまたは PageUp キーを押します。
ショートカット メニューの特定のアイテムに直接移動するには、一覧にある移動先のアイテムの最初の文字を入力します。
一覧をスクロールするには、垂直スクロール バーの矢印をクリックします。
ヒント :ショートカット メニューのアイテムを挿入せずに一覧を閉じる場合は、Esc キーを押すか、ショートカット メニュー以外の場所をクリックします。
選択したアイテムをショートカット メニューからコードに挿入するには、次のいずれかの操作を行います。
Tab キーまたは Enter キーを押します。
アイテムをダブルクリックします。
[コード ビュー] ツールバーで [入力候補] ボタン
.gif "Cc295295.8846ec0d-7d83-4f9f-b169-159ad708b54c(ja-jp,Expression.10).gif")
をクリックします。[編集] メニューで [IntelliSense] をポイントし、[入力候補] をクリックします。
IntelliSense を使用して新しいスタイル ルール セットを作成するには
次のいずれかの操作を行います。
外部カスケード スタイル シートの [コード] ビューで、既存のスタイル ルール セットの外側にある空白行にカーソルを置きます。
Web ページの内部 CSS の [コード] ビューで、スタイル要素の開始タグ <style> と終了タグ </style> の間にあって既存のスタイル ルール セットの外側にある空白行に、カーソルを置きます。
ルール セットのセレクタを定義するには、次のいずれかの操作を行います。
要素セレクタを作成するには、使用する HTML 要素の最初の文字を入力して、IntelliSense のショートカット メニューで目的の要素を選択します。次に、擬似クラス、子要素、または類似のセレクタを追加する場合は、必要な区切り文字を入力して、IntelliSense のショートカット メニューで 2 番目の要素または擬似クラスを選択します。
クラス セレクタを作成するには、ピリオドを入力し、クラスの名前を入力します。
Web ページの内部 CSS を編集している場合、Web ページで使用されているクラス セレクタの IntelliSense ショートカット メニューが表示されます。
ID セレクタを作成するには、シャープ記号 (#) を入力して、ID セレクタの名前を入力します。
Web ページの内部 CSS を編集している場合、Web ページで使用されている ID セレクタの IntelliSense ショートカット メニューが表示されます。
スタイル ルール セットの定義ブロックを開始するには、左中かっこ ({) を入力します。
表示される IntelliSense のプロパティのショートカット メニューで、現在のルールに追加するプロパティを選択します。
表示される IntelliSense の値のショートカット メニューで、使用する値または色を選択するか、一覧の上部の [選択] ボタンが利用可能な場合は、このボタンを使用してカスタムの値を指定します。
追加のプロパティ ルールを現在のルール セットに追加するには、セミコロン (;) を入力し、手順 4. と 5. を繰り返します。
IntelliSense を使用してスタイルを適用するには
Web ページの [コード] ビューで、スタイルを設定する要素の開始タグ内の要素名の後ろにカーソルを置いて、Space キーを押します。
IntelliSense ショートカット メニューで、次のいずれかの操作を行います。
クラス セレクタを適用するには、[クラス] を選択します。
ID セレクタを適用するには、[ID] を選択します。
インライン スタイルを作成して適用するには、[スタイル] を選択します。
次のいずれかの操作を行います。
クラス セレクタまたは ID セレクタを適用する場合は、IntelliSense のショートカット メニューで、目的のスタイルを選択します。
インライン スタイルを適用する場合は、IntelliSense のショートカット メニューで、現在のルールに追加するプロパティを選択します。次に、IntelliSense の値のショートカット メニューで、使用する値または色を選択するか、一覧の上部の [選択] ボタンが利用可能な場合は、このボタンを使用してカスタムの値を指定します。別のプロパティ ルールを現在のルール セットに追加するには、セミコロン (;) を入力し、この手順を繰り返します。