HTMLにCSSを反映できません。

html
1（d2 index.html)
2<!DOCTYPE html>
3<html　lang="ja">
4<head>
5	<meta charset="utf-8">
6	<title>dotinstallpaneを使ってみよう</title>
7	<link rel="icon" href="favicon.ico">
8
9	<link rel="stylesheet" href="dcss/d2styles.css">
10</head>
11<body>
12<header>
13	<h1>DotinstallPane</h1>
14	<p>ドットインストールを見ながら<br>
15	コーデイングができるアトムパッケージ。
16	</p>
17	<a href="#" target="_blank">詳細を見る</a>
18</header>
19</body>
20</html>

css
1(d2styles.css)
2body{
3	font-size:16px;
4	font-family:Verdana,sans-serif;
5	color:#333;
6}
7
8header{
9	color:#fff;
10	background:url(../dimg/bg.png);
11	background-size:cover;
12}

制作中のhtml にcssを反映できないので質問させて頂きます。

制作中のhtmlにcssのリンクを張り、以下のcssの通り、文字の形とヘッダーの背景をかえたいのですが、変えられません、、、。

google chromeの検証ツールで見てみたら、htmlとcssがリンクしていないようで、
どこに問題がありそうなのかわからなくなってしまいました。

＊d2 index.html と、d2 styles.cssはそれぞれ別フォルダの中で保存しています。
（cssファイルは上記の通り、d cssのファイルに保存しています。）

宜しくお願いいたします。

m.ts10806

2019/08/16 08:54

コード部分はマークダウンのcode機能を利用してご提示ください。 https://teratail.com/help#about-markdown ※ファイルが違うのであれば別ブロックとしてください。また、HTMLとCSSの位置関係が分かるようなフォルダ構成もご提示ください

m.ts10806

2019/08/16 08:55

> d css/d2 styles.css これだとフォルダにもファイル名にも空白が入っていますが、これでは正しく認識されないような。

azuapricot

2019/08/16 08:55

m.ts10806

2019/08/16 08:59

本当に半角空白入ってるなら d%20css/d2%20styles.css と「%20」に置き換えればもしかしたら。でもスペースがないに越したことはないです。

yu_ike

2019/08/16 09:57

お返事ありがとうございます！コードは専用の載せる箇所があるのですね。申し訳ございません。フォルダ構成についてですが、自身のドキュメント内にて、DotinstallPaneフォルダの中のd2 index.htmlファイル、dcssファイルの中のd2styles.cssファイルとしています。アドバイスを頂いた通り、cssのフォルダとファイルについて、空白をなくしてみましたが反映はできませんでした。

yu_ike

2019/08/16 09:58

訂正：dcssフォルダの中のd2styles.css

yoshinavi

2019/08/16 10:54

各ファイルの位置が分かるもの（図やテキスト等）を提示されると、良いかと思います。

yasutomi

2019/08/17 04:37

コード部分はマークダウンのcode機能を利用してご提示ください。 https://teratail.com/help#about-markdown

m.ts10806

2019/08/17 06:31 編集

>コードは専用の載せる箇所があるのですね。いえ。「マークダウン」という機能を利用してそう表示します。他の質問や回答に出ているコード部分を見てどのような表示になるか確認しておいてください。なお、質問は編集できますので適宜ご対応ください。こちらのコメント欄はデフォルト非表示ですのでいくらこちらに書かれても目には付きにくいです。

bochan2

2019/08/17 11:50

コードのマークダウンはこのようにすれば出来ますよ。 ```d2 index.html <!DOCTYPE html> <html　lang="ja"> <head> <meta charset="utf-8"> <title>dotinstallpaneを使ってみよう</title> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="d css/d2 styles.css"> </head> <body> <header> <h1>DotinstallPane</h1> <p>ドットインストールを見ながら<br> コーデイングができるアトムパッケージ。 </p> <a href="#" target="_blank">詳細を見る</a> </header> </body> </html> ``` ```d2 styles.css body{ font-size:16px; font-family:Verdana,sans-serif; color:#333; } header{ color:#fff; background:url(../dimg/bg.png); background-size:cover; } ```

yu_ike

2019/08/18 06:16

遅くなりましたが解決致しました。反映できなかった原団は、ご指摘頂いた通りフォルダ・ファイルの位置の問題でした。下記を実施したところ、ページを表示させる事が出来ました。・d2index.htmlファイルとdcssフォルダ（中にd2styles.cssが入っている）を一つの同じフォルダ（DotinstallPane)の中に入れる.。・dimgフォルダも上記フォルダ（dotinstallPane)の中に入れる。皆さん色々なアドバイスありがとうございました。初めての利用でしたが、今後もよろしくお願い致します。

yasutomi

2019/08/18 06:20

今後質問する際はヘルプなどをよく読んでからにしていただきたいです。質問をした後に自己解決してしまった https://teratail.com/help#resolve-myself

m.ts10806

2019/08/18 07:45

bochan2さんそれはだめでしょ。 >```d2 index.html ファイル名ではなく言語名を入れるのが正しい使い方です。質問者に嘘を教えないでください。

m.ts10806

2019/08/18 07:48 編集

質問者さんコードブロックの機能はコードの見た目ももちろんですが回答者がワンクリックでコピペするためのものでもあるので、実際にコードにないものは含まないほうが良いです。回答者は書いてあるものが全てなので、それが実際にコードに含まれているかどうか知るすべはありません。ファイル名などは外に出してもらえればと(次からで結構です)

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

回答1件

自己解決

遅くなりましたが解決致しました。
反映できなかった原因は、ご指摘頂いた通りフォルダ・ファイルの位置の問題でした。
下記を実施したところ、ページを表示させる事が出来ました。
・d2index.htmlファイルとdcssフォルダ（中にd2styles.cssが入っている）を一つの同じフォルダ（DotinstallPane)の中に入れる.。
・dimgフォルダも上記フォルダ（dotinstallPane)の中に入れる。

皆さん色々なアドバイスありがとうございました。
いたらない点が多々あり、申し訳ございません。
初めての利用でしたが、今後もよろしくお願い致します。

投稿2019/08/18 06:43

編集2019/08/18 06:46

yu_ike

総合スコア2