ブログカスタマイズ

CSSのbeforやafter要素のcontentプロパティでUnicodeを使って文字化けを回避する

なぜ文字化けが起きるのか？

CSSを外部ファイルで定義していたり、文字コードがUTF-8等でなかった場合に起こる。要するに、今、表示しているページの文字コードと外部ファイルから読み込んだ文字コードが一致しない（解釈できない）ために文字化けが起こる。

回避方法

ブラウザの文字コードに依存しないように表示をおこなう

下記のようなコードがあった場合

.example:before {
  content: "●";
}

このままだと文字化けが起こる可能性がある。そこで

.example:before {
  content: "\25CF";
}

とUnicode（ユニコード）に変換してやれば良い。

Unicode（ユニコード）への変換

Unicode（ユニコード）に変換は、\+Unicode（ユニコード）という形になる。（バックスラッシュ部分は、半角￥マークでも可）

Unicode（ユニコード）変換ツール

文字を入力

参考サイト：NJ-CLUCKER様

関連記事

スポンサーリンク

スポンサーリンク