PHPの練習をかねてポートフォリオ用のWebサイトを作成していたら、どうにもこうにもJavascript、CSS、画像の読み込みがうまくいきませんでした。
その時に調べた結果をまとめたいと思います。
比較的どうでもいいことも含めて書いているので、解決を急ぐ方は適宜飛ばしてください。
症状
Macで作業しています。エディターはVisual Studio Codeを使用しています。
Chrome
Chromeでは全く読み込んでおらず、特にエラーも出ていませんでした。
Firefox
一部はFirefoxでは読みこまれているような気もしましたが下記のエラーがものすごいでていました。
(Unknown pseudo-class or pseudo-element ‘-ms-thumb’. Ruleset ignored due to bad selector.
Error in parsing value for ‘display’. Declaration dropped)
正直意味はよくわかりませんでした。
※文字化け以外にもいろいろやらかしていたので、文字化けが原因のエラーかも微妙です。
エラーの最後の方に下記エラーもありました。
https://programmer-life.work%3C/sample/css/bootstrap.min.css was loaded as CSS even though its MIME type, “text/html”, is not “text/css”.
text/htmlと書かれており、CSSをtext/htmlと思われているような気がしました。
このときは「%3C」という文字化けがでており、ググってみましたが特に何もわかりませんでした。
解決しないけど試したこと
文字化けなのでエンコードを確認する
一応文字化けと言えばということでcharsetを確認すると <meta charset="UTF-8"> ときちんと書かれていました。
PHPだからなにか違うのかとも思い試して見ましたが、直接は関係ありませんでした。
相対パスから絶対パスに変える
相対パスだからなにか間違ってるのかな、と絶対パスに変えてみました。
確かにあるはずなのにどれも読み込まれていませんでした。
そして文字化けも消えません。
解決方法
文字化け問題ではないけど読み込むようになったこと
自分のミスを修正する
ほとんど記述ミスでした、小文字で書くところが大文字だったり、タグが「<<link rel>」のようになってたりだとかでした。
文字化けの原因と解決方法
余計な問題がなくなり文字化けのエラーに専念できるようになりました。
そこでChromeのデベロッパーツールの「sources」をみていると文字化けの文字「%E2%80%8E」をいくつか発見して検索してみました。
%E2%80%8Eの原因
検索してみると「%E2%80%8E」はホワイトスペースという見えないスペースのようです。LEFT-TO-RIGHT MARK、ゼロ幅スペースとも言われるようです。
コピペした際に気づかず連れてきてしまうようです。
%E2%80%8Eの解決方法
検索で見つけた解決方法をもとに、リンクの文字列を１度消して、再度手打ちで書き直したところ見事文字化けをなくすことに成功しました。
リンクによっては矢印キーで1文字ずつ文字を送っていくと、空打ちのようになり、確かにそこに何かあると気づけるものもありました。
しかしなにも痕跡がないものがほとんどでした。
参考サイト：aタグのhrefのリンク先に%E2%80%8Eが付く理由と対処法
予防できないものかと悩む
いちいち対応するの面倒だなと思い予防方法がないか調べてみるも、頭が悪くて予防方法が浮かびません。
Visual Studio CodeやMacへの疑念(濡れ衣)
お金も仕事もないのでVisual Studio Codeで作業するようになり、今回はじめて目にすることになりました。
今までDreamweaverで作業しているときに「%E2%80%8E」という文字化けに出会ったことがなく、Dreamweaverはペースト時に勝手に消してくれているのかなと思いました。コピペは乱用していましたし。
Visual Studio Codeの設定で特定のコードを打ち消す方法はないかと考えてみました。
・・・あるのかもしれませんが見つけられませんでした。
Terapadにはあるとかないとか。
MacのChromeとSafariの場合コピー時に属性もコピーする機能についても疑ってみましたが、ゼロ幅スペースは属性ではないよな。
ググるとたくさん事象がでてくるし、一度は通る道なのかもしれませんね。
原因がわかれば予防しなくてもすぐ解決できますし。
