Q&A
「cssが反映されていません」とのことですが、具体的にはどのような現象を見てそのような感想を持ったのでしょうか？
VS Code Live Server cssを反映させたい
先日vs codeを使い始めたばかりで、使い方が手探りな状態です。
Live HTML Previewerでプレビューしても、cssが反映されていません。
過去にも同様の質問が多数あり、拝見して実行しましたが、解決できる兆しがなかったので、質問させていただきます。
発生している問題・エラーメッセージ
エラーメッセージ 出力の部分に以下のようなエラー？が表示されています。 Generated : /Users/フォルダ名/フォルダ名/css/style.css /Users/フォルダ名/フォルダ名/css/style.css.map -------------------- Watching... -------------------- Not Watching... -------------------- ### 該当のソースコード ```ここに言語名を入力 ### 試したこと ・スペル確認 ・再起動 ・フォルダの作り直し ・過去の解答の実行 ・htmlの確認 ### 補足情報（FW/ツールのバージョンなど） 現在、このような状態になっています。 [リンク内容](https://gyazo.com/f94dab8e999ea1384e9373d04e6f7379) ここにより詳細な情報を記載してください。 ・osはマックです 初めての質問で、わかりづらい部分があるかと思いますが、よろしくお願いいたします。
ありがとうございます。
Live HTML Previewerでプレビューしても、scssに入力したフォントのサイズや色、並び方の指定や、色の指定などが反映されていませんでした。scssに入力したものはcssに反映されています。
よろしくお願いします。
反映されていなかったスタイルは一部でしょうか、全部でしょうか。
具体的なコードがないので一般論的な話になりますが、とりあえず、CSSが読み込めているかを確認してみてはどうでしょうか。
ありがとうございます。
全部です。HTMLで入力したテキストは表示されています。
style.scssを作成し、watch sassでstyle.cssとそのmapも作成できています。style.scssに入力したコードはstyle.cssに反映されていますが、プレビューしても何も変わりません、、。あとはどこを確認したらいいでしょうか。
よろしくお願いします。
https://gyazo.com/cdb0d48b43526d634a393d45be7b356f
https://gyazo.com/6573f5f428e653a37e9b2aceb85959f3
すみません、当方の環境では「Live HTML Previewer」という機能拡張は使っていないので、わからないことが多いです。
Live HTML Previewer ではなくて、HTMLファイルをダブルクリックするなどしてブラウザで確認した場合はどうなりますか？
ありがとうございます。
試してみましたが、cssは反映されす、変わりありませんでした。
プリビューに関して、再度調べて「HTML Preview」という拡張機能を入れてみましたが、ダメでした、、。
ブラウザでCSSが読み込まれているかどうか、確認してみてはどうでしょうか。
htmlも見せてもらっていいですか？
他の方もおっしゃっていますが、ブラウザで開いたときにcssが読み込まれているかどうか、ブラウザの拡張機能などで確認してみてはいかがでしょうか。
もし読み込まれていないのであれば、htmlが提示されていないのでただの可能性の話ですが、ありがちなところだとhtml側で指定しているcssのパスと実際のcssのパスがあっていないとかですかね。
html、htmlやcssを含むフォルダの構成を示していただいた方が回答が得られやすいと思いますよ。
Lhankor_Mhyさん、balut0さんありがとうございます。
ブラウザで、検証してみましたが、読み込まれていませんでした。
recalさん、ありがとうございます。HTMLのheadの部分です。
https://gyazo.com/3c3b8a7007814838108b137b071747db
よろしくお願いします。
読み込まれていないならば、パスが間違っているということになるかと思います。
ところで、「読み込まれていません」と思ったのは、具体的にはどのような現象を確認することによってそう思ったのですか？
ありがとうございます。パスは
<link rel=“stylesheet” href=“css/style.css”>
フォルダの構造は
cssフォルダの中にstyle.css style.css.map
sassフォルダの中にstyle.scss
html
となっています。わかりずらくてすみません。パスはどう直したらいいでしょうか。何度も解答していただきありがとうございます。よろしくお願いします。
スクリーンショットなどを拝見した限り、パスに間違いはないように感じられるのです。
ですので、「読み込まれていません」という言葉に、何か勘違いがあるのではないかという疑問を持っています。
繰り返しになりますが、「読み込まれていません」と思ったのは、具体的にはどのような現象を確認することによってそう思ったのですか？
ありがとうございます。
①ブラウザで確認しても以下のような表示になっており、設定したcssが反映されていない
https://gyazo.com/c9295ca2847f038f035b3bff3fb141fb
これがscssとcssのコードです。
https://gyazo.com/cdb0d48b43526d634a393d45be7b356f
②出力の部分に以下のメッセージが出続けている
Compiling Sass/Scss Files:
/Users/フォルダ名/今作業しているフォルダ名/scss/style.scss
--------------------
Generated :
/Users/フォルダ名/今作業しているフォルダ名/css/style.css
/Users/フォルダ名/今作業しているフォルダ名/css/style.css.map
--------------------
③watch sassを押してもsuccessと出ない
以上の現象が挙げられます。
何度も何度もすみません。よろしくお願いします。
それだけでは、「読み込まれていない」という確証としては弱そうです。
Ctrl+U （Macだとcommand+Uですか？）でソースを表示して、link要素のURLをクリックするとどうなりますか？
ありがとうございます。
そうなんですね、、、
urlはダミーで置いてあるだけなので、特に意味はないです：(
たぶん、それではないです。
CSSを読み込んでいるlink要素のことです。
わかりにくいかな……？
<link rel="stylesheet" href="css/style.css">
↑これをブラウザ上でクリックするとどうなるか、という話です。
ありがとうございます。
「開くことができません」と出て、新しくファイルを作成しますかと出たので、作成してみました、、。https://gyazo.com/1157474ac4192b696b3dcca012dfdbc3 （青でハイライトされているものです）
お願いした作業はそれではなかったのですが、これはヒントになりそうです。
link要素だけを、コピペしていただけますか？
予想で回答をしてしまいましたので、ご確認下さい。
画像でソースを貼り付けられると、こちらで画像からソースを手入力する際にミスが起こったり
表示されてない全角文字などに起因するエラーにも対処できないので(今回のような全角文字も)
次からはソースをコピペで貼り付けてください。
説明不足ですみません。
recalさん
ありがとうございます。これから気をつけます。回答いただき本当にありがとうございました。
回答1件
0
おそらく、ダブルクォーテーションが全角などの別の記号になっています。
<link rel=”stylesheet” href=”css/style.css”>→<link rel="stylesheet" href="css/style.css">
投稿2021/12/22 03:01
総合スコア36158
ありがとうございます
css反映されました、、、！！！！何度も丁寧に答えていただき本当にありがとうございます！！本当に助かりました。
ご解決されて何よりです。
今回の質問は、コードをテキストで提示いただいていれば、15分ぐらいで回答がついて解決したと思います。
次の機会があれば、質問の仕方を工夫されることをおすすめします。
あなたの回答
tips
プレビュー
