list-style-typeとは
リスト項目要素のマーカーのことですね。
- 👈これとか
- 👈これとか
hiragana-iroha
やcjk-earthly-branch
など、使い所があまりないけれど、知識としては面白いプロパティもあるので、ドキュメントを読んでみることをオススメします。
🥺が出るようにしたい
さて、本題ですが、list-style-type
は規定値としてdisc
が設定されています。
そのため、デフォルトのスタイルでは●
がでることでしょう。
これを🥺に変えるには、値にUnicode
を設定します。
🥺はU+1F97A
のため、次のようにします。
HTML
<ul>
<li>ぴえん</li>
<li>ぴえん</li>
</ul>
CSS
ul {
list-style-type: "\1F97A";
}
これで🥺をlist-style-type
で使うことができます。
ちなみに💩はU+1F4A9
ですので、💩を出したいは次のようにします。
CSS
ul {
list-style-type: "\1F4A9";
}
また、HTML上で🥺や💩を文字として使いたい場合は、数値文字参照
を使うことでデバイス間による文字化けを防ぐことができます。
HTML
<!--ぴえん-->
<p>🥺</p>
<!--うんち-->
<p>💩</p>
参照
絵文字のUnicodeと数値文字参照がまとめられていて、分かりやすかったです。
https://lets-emoji.com/