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

2016/08/02

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

minecraft-kuda-shaders01
2016/12/03

Minecraft 低スペックパソコンで使える影 MOD の代表格 KUDA SHADERS の導入方法

odaiba-gundam-last-day01
2016/12/02

お台場のガンダムいつまで見られるか?!ダイバーシティーからの撤去が決まる

new-year-2017
2016/12/01

一人用おせち料理のすすめ【2017】人気店のおせちが通販で手に入ります

jayfi-touch-h1-ja-22-01
2016/11/30

イヤホンからの乗り換えにおすすめ Jayfi Touch H1 はスマホの通話機能を持つ低音重視のワイヤレス Bluetooth ヘッドホン【レビュー】

android-smartphone-case01
2016/11/30

Android 用スマホケースはどこで売っている?店に行っても売ってない場合どうすれば良いか

remove-crc-sha-from-context-menu01
2016/11/29

ファイルを右クリックすると表示される CRC SHA を消す方法

rakusuru01
2016/11/29

ラクスルで初めてのポスター発注!時間は掛かるが料金は安い!

file-archiver-7-zip01
2016/11/29

ZIP より圧縮率の高いアーカイバー 7-Zip を今更ながら紹介する

install-minecraft-mod-optifine01
2016/11/29

Minecraft 軽量化 MOD OptiFine の導入方法 【1.11対応済み】

minecraft02
2016/11/28

Minecraft のビデオ設定を変更して軽くすれば低スペックパソコンでも十分に遊べる

→もっと見る

Name :
気力/体力勝負なシステム業界で揉まれています。自分が自分らしくあるために、大事なリセット、スタートします。

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