CSSのcontentプロパティで絵文字や4バイト漢字を使う

CSSテキストで

  • 4バイト絵文字(例:😀)
  • 4バイト漢字 (例:𩸽【ほっけ】)

などのUnicode文字を使う方法メモ。

1.直接書く

例えば、style.cssに書く場合、

style.cssの文字コードが「UTF-8」な場合は直接Unicode文字を書いてしまえばいい。

a::after {
  content: "😀";
}

今の時代ほとんどの場合は「UTF-8」だし

というかUTF-8以外を使う理由がないので、もはやこの方法一択でOK。

 

逆にShift-JISやEUC-JPなどの場合は、この後述の2.の方法でないとだめ。

2.Unicode番号で書く

HTMLでは、HTMLエンティティ(数値文字参照文字実体参照などとも言う)を使って、Unicode文字を書くことができる。

HTMLエンティティというのは、例えば😀←この絵文字はUnicodeのコードポイントで表すとU+1F600だから、😀ってHTML本文中に書けば😀が表示される・・みたいな仕組みのやつ。

 

CSSでも同じような書き方ができるのだけど、HTMLとは少し違う。

CSSでは、例えば😀(U+1F600)を書きたい場合は以下のように、\(エスケープ記号)の後にU+1F600(Unicode番号)を書く。

a::after { 
  content: "F600";
}

 

連続して書きたい場合は、連続して書く。

a::after { 
  content: "F600F600F600F600F600F600";
}

おわり

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました