チュートリアル: HTML スニペットの使用

  • [アーティクル]

このチュートリアルでは、HTML コード スニペットを使用してマークアップをページに追加する方法を説明します。 Visual Studio で HTML コード スニペットを使用すると、ソース ビューで Web ページのマークアップを作成するときの入力作業を減らし、時間を節約することができます。

注意

このトピックの例は、ASP.NET Web フォーム ページに固有のものです。ただし、Web フォーム、ASP.NET MVC (モデル ビュー コントローラー)、および ASP.NET Web ページ の Web アプリケーション用に作成するページで HTML スニペットを使用できます。

このトピックは、次のセクションで構成されています。

  • 必須コンポーネント

  • コード スニペットの動作

  • 既存のプロジェクトを開くまたは新規プロジェクトの作成

  • HTML スニペットの挿入

  • ページの実行

  • 次の手順

必須コンポーネント

このチュートリアルを完了するための要件は次のとおりです。

  • Visual Studio または Visual Studio Express for Web。

コード スニペットの動作

Visual Studio には、C#、Visual Basic、XML、HTML (ASP.NET マークアップを含む) を対象としたコード スニペットが 200 個以上用意されています。 コード スニペットは、作成済みのプログラミング コードまたはマークアップで構成されています。 場合によっては、プロパティ名などの情報用のプレースホルダーがスニペットに含まれていることがありますが、このような情報はコード スニペットの挿入後に指定できます。 コード スニペットは、コード エディターで使用したり、Web ページの作成時に HTML エディターのソース ビューで使用したりします。

このチュートリアルでは、HTML と ASP.NET マークアップを Web フォーム ページに追加します。 ほぼすべてのスニペットに、コードをすばやく挿入する方法が用意されています。 たとえば、Web フォーム ページに ASP.NET Button サーバー コントロールを挿入するには、「<bu」と入力し、Tab キーを 2 回押すことができます。 または、「button」と入力し、Tab キーを 1 回押すことができます。 こうすると、エディターで Button コントロールのマークアップが補完され、次のマークアップが挿入されます。

<asp:Button Text="text" runat="server" />

このチュートリアルでは、コード スニペットを最も速く挿入する方法を説明します。 ただし、コード スニペットは、次のような方法で挿入することもできます。

  • 挿入するコード スニペットを表示する箇所にカーソルを置き、ページを右クリックして [スニペットの挿入] をクリックします。

  • 挿入するコード スニペットを表示する箇所にカーソルを置き、Ctrl キーを押しながら、K キーまたは X キーを押します。 スニペットを選択できるリストが表示されます。

  • コード スニペットを使用して囲むワードを選択し、それを右クリックして [ブロックの挿入] をクリックします。

  • [編集] メニューの [IntelliSense] をポイントし、次に [スニペットの挿入] をクリックします。

Visual Studio で、使用可能なコード スニペットを確認したり、スニペットを追加したりするには、コード スニペット マネージャーを使用します。

注意

コード スニペット マネージャーの機能は、Visual Studio Express for Web では使用できません。

次の図は [コード スニペット マネージャー] ダイアログ ボックスを示しています。

[コード スニペット マネージャー] ダイアログ ボックス

[コード スニペット マネージャー] ダイアログ ボックス

次の手順では、HTML 要素に使用可能なスニペットを表示します。

使用可能な HTML コード スニペットをコード スニペット マネージャーで表示するには

  1. Visual Studio を開きます。 コード スニペット マネージャーを表示するためにプロジェクトを開く必要はありません。

  2. [ツール] メニューの [コード スニペット マネージャー] を選択します。

    [コード スニペット マネージャー] ダイアログ ボックスが表示されます。

  3. [言語] ボックスの一覧で [HTML] を選択します。

    ASP.NET、ASP.NET MVC、HTML など、HTML 関連のスニペットが保存されているフォルダーがいくつかあります。

  4. [場所] で HTML フォルダーを展開します。

  5. div を選択します。

    [代替ショートカット] ボックスには、p、h1、h2 などの関連した HTML 要素があります。 関連する要素には、<div、<p、<h1 などのショートカットを使用して挿入できるスニペットもあります。

既存のプロジェクトを開くまたは新規プロジェクトの作成

Visual Studio プロジェクトまたは Visual Studio Express for Web アプリケーション プロジェクトがない場合は、次の手順に従ってこのチュートリアル用に作成してください。チュートリアルでは、Default.aspx ページでスニペットを扱いますが、既存のプロジェクトのページで同じ手順を実行できます。

Web アプリケーション プロジェクトを作成するには

  1. [ファイル] メニューの [新しいプロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログ ボックスが表示されます。

  2. Web ノードを選択し、[Visual Studio にインストールされたテンプレート] セクションで [ASP.NET Web アプリケーション] を選択します。

  3. [名前] フィールドに「SnippetTest」と入力します。

  4. [OK] をクリックします。

    Visual Studio は Web アプリケーション プロジェクトを作成します。

HTML スニペットの挿入

IntelliSense には、他の HTML 要素と同じように、使用可能な HTML コード スニペットが表示されます。 コード スニペットには、スニペットの挿入や編集をすばやく実行できるようにする機能がいくつかあります。 また、コード スニペットにはプレースホルダーが含まれているものがあり、その属性にカーソルを移動しなくても、値を入力することができます。

この手順では、ASP.NET 要素を挿入します。 これらの要素は、コード スニペット マネージャーの HTML セクションにあります。

HTML スニペットをマークアップに挿入するには

  1. Default.aspx ページを開いていない場合は、このページを開きます。

  2. ソース ビューに切り替えます。

  3. 終了タグ </asp:Content> の前にカーソルを置きます。

  4. 「<che」と入力します。

    ドロップダウン リストに、要素名とスニペットが表示されます。 次の図に示すように、山かっこを含むアイコンは HTML 要素を示します。

    HTML 要素アイコン

    次の図に示すように、スニペットは紙のアイコンで示されます。

    スニペット アイコン

    スニペットには、HTML 要素と同じ名前になっているものがありますが、これにはスニペットのアイコンとタグのアイコンの両方が表示されます。

  5. Tab キーを 2 回押します。

    CheckBox コントロールのマークアップが表示され、text プロパティの値が強調表示されます。

    注意

    要素の開始タグと終了タグの間にカーソルを置いていない場合、異なる結果になることがあります。

  6. 「Check box」と入力し、Enter キーを押してこの要素を完成します。

    カーソルは、この要素の末尾に移動します。Tab キーを押してこの要素を完成させる必要はありません。

  7. Enter キーを押して次の行に進みます。

  8. 行頭にカーソルを置き、ページを右クリックします。

  9. [スニペットの挿入] をクリックし、使用できるスニペット フォルダーを表示します。

  10. HTML スニペット フォルダーをダブルクリックします。

  11. 「br」と入力し、Tab キーを押します。

    改行 (br) 要素のマークアップが表示されます。

  12. Enter キーを押して次の行に進みます。

  13. 行頭にカーソルを置き、Ctrl キーを押しながら、K キーまたは X キーを押します。

    スニペット フォルダー リストが表示されます。

  14. Tab キーを押して ASP.NET スニペット フォルダーを選択します。

  15. 「ra」と入力し、Tab キーを押します。

    RadioButton コントロールのマークアップが表示され、text が強調表示されます。

  16. 「Radio Button」と入力します。 Enter キーを押してこの要素を完成します。

  17. Enter キーを押して次の行に進みます。

  18. 「<br」と入力し、Tab キーを 2 回押します。

  19. Enter キーを押して次の行に進みます。

  20. [編集] メニューの [IntelliSense] をポイントし、次に [スニペットの挿入] をクリックします。

    スニペット フォルダー リストが表示されます。

  21. ASP.NET スニペット フォルダーをダブルクリックします。

  22. 「la」と入力し、Tab キーを 2 回押します。

    Label コントロールのマークアップが表示されます。 プロパティ値 text が強調表示されています。

  23. 「Text box」と入力し、Enter キーを押します。

  24. 次の行に進みます。

  25. 「<textb」と入力し、Tab キーを 2 回押します。

    TextBox コントロールのマークアップが表示されます。

ページの実行

最後の手順ではページをテストします。 ページをテストするには、ローカルで実行している IIS Express を使用できるので、IIS は必要ありません。

ページを実行するには

  1. Ctrl キーを押しながら F5 キーを押してページを実行します。

  2. 一番下までスクロールします。 チェック ボックス、ラジオ ボタン、ラベル、およびテキスト ボックス コントロールがページの下部にあります。

次の手順

このチュートリアルでは、HTML コード スニペットを Visual Studio プロジェクトに追加する方法を学習しました。 コード スニペットの操作方法の詳細については、「コード スニペット」のページにあるトピックを参照してください。