CSS中にUnicode文字を記述する方法を紹介します。
補足
HTMLにUnicode文字列を記述する場合は
こちらの記事を参照してください。
概要
CSSのcontentプロパティにUnicodeの文字を記述する場合の書式を紹介します。
通常の文字として記述する
通常の文字としてUnicodeの文字を記述する方法です。
.Frame01 {
width: 200px;
height: 64px;
border: solid 1px #ff6a00;
}
.Frame01:before {
content:"🍣🐓🐧";
}
<!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ブラウザで表示します。下図の画面が表示されます。
先頭に"\"を記述し、エンコード文字列として記述する
先頭に"\"を記述し16進数のUnicodeの文字コードを記述することでUnicodeの文字を表現できます。
ヒント
記号文字の16進数のコードは
こちらの記事を参照してください。
.Frame01 {
width: 200px;
height: 64px;
border: solid 1px #ff6a00;
}
.Frame01:before {
content: "\1F680\1F684\1F4FA";
}
<!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>
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
Unicode文字の絵文字が表示されていることが確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2022-02-23
作成日: 2020-10-15
