before疑似要素のcontentで文字化けが起こった場合の対処法

before疑似要素を使って、ul要素内のli要素の先頭に大きめの「●」を付けている@web_shufuです。先日、全ファイルの文字コードをUTF-8に統一しているにもかかわらず、「●」が「笳」に文字化けするという理解不能な状態が発生して、復旧に30分以上かかったのでメモ。

元々のCSS

当サイトWeb Shufuでは、ul要素内のli要素にbefore疑似要素を設定して、以下のようなスタイルをあてていました。

ul li:before {
    content:"●";
    color:#00a48c;
    font-weight:bold;
    font-size:24.5px;
    vertical-align:middle;
}

これで、今までは問題なく「●Wordpress」のような箇条書き表記が出来ていたのです。

症状

ところが、何の前触れもなく、すべてのul要素内のli要素で「●」が「笳」に変わりました。

例えば、いままで「●Wordpress」となっていたところが「笳Wordpress」に変わったわけです。

とりあえず茫然自失。

色々やってみたが

最近プラグインのアップデートをしたので、それが原因かと思って、プラグインを無効にしてみたり削除してみたり色々しました。

しかし、相変わらず「笳」がのさばっています。

つまり、プラグインのアップデータなど関係なかったようです。

救世主登場

そんな私の前に颯爽と現れたのが、以下のサイトでした。

[img-link url=”http://bgrins.github.com/spectrum/” title=”Spectrum – The No Hassle jQuery Colorpicker”]

半角英数や半角の記号ならそのままでOK。ただしクォーテーションなどのメタ文字は\でエスケープしないと表示されない。
日本語などの2バイト文字も書いたまま表示されるけど、数値文字参照の値で書いた方が無難です。

結局、今までのCSSはいつ文字化けしてもおかしくない状態だったわけです。

そして、文字参照についても注意点が。

＆を￥に変更する、#とxを削るか0に変更する、ミコロンを削除する、と３ステップ踏む必要があります。

&#xを\に変えて末尾のセミコロンを削除したものを、content:”　”;の引用符の内側に入れないといけないみたいです。

その通りやるとうまくいきました。

新CSS

新しいCSSは以下の通りです。

ul li:before {
    content:"\25cf";
    color:#00a48c;
    font-weight:bold;
    font-size:24.5px;
    vertical-align:middle;
}

なお、ワンクリックで文字を16進数文字参照に変換してくれるサイトも見つけました。

[img-link url=”https://web.archive.org/web/20161022205711/http://scriptogr.am:80/ia_archiver/post/2012-03-17-2231″ title=”Scriptogr.am”]

なかなか便利です。