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

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

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

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

Q&A

解決済

2回答

995閲覧

vscodeでcssコードが反映するされなく、雷マークが左下に出ています。

Lomaebe18

総合スコア5

CSS

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

0グッド

0クリップ

投稿2020/01/28 05:02

編集2020/01/28 06:29

前提・実現したいこと

初めまして。
vscodeで模写を行っているのですが、cssコード全部が反映されません。(昨日までは反映されていた。)

<link rel...>も<head>内に書き、コードも間違っていません。 1つ気になる部分があり、左下に雷マーク突如現れ、下記のような言葉が、書かれていました。

Looking for CSS classes in the workspace...(50.00%)
CSS classes caches(click to cache again)

上記の原因で今回の問題が起きているのか分かりませんが、このような問題が起き、
解決した事があるような方など、いましたら、解答お願いしたいです。

コンソール内でこのようなエラーが出ていました。

Refused to apply style from 'http://127.0.0.1:5500/HTML/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. index.html:1 コード

HTMLのコード書きに貼りました。
確認の方よろしくお願いします。

<html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="style.scss"> <title>Hello, world!</title> </head> <body> <!--- header--> <div class="header"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><img src="../img/logo.png" width="30px"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav> </div> <!--- hader end--> <!---jumbtron top--> <div class="jumbotron"> <div class="container"> <h1>LINE STOREでは</h1> <h1>さまざまな支払い方法</h1> <h1>LINEのアイテムを購入できます!</h1> <p>最新のアイテムを購入したり、LINE STORだけのイベントで</p> <p>お得にお買い物しましょう!</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a> </div> </div> <!--- end --> <!--- jumbotrom cennter--> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html> コード ```css ```.jumbotron { background-image: url(../img/header.png); background-position: center; height: 400px; background-repeat: no-repeat; color: white; } .jumbotron h1 { color: white; } .jumbotron p { color: white; } /*# sourceMappingURL=style.css.map */ コード
### 発生している問題・エラーメッセージ

エラーメッセージ

Looking for CSS classes in the workspace...(50.00%)
CSS classes caches(click to cache again)

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

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

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

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

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

m.ts10806

2020/01/28 05:04

コードが間違っているかどうかはそのコードを見ないと誰にも判断できません。 あとそれぞれのファイルの配置がわかるフォルダ構成もご提示ください
dit.

2020/01/28 05:19 編集

何かしらの拡張機能は使っていますか?https://github.com/Zignd/HTML-CSS-Class-Completionこの辺とか。 また、「コードが絶対に間違っていない」という考えは一度捨て、せめてCSSを読み込んでいる部分のHTML、読み込まれているはずのCSSの提示だけでもしてください。 質問は編集することができます。 コードを貼る際はhttps://teratail.com/help/question-tips#questionTips3-5-1を参考に、コードを選択、<code>ボタンを押してください。 ```html ここにHTMLのコード ``` 1行以上開ける ```css ここにCSSのコード ``` の形にしてください。 パソコンからの編集であればプレビューが出ているはずなので確認しながら編集してください。
maisumakun

2020/01/28 05:17

表示しているブラウザのコンソールにはエラーなど出ていませんか?
m.ts10806

2020/01/28 05:21

コードはテキストでご提示ください。画像では誰も再現確認できませんし、わざわざ拾おうと思う人はいないのでは。
dit.

2020/01/28 06:32

編集前に出ていた画像から判断すると、HTMLからCSSを見に行くには <link rel="stylesheet" type="text/css" href="../css/style.css"> となると思いますがいかがでしょうか。 また、SCSSを食わず嫌いしているので間違っていたらどなたか指摘してほしいのですが、style.scssをコンパイルしたものがstyle.cssだとしたら<link rel="stylesheet" href="style.scss">は不要ではないでしょうか。
maisumakun

2020/01/28 06:32

サーバはどのように用意されましたか? アドレスが「http://127.0.0.1:5500」となっているように、単なるファイルアクセスではなく、ローカルにあるサーバ経由の通信となっています。
Lomaebe18

2020/01/28 07:42

ditさんの指摘通り、変更したところ、 CSSを反映することができました。 maisumakunさん、申し訳ございません。初歩的な質問になってしまうのですが、ローカルにあるサーバとはどういうことですか? 申し訳ございませんが、解答の方よろしくお願いします。
maisumakun

2020/01/28 07:43

単にエクスプローラからHTMLファイルをダブルクリックして開いた場合、表示は正常でしょうか?
m.ts10806

2020/01/28 07:55

>ローカルにあるサーバ 今回だとIDEが持つリアルタイムプレビュー用のツール内の仕組みがそれに該当しそうに思います。
Lomaebe18

2020/01/28 08:03

maisumakunさん、エクスプローラから開いても、問題なく、表示されます。 m.ts10806さんありがとうございます。
dit.

2020/01/28 23:29

自己解決で構いませんので、質問を解決済みにしてください。
guest

回答2

0

自己解決

返信の方してくださった3人の方、無知な私に、分かりやすく説明の方して頂き、ありがとうございました。
解決方法の方,下記に記載します。href以降の部分が間違っていました。```

<link rel="stylesheet" type="text/css" href="../css/style/css"> コード ```

投稿2020/01/29 06:53

Lomaebe18

総合スコア5

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

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

0

答えてくださった3人の方、本当ありがとうございました。
無事解決の方できました。
無知な私のために、細かく分かりやすく説明の方してもらいありがとうございました。

コード

投稿2020/01/29 06:48

Lomaebe18

総合スコア5

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問