1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

list-style-type: 🥺

Last updated at Posted at 2020-08-10

list-style-typeとは

リスト項目要素のマーカーのことですね。

  • 👈これとか
    • 👈これとか

hiragana-irohacjk-earthly-branchなど、使い所があまりないけれど、知識としては面白いプロパティもあるので、ドキュメントを読んでみることをオススメします。

MDN list-style-type

🥺が出るようにしたい

さて、本題ですが、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>&#x1f97a;</p>
<!--うんち-->
<p>&#x1f4a9;</p>

参照

絵文字のUnicodeと数値文字参照がまとめられていて、分かりやすかったです。
https://lets-emoji.com/

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?