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

2014/01/14

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 の文字化けも大丈夫ですね!

Name :
気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。目指すところへの道のりは険しいですが、自分が自分らしくあるために、一歩ずつ進んでいきます。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。よろしければフォローお待ちしています。

プロフィール詳細 Twitter @_NJ69_
Facebook ページ nj-clucker.com シェア
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑