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
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

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

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

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

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

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

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

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!