cssが適用されない

現在FlexBox学習中の初学者です。

HTMLにcssが適用されません。
どなたかお力添えしていただけると嬉しく思います。

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5	<meta charset="utf-8">
6	<link rel="stylesheet" href="div#div10.css" media="screen and (max-width: 900px)">
7</head>>
8<body>
9
10<div id="container">
11	<div id="div1">1</div>
12	<div id="div2">2</div>
13	<div id="div3">3</div>
14	<div id="div4">4</div>
15	<div id="div5">5</div>
16	<div id="div6">6</div>
17	<div id="div7">7</div>
18	<div id="div8">8</div>
19	<div id="div9">9</div>
20	<div id="div10">10</div>
21</div>
22</body>
23</html>

css
1#div1{
2	background-color:rgba(255,0,0,0.9);
3}
4#div2{
5	background-color:rgba(255,0,10,0.9);
6}
7#div3{
8	background-color:rgba(255,0,20,0.9);
9}
10#div4{
11	background-color:rgba(255,0,30,0.9);
12}
13#div5{
14	background-color:rgba(255,0,40,0.9);
15}
16#div6{
17	background-color:rgba(255,0,50,0.9);
18}
19#div7{
20	background-color:rgba(255,0,60,0.9);
21}
22#div8{
23	background-color:rgba(255,0,70,0.9);
24}
25#div9{
26	background-color:rgba(255,0,80,0.9);
27}
28#div10{
29	background-color:rgba(255,0,90,0.9);
30}
31#div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9,#div10{
32	width: 100px;
33	height: 100px;
34	font-size: 400px;
35}
36#container {
37	width: 98px;
38	height: 400px;
39	background-color: papayawhip;
40	display: flex;
41	flex-direction: 
42}

m.ts10806

2020/10/18 23:28

＞div#div10.css こういうファイル名なのでしょうか？

Kei-Kei

2020/10/19 00:44

その通りです。説明が少なくてすみませんでした！

m.ts10806

2020/10/19 00:45

念のため、ファイル構成、構造も提示してください。

Kei-Kei

2020/10/19 01:01

m.ts10806さん、どうもありがとうございます。大変申し訳ありません、Daregadaさんのアドバイスにより今回は解決に至ることができました。お時間を割いてくださり、本当にありがとうございました。心よりお礼申し上げます。もしよろしければ、今後もよろしくお願い致します。

m.ts10806

2020/10/19 01:03

あまりファイル名が良いとは言えないので、そのあたりもご検討ください。

Kei-Kei

2020/10/19 01:13

今回はとりあえず”div10.css”というファイル名に変えると正常に表示させることが出来ました。今後はもっと分かりやすいものにしようと思います。アドバイスどうもありがとうございます！

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

回答1件

ベストアンサー

ええと、いくつかの原因が重なっています。

CSSファイルを指定するlink要素のhref属性の値(URL)にdiv#div10.cssと書いてありますね。**URL中の#には特別な意味(URI参照のための区切り文字)**がありますので、ファイル名に直接#は書けません。
もし、読みたいCSSのファイル名が「div#div10.css」なら、パーセントエンコードして「div%23div10.css」と書く必要がありますし、ファイル名が「div10.css」なのであれば、「div#」をここに書いてはいけません。

CSSファイルにmedia属性でメディアクエリscreen and (max-width: 900px)が指定されていますから、メディアタイプがコンピュータースクリーンでなかったり、900ピクセルを超える幅のコンピュータースクリーンだったりすると、スタイルシートが適用されません。

ほかにも、head要素に必須のtitle要素が書いてないとか、head要素の終了タグの後に > が余分についているとか、CSSの末尾付近のflex-directionプロパティの値が書いてない、といった点が間違っています。

投稿2020/10/18 23:37