web関連

疑似クラス「::before」「::after」の文字化け対処について

疑似クラス「::before」「::after」の文字化け対処について

先日、下のコードを入れたら文字化けした

#header .logo:after{
	content: "○○地域の××専門店「△△」";
}

ロゴの下に、contentプロパティで地域情報を入れようとしたら文字化けしたので調べてみた。

文字化けする原因

  • CSSが外部ファイルである
  • CSSの文字コードがShift-JISでない

直し方

WordPressを運用しているうえで外部styleシートなのは当たり前なので、「日本語」を
バックスラッシュを用いたUnicode(UTF-16やUTF-32)に変換します。

#header .logo:after{
	content: "25cb25cb573057df306e02715027155c0295805e97300c25b325b3300d";
}

他には外部スタイルシートの文字コードをUCS-2にすることでも文字化けを回避できるらしいけど試してはいない
手間を考えたとき、文字を変換する方が手っ取り早いかな

とりあえず疑似クラス「::before」「::after」を使って日本語文字を入れるときは変換した方がいい

参考

いろいろ見てみたけど、↓が個人的によかった。
「×」の変換が上手くいかないところが多くてくっそイライラした。

▼参考サイト
http://www.kwonline.org/u_esc_seq.php
「u」の形で変換されるので入れるときは「」にして入れてね。

そもそもPCは1バイトしか利用ができず、2バイト(全角)もある日本語は理解できないらしい(半角は理解できるらしい)
だから一度符号化(エンコード)をする必要があるとのこと
文字コードとかあまり気にしていなかったがどこかで勉強しないと駄目だわ、もやもやする