Q&A
コードを画像で提示されても他者のほうでは再現確認できませんし正しく読み取れませんので
テキストベースでマークダウンのcode機能を利用してご提示ください
ググっても解決策が見つからなかった為質問させてもらいます。
vscodeを本日インストールしたばかりで、わからない点や基本的な見落としかもしれませんが、ご存知の方宜しくお願いします。
前提・実現したいこと
html5previewでCSSを反映させたい
問題の切り分けとして下記も試してください
・font-sizeをもっと大きく、または小さくする
・bodyに背景色を付ける
・VSCodeを立ち上げ直す or ビューワーを更新（ブラウザに置けるF5やキャッシュクリアのような行為）してみる
ファイル保存前ですよね。キャプチャー見る限り。
ファイル保存してないから、とかないですか？
"プレビューに反映されない"なので、関係ないかもしれませんが・・・。
h1がこれだとデフォルトのサイズか指定したサイズかわかりませんしね。
いずれにしてもテキストベースでのコード待ちということで。
html5preview というエクステンションがちょっと見つかりませんでしたが、これは正式名称ですか？
https://marketplace.visualstudio.com/search?term=html5preview&target=VSCode&category=All%20categories&sortBy=Relevance
ですね。
テキストでコードいただかないとなんとも言えないですね 汗
質問者さん> コードもそうなのですが、
パッケージは、html5previewで本当にお間違いないですか？
HTML Previewというパッケージは存在確認取れましたが、
html5previewというパッケージは見つかりません。
パッケージのバグの可能性もあるので、
コードのテキスト掲示とともに、パッケージの名称や詳細情報もご確認、ご掲示ください。
って、Lhankor_Mhyさんとコメント内容被ってしまった・・・。
HTML Previewでした。申し訳ありません。
いま再度立ち上げしたところ反映されておりました。
改善策を色々出して頂きありがとうございました。
質問は編集できますので。もし今後同じように質問されても答えようがありません。
今のうちに練習しておくとあとでお互い困らなくてすみます
回答2件
0
ベストアンサー
Visual Studio Codeのパッケージである、
HTML Preview拡張を使われている、ということで回答をいたします。
検証結果、下記のような結果となりました。
- 外部CSSは、保存しないとプレビューに反映できない
- 上記のように全て保存した上で、プレビュータブの右上の、四角に右矢印が付いたようなアイコンのボタンを一度押さないと、ライブプレビューに反映されない。
上記を踏まえ、
アプリケーションの立ち上げでもいけるようですね。
VS Codeはわりとキャッシュ強いので、こういったこともたまーに起きます。
（GitのPullが即時反映されない時とかある）
投稿2020/01/08 07:12
総合スコア9555
初めてで説明も下手で申し訳ありません。
ご丁寧にありがとうございます。
外部CSSは、保存しないとプレビューに反映できない
上記のように全て保存した上で、プレビュータブの右上の、四角に右矢印が付いたようなアイコンのボタンを一度押さないと、ライブプレビューに反映されない。
全く同じ状況です。
どうしたら、ＣＳＳに変更を加えたら反映されるんでしょうか？
ブラウザならすぐに反映されるんですが。
niconic73027793さん >
ファイル保存した上で、
> プレビュータブの右上の、四角に右矢印が付いたようなアイコンのボタンを一度押さないと、
か、
> VSCode再起動
しか、現状方法がないかと。
そうなんですね。
回答ありがとうございました。
0
投稿2020/01/07 22:15
編集2020/01/08 06:03
総合スコア1147
画像なので100%読み取れてるか分かりませんが、見る限り相対パスのような。
css/test.css
a
なくても見るパスは同じです。
記載のあるファイルからの相対パスで見に行きます。
→まさかそこを知らずに回答で指摘していると思ってなかったので間違った回答として低評価しました。
上記のコメントを踏まえ、低評価します
htmlに書いてあるコードは相対パスで書きました。
ですが、なぜプレビューの方にフォントサイズと色が反映されないのでしょうか。
noby_さん
質問への追記修正依頼欄に指摘があることを参考に質問を編集してください。
sandboxでは動くのでhtml5previewに問題があるのでは？
一応編集しときました。
いま再度立ち上げしたところ反映されておりました。
改善策を色々出して頂きありがとうございました。
結局は立ち上げ直すしかないんでしょうか？
変更があるたびに立ち上げ直していたら、手間でしょうがありません。
あなたの回答
tips
プレビュー
