[カラーミーとか]疑似要素が文字化けしたときの対処法

知ってないとやばいかもしれない。

現象と原因

::beforeとか::afterの疑似要素を使う際、content:;で全角を記載したら文字化けを起こした。

カラーミーの文字コードは「euc-jp」になっている。

<meta http-equiv="content-type" content="text/html; charset=euc-jp" />

cssの先頭にも宣言するように指定がある。

@charset "euc-jp";

で、ローカルでhtmlを組む際はファイル自体に「UTF-8」を指定してある。設定がそうなってるからであって変更すればいいんだけども。

HTML(UTF-8)+CSS(euc-jp)でも、CSSが半角なら問題ない。でも全角は文字化けする。

それを回避できるかという話。

Unicodeで解決

特殊文字では「&」を「&」で書く、みたいな感じで全角文字も別のアプローチができる。

じゃあどれがどれだよっていうのは、一々調べてたらめんどいので変換ツールを使う。

VSCodeであればエンコード・デコードの拡張機能がある。

VSCode: エンコード・デコードしてくれる拡張機能

step-learn.com

ツールを入れたくない、入れられない場合はWEBに無料変換サービスがある。

Unicodeエスケープシーケンス変換｜コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited

Unicodeエスケープシーケンスの変換ツール。

tech-unlimited.com

変換するときの注意というか

変換したらこうなる場合と

こうなる場合がある。

違いは頭の「\u」と「\」で、WEB上で使えるのは「\」の方。
「\u」だったら置換とかで「u」を削除すること。