CSS中にUnicode文字を記述するコードと表示結果

概要

CSSのcontentプロパティにUnicodeの文字を記述する場合の書式を紹介します。

通常の文字として記述する

通常の文字としてUnicodeの文字を記述する方法です。

simple-content.css

.Frame01 {
  width: 200px;
  height: 64px;
  border: solid 1px #ff6a00;
}
.Frame01:before {
  content:"🍣🐓🐧";
}

simple-content.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link type="text/css" rel="stylesheet" href="simple-content.css"/>
</head>
<body>
  <div class="Frame01"></div>
  <div class="Frame01"></div>
  <div class="Frame01"></div>
</body>
</html>

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

CSS中にUnicode文字を記述するコードと表示結果:画像1

先頭に"\"を記述し、エンコード文字列として記述する

先頭に"\"を記述し16進数のUnicodeの文字コードを記述することでUnicodeの文字を表現できます。

ヒント

記号文字の16進数のコードはこちらの記事を参照してください。

simple-content-unicode.css

.Frame01 {
  width: 200px;
  height: 64px;
  border: solid 1px #ff6a00;
}
.Frame01:before {
  content: "\1F680\1F684\1F4FA";
}

simple-content-unicode.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link type="text/css" rel="stylesheet" href="simple-content-unicode.css"/>
</head>
<body>
  <div class="Frame01"></div>
  <div class="Frame01"></div>
  <div class="Frame01"></div>
</body>
</html>