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

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

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

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプでフレンドを登録する方法は3つ!フレンドコードを表示して友達に教えてあげよう!

どうぶつの森ポケットキャンプで名前を変える方法は?性別は変更できない?

どうぶつの森ポケットキャンプのゴロゴロ鉱山ってどんなところ?ベルはどれくらい手に入る?

どうぶつの森ポケットキャンプのデータ移行方法!スマホを機種変更する場合はどうすれば良い?

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!