Q&A
リンク先のファイルは見れないですな。
ソースは質問文に貼ったら良いと思います。 ( ``` ... ``` で囲って )
前提・実現したいこと
CSSファイルが読み込まないです。
理由がまったくわかりません。
htmlとcssファイルは同じフォルダーに入れています。
使っているエディターはATOMです。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
HTML
1<!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>ISARA</title> 5 <link rel = "stylesheet" href = "isara.stylesheet.css"> 6 </head> 7 <body> 8 <header> 9 <div> 10 <p class= "aa">バンコクのノマドエンジニア育成講座</p> 11 <p class= "header-logo"><img src = "C:\Users\Uき\Desktop\coding-practice\ISARA.img\isaralogo.png" alt = "header-logo" title = "header-logo"></p> 12 </div> 13 </header> 14 </body>
CSS
1.kk{ 2 background-color: red; 3} 4.aa{ 5 color: red; 6} 7 8.header-logo{ 9 background-color: blue; 10 11}
試したこと
フォルダーの移動。
hrefの後のファイル名をプロパティに記載されてるオブジェクト名にしてみたりしました。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
ソースコードはちゃんと書きましょう。
実際のコードと各ファイルの配置、階層がわかる情報を外部サイトではなく質問本文に提示してください（画像添付もできます）
念のためブラウザ開発ツールのコンソールにそのcssファイルの404エラーが出ていないか確認してください
> ( ``` ... ``` で囲って )
って書いたのに・・。
```HTML
HTMLのソースコード
```
```CSS
CSSのソースコード
```
コードはマークダウンのcode機能を利用してご提示ください
https://teratail.com/help#about-markdown
開発ツールのコンソールに「Failed to load resource: net::ERR_FILE_NOT_FOUND」と出てました！
回答5件
0
少なくとも下記"とiの間に不可視文字が混入しています。
HTML
1<!-- ↓ ここに不可視文字が混入しています --> 2<link rel = "stylesheet" href = "isara.stylesheet.css">
後述のリンクは、とりあえず不可視文字を可視化するためにエンコードしてみた物です。"iは%22iにURLエンコードされますが、提示の物は%22%E2%80%AAiと%E2%80%AAが混入しています。
【エンコードマニアックス】
http://www.encodemaniax.com/?charset=utf-8&data=%22%E2%80%AAi
投稿2019/10/30 14:49
総合スコア69407
0
ベストアンサー
"isara.stylesheet.css"の先頭の引用符とiの間に、目に見えないユニコード文字が入っています。
このあたりを消して書き直しましょう。
投稿2019/10/30 14:42
総合スコア84555
ファイル名を"stylesheet"のみに変えてみましたが、変わりませんでした。
ファイル名を変えるようにアドバイスはしていませんが？
"の周辺を全部消して、コピペせず文字を打ち直してください。
打ち直してみましたが、変化ありませんでした。
コードの "i ← この部分にカーソルを合わせて、矢印キーでカーソル移動してみては。
なんか 1 個余分に矢印キーが必要になると思います。そこでその見えない文字の右側に移動したところで BackSpace。。
ファイル名周辺をすべて一度消して、ファイル名を"stylesheet"にしました。
CSSファイルに対する
Failed to load resource: net::ERR_FILE_NOT_FOUND
は、解消されましたか？
＞ chair さん
横からで すみませんが、、
手元で試した結果は、ファイル名 "stylesheet" に変えるのは(その名前のファイルが存在しても)、動作しないようですよ。
いったんもとのファイル名に戻して、もとの指摘の通りの対応（"の周辺を全部消して、コピペせず文字を打ち直して）をするのが良いかと・・。
やってみましたが、変化ありませんでした。
Failed to load resource: net::ERR_FILE_NOT_FOUNDは解消しておりません。
横からのままコメント続けて申し訳ないですが、、
PC上のファイルをダブルクリックで開く等しているのでしょうか。
もしそういう話であれば、
公開する予定の Web サーバに配置するか、
ローカルサーバを起動して確認してみると良いと思います。
ローカルサーバの起動は、 Atom でやるなら
atom-live-server というプラグインがあるようです。
> やってみましたが、変化ありませんでした。
その時のコードを、質問文に追記してください。
0
過去質問の私自身の回答のサルベージで申し訳ないですが、「CSS反映されない」「画像反映されない」の原因はほぼほぼ決まっているので、下記、ご確認ください。
single.phpにcssが反映されません
Bootstrapの描画がうまくいかない
stylesheetをhtmlに読み込ませたい
どれも同じような主旨の回答をしていることがわかるかと思います。
投稿2019/10/30 14:40
総合スコア80850
0
CSSファイルを一度削除して、ファイル名を変えて書き直したら読み込みました。
原因が何だったのか今だわかりませんが、解決致しました。
初歩的な問題に丁寧に回答して頂き、みなさんどうもありがとうございました！
投稿2019/10/31 13:37
総合スコア25
原因は目に見えない文字ですよ。
自己解決ではなく otn さんにベストアンサーつけてほしかった。。
あと、今後のためには、「原因が何だったかわからない」状態で終わらせず、
はじめから順に(もらった回答を)辿りなおしたほうが良いのではないかな、と思います・・。
おそらく、何かの画面でファイル名をコピペしたんでしょうね。その時に、見えない文字が紛れ込んだ。
「目に見えないユニコード文字」「不可視文字」という単語が分からないならスルーせず調べるか聞きましょう。
すいません！これから勉強していきます。
一応伝えておきますと、ベストアンサーは解除ができます。
otnさんにベストアンサーをつけさせて頂きました！
0
html
1<link rel = "stylesheet" href = "isara.stylesheet.css">
余分なスペースが入っているせい？
・・・かと、思ったけどこれは関係なくて、
otn さんのコメントにある「 "isara.stylesheet.css" の " と i の間にある文字」が原因のようでした。
いちおう、確認につかった HTML 貼っておきます。
これも関係なかったみたいですが、確認の過程で Chrome で MIMEタイプ指定しろと警告が出たので
<link> タグに type="text/css" をつけてあります。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ISARA</title> <link rel="stylesheet" type="text/css" href="isara.stylesheet.css"> </head> <body> <header> <div> <p class="aa">バンコクのノマドエンジニア育成講座</p> <p class="header-logo"><img src="isaralogo.png" alt="header-logo" title="header-logo"></p> </div> </header> </body>
投稿2019/10/30 14:34
編集2019/10/30 15:05総合スコア484
たしか半角スペース自体は問題ないと思います。
いえ、そこは影響はありません。
確かに違和感はありますし、問題の切り分けを難しくする紛らわしい記述ではありますけど
試してみたら解決しなかったので、確認中して編集します・・・。テキトウ書いてすみません
コードの可読性の指摘という観点では「あり」と思いますよ。
私も属性と属性値が離れていたらコードレビューでは指摘します。（指定として影響あるなしは関係ないです）
学習サイトprogateで学んだ時にスペースがあったのでマネしてみました。
通常はスペースは必要ないみたいですね。参考になりました！
×必要ない
○可読性の観点から書かない方が良い
あなたの回答
tips
プレビュー
