beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法

CSSの擬似セレクタ :before と :after において、content プロパティに日本語を設定すると、表示時に文字化けが起こってしまう場合があります。大半のブラウザでは文字化けが起こらないのですが、マルチブラウザをサポートしなくてはいけないような場合に備え、予防線を張っておく必要があります。

文字化けする要因

• CSSを外部ファイル定義している場合に起こる
• CSSファイルの文字コードが Shift_JIS でない (UTF-8 等)

文字化け回避方法

直接日本語を書くと文字化けする場合がある

例えば下記のように直接contentプロパティに日本語で定義した場合、文字化けとなってしまう場合があります。

.test:after {
  content:"€ユーロ";
}

前述の通り、ブラウザ依存による文字化けなので、ブラウザに依存しない方法で記述してあげましょう。

日本語の文字化けを回避する定義方法

下記の通り、Unicode によって変換してあげれば、文字化けを回避することができます。

.test:after {
  content:"\20ac\30e6\30fc\30ed";
}

文字コード変換したスタイル設定を反映したサンプルをご覧ください。

Unicodeへの変換方法

では実際にcontentプロパティへ設定するUnicodeへの変換方法ですが、まずルールとして「\ + Unicode」とする必要があります。JavaScript の escape 関数の場合「\u + Unicode」となってしまうので、変換ツール等を作成する場合は注意が必要です。

また半角スペースも「%20」では処理できないため「\a0」として変換しなくてはいけません。

content 設定値の Unicode 変換ツール

Unicode への変換ツールを作ってみました。参考までにどうぞ。

変換ツールのソースは次のようになっています。jQuery を用いていますのでご注意を。

変換ツールのソースコード (HTML)

<input type="text" id="unicode_for_content1"  value="€ユーロ" />
<input type="button" id="chg_unicode_for_content" value="変換" />
→
<input type="text" id="unicode_for_content2" />

変換ツールのソースコード (JavaScript)

<script>
jQuery(function($) {
  $("#chg_unicode_for_content").click( function() {
    $("#unicode_for_content2").val(escape($("#unicode_for_content1").val())
      .replace(/%u/g,"\\").replace(/%20/g,"\\a0"));
  });
});
</script>

escape 関数で半角スペースを変換すると「%20」と出力されるため、replace 関数を使って強制的に「\a0」へ変換する処理を噛ませています。

これで content の文字化けも大丈夫ですね！