Q&A
>【アウトプット１日目】
teratailはあなたのブログではないので質問要件ではない文言はノイズになります。
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
前提・実現したいこと
ATOMを利用して初めてHTMLの入力をしています。
HTMLの基本を勉強したので試しに入力をしてみたのですが・・
発生している問題・エラーメッセージ
CSSが反映されません。
HTMLと同じフォルダにCSSのファイルを入れています。
アウトプットのつもりが、いきなり原因がわかりません。
該当のソースコード
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>我が家</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <header></header> <h1>我が家</h1> <h2>家族紹介</h2> <div class="member"> <ul> <li class="family">父</li> <li class="family">母</li> <li class="family">私</li> </ul> </div> </body> </html>試したこと
<link rel="stylesheet" href="stylesheet.css"> ここが違うのかと思い、別の階層にCSSを保存したり全角確認もしてみましたが、どうしてCSSが反映されないのか全くわかりません。補足情報（FW/ツールのバージョンなど）
CSSのコードです↓↓
h1{
height: 50px;
color: red;
h2{
font-size:20px;
}
回答2件
0
CSS
1h1{ 2height: 50px; 3color: red; 4}/* ← 閉じていない */ 5h2{ 6font-size:20px; 7}
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool
【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/
投稿2021/08/25 16:33
総合スコア69583
0
ベストアンサー
これを試してみてください。
html
1<link rel="stylesheet" href="./style.css">
また、そもそも読み込まれてるかですが、ChromeのDeveloperToolsで確認してみてください(Consoleから)
GET style.css net::ERR_FILE_NOT_FOUND
これがでたら読み込まれていません
index.html:6
これはhtmlの構文などを確認してみてください。
また余談ですが、cssはcssのフォルダを作ることを勧めます！
投稿2021/08/25 16:30
総合スコア295
あなたの回答
tips
プレビュー
