回答編集履歴

2 追記

SurferOnWww

SurferOnWww score 10265

2019/01/03 12:40  投稿

Visual Studio を使ってはいかがですか?(Visual Studio Code ではなくて)
Visual Studio Community 2015 の例ですが、プロジェクトの新規作成で、
![イメージ説明](3fa6894e17a57af9e783a1906e4ab877.jpeg)
ASP.NET Web Application (.Net Framework) を選択し、
![イメージ説明](9333f716e3277ef16b8c07d2e151178a.jpeg)
「空」もしくは「Web フォーム」を選択し、
![イメージ説明](5587060f46516f99e20235a22a5943f1.jpeg)
自動生成されたプロジェクトの画面のソリューションエクスプローラーのプロジェクトを右クリックしてソースを追加し、
![イメージ説明](f5ee23fa81551bdc0b97669aa6362921.jpeg)
表示する html ソースを開いたまま[デバック(D)]⇒[デバックの開始(S)]または[デバッグなしで開始(H)]をクリックすると開発用の Web サーバー IIS Express が立ち上がって、以下のようにブラウザ(以下の例では IE ですが Chrome 等に変更可)に結果が表示され、IE の開発者ツールでコンソール出力も表示できます。
![イメージ説明](4670487c49096812b4f6f1b38656bb68.jpeg)
ちなみに、JavaScript のコードのデバッグもできます。
ちなみに、JavaScript のコードのデバッグもできます。
**【追伸】**
下の 2019/01/03 12:19 の私のコメントで「詳しい説明は上の回答欄に追記しておきます」と書きましたが、それを以下に書きます。
たぶん、ブラウザのアドレスバーには、以下の画像(IE11 の場合)のように、http://localhost:xxxxx/Sample.html ではなくて http://localhost:xxxxx/ と表示されていると思います。(xxxxx はポート番号。下の画像では 61544 となっていますがプロジェクトによって異なります)
![イメージ説明](9cd1fbfa152a31382b26990d7d82def4.jpeg)
http://localhost:xxxxxx/ というようにディレクトリを Web サーバー (IIS Express) に要求した場合、Web サーバーはまず以下のファイルがそのディレクトリにないか上から順に探し、見つかればそれを応答として返します。
Default.htm
Default.asp
index.htm
index.html
iisstart.htm
default.aspx
いずれも見つからない場合は、Web サーバーはディレクトリのファイル一覧を表示しようとしますが、デフォルトではその権限が与えられてないので拒否され、403.14 エラーになったということです。
自分の環境の Visual Studio Community 2015 では Sample.html を表示した状態から[デバック(D)]⇒[デバックの開始(S)]または[デバッグなしで開始(H)]をクリックすれば、最初の回答の一番最後の画像に示したように Sample.html が呼ばれてブラウザに表示されるのですが、そのようにやりましたか?
**注意:本題とは直接関係ないことですが、ブラウザのキャッシュに注意してください。html, css, js ファイルの内容を変更したのにブラウザにその結果が反映されないことがあったら、ブラウザのキャッシュのせいです。**
1 訂正

SurferOnWww

SurferOnWww score 10265

2019/01/02 11:58  投稿

Visual Studio を使ってはいかがですか?(Visual Studio Code ではなくて)
Visual Studio Community 2015 の例ですが、プロジェクトの新規作成で、
![イメージ説明](3fa6894e17a57af9e783a1906e4ab877.jpeg)
ASP.NET Web Application (.Net Framework) を選択し、
![イメージ説明](9333f716e3277ef16b8c07d2e151178a.jpeg)
「空」もしくは「Web フォーム」を選択し、
![イメージ説明](5587060f46516f99e20235a22a5943f1.jpeg)
自動生成されたプロジェクトの画面のソリューションエクスプローラーのプロジェクトを右クリックしてソースを追加し、
![イメージ説明](f5ee23fa81551bdc0b97669aa6362921.jpeg)
![イメージ説明](4670487c49096812b4f6f1b38656bb68.jpeg)
ちなみに、JavaScript のコードのデバッグもできます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る