:before :afterなどの擬似要素で contentプロパティの日本語が文字化けする!原因と対処(回避)方法&文字コード変換ツールも!

だいぶ昔から:before :afterなどの擬似要素で、contentプロパティに日本語を入れて使用していたのですが、『文字化け』にあまり遭遇することがありませんでした。ですので1,2度見ても『たまたまかな?』と思って気にも留めてなかったんです。

:before :afterなどの擬似要素で contentプロパティの日本語が文字化けする!原因と対処(回避)方法

ですが最近新たに立ち上げたサイトで:before :afterを多用してテストをしていたところ、結構な頻度で上の画像のような文字化けがでてきた!ので、これはほっとけないなぁ。

というわけで対処することにしたので、今回はこの『:before :afterなどの擬似要素で、contentプロパティ内の日本語が文字化けする原因と解決方法』について書きたいと思います。

擬似要素の文字化けの原因と対処方法

では早速。

擬似要素の文字化けの原因

原因は

  • cssの文字コードが『Shift_JIS』ではなく『UTF-8』で作られている
  • そのcssが外部ファイルとして定義されている

この状況の時に起こるようです。

文字コード相違に起因する問題は、この先もどうしようもないんでしょうかねぇ。。

ま、そんなことを言ってもしょうがないので、文字化けの対処(回避)方法を。

擬似要素の文字化けの対処(回避)方法

cssに記載した:before :afterなどの擬似要素のcontentの日本語を、そのまま使うのではなく、Unicodeに変換して記載することで回避できます。

:before :afterなどの擬似要素で contentプロパティの日本語が文字化けする!回避方法:contentの中の記載方法

この画像では、アコーディオンの開閉ボタンに使用していたのですが、これを例にとると、

AccordionBox02 label:after {
  content: "カラー・サイズを見る";
}

このcontentプロパティに書いている日本語「カラー・サイズを見る」を、Unicodeに変換して、

AccordionBox02 label:after {
  content: "ABE9FCFBB5A4BA928B8B";
}

このように記載すれば、文字化けは回避できます。

Unicode変換ツール

このボックスに変換したい日本語を入力し、変換 ボタンを押すと、Unicodeに変換されます。

変換前の日本語(UTF-8)

変換後(Unicode)

まとめ

毎回文字化けが起こる訳ではないのですが、確実に『文字化けしない』わけではない!という状況は、やはりあまりよろしくないですよね。

ですので、擬似要素の:beforeや:afterのcontentプロパティで日本語を使用したい場合は、少々面倒ではありますが、変換してから記載して、いらぬ心配をしないで使っちゃってくださいね!

Google AdS



関連記事

『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その1


最近お問い合わせページにちょくちょく迷惑メールがくるようになりました。『Akismet Anti-Spam』も有効にした…

記事を読む▷


複数の横に並ぶブロック要素をセンタリングさせる!!


よく複数の画像をfloatで並べることありますよね?でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…

記事を読む▷


z-index が効かない時の対処方法


z-index が効かない時がちょくちょくあります。でも、仕事でそういう場合に遭遇すると、その場しのぎで対処法を見つけて…

記事を読む▷


サーバー移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)


現在使用しているサーバーが、ここ数ヶ月、アクセスできない状態が頻発するようになりました。 その度にこちらからサーバーへ…

記事を読む▷


onMouseOver、onMouseOutで、簡単にテキストを切り替える!


前回のonMouseOver,onMouseOutで簡単に画像を切り替える!の続き、応用編です。 実はこちらサイト…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP