Q&A
ブラウザコンソールにエラーや警告は出ていませんか？
CSSが反応されず理由が知りたいです。途中までしかまだ作っていないのですがお願いします。
こちらがindex.htmlのファイルです。
こちらはstylesheet.cssのファイルです
body{
font-family:"Avenir Next";
}
li{
list-style: none;
}
.header{
background-color:#808080;
color:#fff;
height:120px;
}
過去質問に頻出で解決方法も出尽くしています。調べてください
回答1件
0
まだ検証していませんが、下記でしたっけ？？
HTML
1 2<link rel="stylesheet" type="text/css" href="stylesheet.css">
投稿2020/04/30 06:48
退会済みユーザー
総合スコア0
こちらの記事が参考になると思います。
https://teratail.com/questions/255311
まず、サンプルの検証ということであれば、下記でもよろしいかと思います。
<style type="text/css">
//CSSの記述
</style>
確認したところ・・。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三菱の基本情報</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<header>
<div class="header-logo">三菱商事</div>
<div class="header-list">
<ul>
<li>会社情報</li>
<li>事業紹介</li>
<li>サステナビィティ・CSR</li>
</ul>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>世界と一人のために</h1>
<h1>"つぎ"を創る力</h1>
<p>三菱商事は世界に住むすべての人のため未来に繋がる仕事を</p>
</div>
</div>
<div class="lesson-wrapper">
</div>
<div class="message-wrapper">
</div>
<footer>
</footer>
</body>
</html>
css
body{
font-family:"Avenir Next";
background-color:#CCCCCC;
}
li{
.list-style: none;
}
header{
background-color:#808080;
color:#fff;
height:120px;
}
で動作しました。
というか、背景色が変わるかしか確認していません・・（CSSの内容まではよくみていません）。
回答ありがとうございます。こちらで確認したのですが背景色は依然変わらないままです。同一のフォルダーに、index.htmlというファイルとstylesheet.cssというファイルを作っているのですがやはり、CSSが反応しません。
こちらでは動作しました。
cssで、bodyとheaderの背景色で確認しました。
headerは.がある（クラス名がない）ので背景色が変わらないのかと・・。
body{
background-color:#CCCCCC;
},
header{
background-color:#808080;
}
のみでどうでしょうか・・。
あとはそれぞれutf-8で保存しているかどうか（Cssないに日本語がないのでいいような気も）・・。
あなたの回答
tips
プレビュー
