【文字コード変換ツール】:before :afterの擬似要素などでの日本語の文字化け対策:原因・対処(回避)方法

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

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

ですが最近新たに立ち上げたサイトで:before :afterを多用してテストをしていたところ、結構な頻度で上の画像のような文字化けがでてきたので、これはほっとけないなぁ。
ということで、文字化け対策用『Unicode変換ツール』を作りました。

Unicode変換ツール

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

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

変換後(Unicode)


この『: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";
}

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

まとめ

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

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

Google AdS



関連記事

お名前.com から脱出する!:ドメインの移管方法


『お名前.com』でドメイン取得してからは、『Whois情報公開代行』の件(詳細はこちら)で大変な思いをしたのですが、そ…

記事を読む▷


onMouseOver、onMouseOutで、簡単に画像を切り替える


今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…

記事を読む▷


公開日を最終更新日にする!サムネイル

検索結果に最終更新日を表示させてクリック率をアップする方法!新規投稿時には公開日を表示させる!


以前は検索結果で1ページ目上位3番目以内に半年以上表示されていた記事が、いきなり圏外となってしまいました。Googleの…

記事を読む▷


これは便利!!WordPressの投稿内に、管理者やログインユーザーにしか見れないメモを残す方法


よく投稿を途中まで作って、なかなか仕上げれずに長い期間あいてしまうと『これなんのサイト参考にしてたんやっけ?』とか『え〜…

記事を読む▷


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


前回書いた『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その1の続きです! 今…

記事を読む▷


Message

メールアドレスが公開されることはありません。

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

PAGE TOP