CSSファイルの内容がブラウザに反映されない

前提・実現したいこと

ブラウザはchrome.
OSはmacOS Mojave バージョン10.14.6
下のhtmlファイルとcssファイルは同じディレクトリにあります.

https://udemy.benesse.co.jp/development/web/css-float.html
このページの「CSSプロパティを書いてみよう」のサンプルコードを実際に確かめたいです.

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

htmlファイルをブラウザにドロップしてもCSSファイルの内容が反映されず真っ白です。

該当のソースコード

HTML5
1<!-- ファイル名: sample2.html -->
2
3<!DOCTYPE html>
4
5<html>
6
7  <head>
8    <!-- 省略 -->
9    <link rel="stylesheet" href="style_sample2.css">
10  </head>
11
12  <body>
13    <div class="yellow"></div>
14    <div class="green"></div>
15    <div class="pink"></div>
16  </body>
17
18</html>

CSS3
1/* ファイル名: style_sample2.css */
2
3.yellow{
4 background-color: yellow;
5 width: 200px;
6 height: 250px;
7}
8.green{
9 background-color: green;
10 width: 150px;
11 height: 100px;
12}
13.pink{
14 background-color: pink;
15 width: 500px;
16 height: 80px;
17}
18

試したこと

ここに問題に対して試したことを記載してください。

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

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

yoshinavi

2019/08/14 10:23

パス位置は合っていますか？デベロッパーツールであれば適用先が分かるはずです。

退会済みユーザー

2019/08/14 10:24

パス位置は合っています。

行動規範の内容に同意します

回答4件

cssを読み取ってるか確認するために、Ctrl+uでソースを検証し、『style_sample2.css』をクリックしてみてください。
cssが表示されていたらちゃんと読み取っています。

ぼくは、ドリームウィーバーで実装しましたが、ちゃんと表示されていました。

投稿2019/08/14 10:51

tahara777

総合スコア6

投稿2019/08/14 10:49

tahara777

総合スコア6

ベストアンサー

上記のコードのままchromeのデベロッパーツールでdivを見ると、画像のようになっていました。
プロパティ名の前に、コードでは書かれていないAの出来損ないみたいな文字がありました。

エディタのエンコードUTF-8と異なっているからだと思い、こちらのサイトで確認してみました。
https://uic.jp/encode-detector/

結果は西ヨーロッパ言語らしいです。コピペ元がUdemyなので、それも関係あるのかなとか思いました。
知りませんが。

色々可能性を指摘してくださったり協力してくださった方、ありがとうございました。

投稿2019/08/14 10:39

退会済みユーザー

総合スコア0

cssのファイル名間違ってるとか。

投稿2019/08/14 07:13

gentaro

総合スコア8949

退会済みユーザー

2019/08/14 07:20

僕もそう思って念入りに確認しましたが、合ってるんですよね...

gentaro

2019/08/14 07:23

ほう。 htmlとcssをそのままコピペしてファイル作ってみましたが、ちゃんと表示されてますね。 >  の部分でとんでもなく余計なことをやってたり、chromeに変な機能拡張が入ってたり、そういう事はないんでしょうか。

Kuromame52

2019/08/14 07:25

スーパーリロードをしてみてもCSSが適用されないですか？ https://okuden-labo.com/home/browser-cache

退会済みユーザー

2019/08/14 07:29

の部分はここに書き込むために元のを何か省略したわけではなくて、元からこういう風に書いてます。なんででしょうね、、chromeの拡張にAdblock plusとGoogleオフラインドキュメントが入ってたのでオフにしてからやり直してみましたが、結果は変わらずでした。

gentaro

2019/08/14 07:31

別ブラウザだとどうなんですかね？

退会済みユーザー

2019/08/14 07:34

>> Kuromame52さんスーパーリロードしてもダメでした。あと、右クリックのは、なぜかそもそも右クリックができないです。。

退会済みユーザー

2019/08/14 07:35

>> gentaroさん safariでもやってみましたが、chromeと同様にダメでした。

gentaro

2019/08/14 07:38

macですか？windowsなら拡張子がちゃんと表示されてないとかいうオチはありえますけど。

退会済みユーザー

2019/08/14 07:42

>> gentaroさん書き忘れていました、すいません。macです。

gentaro

2019/08/14 07:46

そうなるとコードのコピペで再現しない以上、もっと詳しい情報が必要になりますね。やった作業を１から順にもれなく書くとか、全然別のファイルを作成してやり直してみてどうか、とか。

退会済みユーザー

2019/08/14 07:57

>> gentaroさん最初はatomにコピペしたから気づかなかったのですが、xcodeにコピペしたら〜線で「Unknown property: ' background-color'css(unknownProperties)」というエラーが出ました。おそらくコピペ元と文字コードが違ったのが原因なのかなと思っております。

退会済みユーザー

2019/08/14 08:05

>> gentaroさんやっぱでも完璧にhtml,cssを打ち直してもブラウザには真っ白の画面しか映らないですね。

gentaro

2019/08/14 08:07

ファイルのエンコードはどうなってるんでしょう？

退会済みユーザー

2019/08/14 08:13

>> エンコードはUTF-8ですが、文字化けは起きてないので関係ないかなと思っています。デベロッパーツールを見ると、全てのクラスのdivの要素の大きさが200x0とか150x0になってたので heightも書き足しました。言われてみればheightがないとそりゃ表示されないよなという気になったのですが、逆になぜ上記のサイトではheightなしで表示されたのかが疑問になってきました。とりあえず自己解決にしておきます。お付き合いいただいて、ありがとうございました。

gentaro

2019/08/14 08:15

？？ heightはcssで設定されるんでは。（最初からそうなってた）まぁ自己解決したなら良かったです。

退会済みユーザー

2019/08/14 08:24

気のせいでした、ややこしくてすいません。やはり上記サイトからコピペしたままだと表示されませんね。手打ちすれば大丈夫ですが。解決してなかったです。