hrefやsrcに「%E2%80%8E」が付く原因と解決策

PHPの練習をかねてポートフォリオ用のWebサイトを作成していたら、どうにもこうにもJavascript、CSS、画像の読み込みがうまくいきませんでした。

その時に調べた結果をまとめたいと思います。

比較的どうでもいいことも含めて書いているので、解決を急ぐ方は適宜飛ばしてください。

Contents

症状

Macで作業しています。エディターはVisual Studio Codeを使用しています。

Chromeでは全く読み込んでおらず、特にエラーも出ていませんでした。

一部は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」はホワイトスペースという見えないスペースのようです。LEFT-TO-RIGHT MARK、ゼロ幅スペースとも言われるようです。

コピペした際に気づかず連れてきてしまうようです。

検索で見つけた解決方法をもとに、リンクの文字列を１度消して、再度手打ちで書き直したところ見事文字化けをなくすことに成功しました。

リンクによっては矢印キーで1文字ずつ文字を送っていくと、空打ちのようになり、確かにそこに何かあると気づけるものもありました。
しかしなにも痕跡がないものがほとんどでした。

いちいち対応するの面倒だなと思い予防方法がないか調べてみるも、頭が悪くて予防方法が浮かびません。

お金も仕事もないのでVisual Studio Codeで作業するようになり、今回はじめて目にすることになりました。

今までDreamweaverで作業しているときに「%E2%80%8E」という文字化けに出会ったことがなく、Dreamweaverはペースト時に勝手に消してくれているのかなと思いました。コピペは乱用していましたし。

Visual Studio Codeの設定で特定のコードを打ち消す方法はないかと考えてみました。

・・・あるのかもしれませんが見つけられませんでした。
Terapadにはあるとかないとか。

MacのChromeとSafariの場合コピー時に属性もコピーする機能についても疑ってみましたが、ゼロ幅スペースは属性ではないよな。

ググるとたくさん事象がでてくるし、一度は通る道なのかもしれませんね。
原因がわかれば予防しなくてもすぐ解決できますし。