質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.30%
Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2384閲覧

vscordでHTML、CSSを正常に実行できない

rss

総合スコア1

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/03/04 15:23

vscodeの設定でつまずいてしまいました。

前提

vscodeを開きHTMLのファイルとcssのファイルを開き、左のバーの実行とデバックを開いて実行とデバックと書かれた青いボタンを押すとはじめは正常に選んだブラウザが開かれ実行できるのに、cssファイルに変更を加えて、再度同様の手段で実行してみるとsetting.jsonという名前のファイルが開かれてしまいます。
さらにそこからもう一度実行とデバックの青いボタンを押すと「'JSON with Comments' をデバッグするための拡張機能がありません。Marketplace に 'JSON with Comments' の拡張機能があるかどうかを検索しますか?」という表示が出て実行ができません。
cssに変更を加えたときのみに出る現象のようで、同時に開いているhtmlに変更を加えてもこのようにはなりません。
似たような質問をC#の環境でしている方がいましたがそちらを見ても解決できませんでした。
どうしたらよいでしょうか?

発生している問題・エラーメッセージ

'JSON with Comments' をデバッグするための拡張機能がありません。Marketplace に 'JSON with Comments' の拡張機能があるかどうかを検索しますか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

1

ベストアンサー

発生している現象についての説明

「実行とデバッグ」ボタンは、「現在VSCodeで表示されている(アクティブなタブの)ファイル」に対して、実行とデバッグを試みます。

HTML文書を書き替えた直後は(HTML文書が表示されているので)HTML文書の実行とデバッグを試みます。VSCodeの初期設定では、特に何も設定しなくてもHTML文書に対しては既定のブラウザーがデバッガーとして選択されています。このため、「実行とデバッグ」ボタンを押すと、既定のブラウザーが開いてローカルなWebページが表示されます。

いっぽう、CSS文書を書き替えた直後は(CSS文書が表示されているので)CSS文書の実行とデバッグを試みます。ところが、VSCodeには「どのWebページを表示すればいいかわからない」(なぜなら、CSS文書は通常複数のHTML文書から参照される)ため、デバッガーの選択が必要です。このため、CSS文書で初めて「実行とデバッグ」を押したときには、ウィンドウ上部中央に選択肢が表示され、選択した項目に応じた内容のlaunch.jsonというファイルが、VSCodeで開いているフォルダーの.vscodeフォルダー以下に作成されます。

ちなみに、launch.jsonが表示された状態で「実行とデバッグ」ボタンを押すと、(コメント付きの)JSON文書の実行とデバッグを試みます。「拡張機能が~」というメッセージが出るのはそれが理由です。今回はJSON文書の実行とデバッグをしたいわけではないので、無視してください。

解決策

あなたが行ないたいことは、「作成中のHTML文書とCSS文書の変更に応じて、それらで構成されるWebページの表示を確認したい」ということではないかと想像します。

そうであれば、(まだ導入していないなら)拡張機能のLive Previewを導入してください。そして、HTML文書の置かれたフォルダーをVSCodeの「フォルダーを開く」で開いている状態で、編集中のHTML文書を右クリックし、「プレビューの表示」を選択します。すると、ウィンドウの右半分にプレビューが表示され、左半分で編集しているHTML文書やCSS文書の変更点が即時に反映されるようになります。

Live Previewは、作業中のフォルダーをドキュメントルートとするWebサーバーを起動することで実現しているため、ローカルファイルを直接表示するよりも実際のWebサーバーに近い環境で確認できます。なお、プレビューでは外部へのリンクなどが機能しないため、それらを確認するときには、プレビュー右上のボタンから「ブラウザーで開く」を選択するとか、コマンドパレットから「ライブプレビュー: デバッグプレビューの表示(外部ブラウザー)」を選択してください。

投稿2023/03/06 01:34

編集2023/03/14 23:45
Daregada

総合スコア11990

rss👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rss

2023/03/06 04:20

「作成中のHTML文書とCSS文書の変更に応じて、それらで構成されるWebページの表示を確認したい」 そうですまさにこれです! 無事表示できるようになりました! ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問