Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
前提・実現したいこと
htmlにcssを読み込ませることができず、自分では原因が全くわかりません。超初心者で、最初の部分でつまづいています。お恥ずかしいですが、ご教示いただけたら幸いです。
発生している問題・エラーメッセージ
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="style1.css"> 7</head> 8<body> 9<header> 10 <div class="logo"> 11 <p>ネコ</p> 12 </div> 13</header> 14</body> 15</html>
css
1body{ 2background-color:rgb(11, 190, 241); 3font-size:50px; 4} 5
試したこと
新しく別のファイルを作成して試してみましたがやはり読み込まれませんでした。
補足情報（FW/ツールのバージョンなど）
]
cssのファイル名はstyle1.cssです。
ファイルの場所は、ＡＴＯＭ．ＨＴＭＬのフォルダ内のＣＳＳのフォルダ内にstyle1.cssファイルとindex1.html（←上記に記載したコードが書いてあるファイル）ファイルが入っています。ＡＴＯＭを使用しています。
【追記】
大変申し訳ありません、質問方法も勉強します。とりいぞぎご教示いただいたようにcssをbodyにして構文チェック？もしましたが、追加した３つ目の画像のようになりました。htmlは構文チェックで問題なしでした。どこが問題かわかりますでしょうか。
回答3件
0
.pは、<何かしらのタグ class="p">に適用されるものですが、HTML側にそのようなエレメントが存在しません。
投稿2020/05/19 10:02
総合スコア146018
0
.(ドット)はクラス属性に対して付けるものなので、この場合、
cssファイルの「.p」の部分を、「p」にするか「.logo」にする必要があります。
※p要素は通常、複数のHTMLファイルにて複数箇所登場するものなので、「.logo」にする方が適切と考えます。
投稿2020/05/19 10:33
総合スコア43
0
ベストアンサー
表現だけだとは思いますが「読み込まれているかどうか」だとファイルの問題なのでブラウザの開発ツールから確認できます。
「反映されているかどうか」であれば、定義（CSS)と参照（HTML）の整合性がとれているかどうかを確認します。
「読み込まれている」なら構文が間違っているか整合性がとれてないかが殆どです。
構文チェックサービスなども利用してください。
あと「間違いなく存在する要素に対する目に見て明らかな指定」をするのも問題切り分けになります。bodyに対するbackground-colorとかfont-sizeとかですね。
「整合性が取れているかどうか」は既にある回答の通りですが、
セレクタの考え方は必ず身に付けてください。
追記：
ちなみに、提示されたHTML、CSSのコードですが、
「style1.css」をHTMLファイルと同じ階層に置き、ブラウザで確認すると下記のようになります。
コードは間違っていません。
投稿2020/05/19 10:14
編集2020/05/19 13:49総合スコア80875
まだまだ勉強不足で、質問の仕方のわかっておらず申し訳ございません。とりいぞぎご教示いただいたようにcssをbodyにして構文チェック？もしましたが、追加した３つ目の画像のようになりました。htmlは構文チェックで問題なしでした。どこが問題かわかりますでしょうか。
コードは画像で提示されてもこちらで動作確認できませんので、
テキストで、マークダウンにてご提示ください。（「質問への追記修正依頼」に提示したリンクにマークダウンのcode機能について色々なアドバイスがついています）
あと、HTMLとCSSの位置関係はどうなってますか？
同じ階層ですか？
ブラウザのデベロッパツールのConsoleでエラー出ていませんか？
たびたび申し訳ございません。書き換えましたので、お時間あるときにご確認いただきアドバイスいただけたら幸いです。
階層は同じにしたつもりです。同じフォルダーにｈｔｍｌもｃｓｓもそのまま入っています。
chromeの検証でみてみるとconsoleは何も書かれていませんでした。でも画面が背景色のみが反映されていました。でも文字が出ていません。とんちんかんな事を言っていたらすみません。
確認結果を追記しました。
font-sizeを200とかにしたらちゃんと反映されました。
画像までありがとうございます！！！私のブラウザ画面の画像を追加しました。背景色が反映されているのでｃｓｓは読み込めているということでしょうか。font-sizeを５００pxにしても文字がどうしてもでないのですが、検証画面ではネコが消えてしまっていることに気づきました。なぜ消えてしまうかわかりますでしょうか。
画面右側の<p></p>の中のネコという文字が消えてしまっているということです。
んーこちらでは再現しないので何とも言えません。
別のブラウザで確認するとか、キャッシュクリアしてみるとかでしょうか。
Consoleにエラーがないこと、背景色が反映されていること（あとCSSの構文エラーのないこと）から、HTML、CSS自体に問題があるわけではないと思います。
ありがとうございます。キャッシュクリアしてみましたが同じでした。でも検証画面で直接変更したら反映されました。いろいろ試してみます。ファイル自体に問題がないことがわかってやっと一歩前進できました。何日もここで止まっていたもので、こんな私に何度もお付き合いいただき感謝いたします。ありがとうございました。
あなたの回答
tips
プレビュー
