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

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

新規登録して質問してみよう
ただいま回答率
85.50%

Q&A

解決済

2回答

745閲覧

Visual Studio Code【live server】 で index.htmlとstyle.cssを同時にブラウザーに反映させる方法

fumizsteady

総合スコア11

0グッド

0クリップ

投稿2019/06/11 11:04

前提・実現したいこと

Visual Studio Code【live server】 で index.htmlとstyle.cssを同時にブラウザーに反映させる方法を知りたいです。

ここに質問の内容を詳しく書いてください。

index.html と style.css をそれぞれctrl + s で保存しなければブラウザーに反映したいので一度に両方の修正を反映させるにはどうしたらよろしいでしょうか?

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

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ぐぐりましたが回答を見つけることができませんでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

mosapride

2019/06/12 01:49

> 保存しなければブラウザーに反映したいので 「保存したらブラウザに反映」「保存せずにブラウザに反映」のどちらですか?
fumizsteady

2019/06/12 11:22

反映したいので ⇒ 反映しないので の間違いです。 ご指摘ありがとうございます。
guest

回答2

0

ベストアンサー

試しました。参考になれば

試した手順

  1. 作業フォルダ内でindex.htmlとstyle.cssファイルを作成
  2. Live Serverを起動
  3. chromeで http://127.0.0.1:5500/index.htmlを表示
  4. index.htmlを変更・保存(ctrl +s)→ブラウザ自動再ロード・反映確認
  5. style.cssを変更・保存(ctrl +s)→ブラウザ自動再ロード・反映確認
  6. index.htmlを変更・保存(ctrl +s)→ブラウザ自動再ロード・反映確認

Edgeでも保存→ブラウザ自動再ロード・反映確認できました。

環境の違いで動作が異なる????

実行環境

OS:Windows 10 Pro
VS Code最新版(1.35.1)
Chrome最新版 75.0.3770.80(Official Build) (64 ビット)
使ってるLive Server →https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

投稿2019/06/13 01:58

編集2019/06/13 02:02
mosapride

総合スコア1480

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

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

fumizsteady

2019/06/13 02:33

私のPC環境がwindows7なので不具合はあるかもしれません。今週windows10が導入されるのでその環境で試したいと思います。親切な回答ありがとうございます。
guest

0

Ctrl + k, s: すべてのファイルを保存
(Ctrl+kのあとにsを押す)
というショートカットで一括保存したら反映されないでしょうか?

参考までにshort-cut for windowsを添付します。

リンクのSave Allという項目のショートカットのことを指しています。

投稿2019/06/11 14:56

tail12

総合スコア607

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

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

oikashinoa

2019/06/11 23:14

使っている機能拡張によってはショートカットキーが変更されているかもです。 ファイルメニューにも該当コマンドがありますよ。
fumizsteady

2019/06/12 11:21

ファイルメニューの”すべて保存”でブラウザーに一括表示できました。 ctrl + k,s でショートカットを試みましたが、ショートカットファイルが出現してしまい、なぜか'save all' ”すべて保存”の効果となりませんでした。 ありがとうございます。
fumizsteady

2019/06/13 02:35

試してみます。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問