Skip to content

Instantly share code, notes, and snippets.

@sukeharu

sukeharu/list-style.html

Last active May 8, 2020
Embed
What would you like to do?
2020/05/08現在、list-style-typeに指定できる、日本語に関連するキーワード。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>list-style</title>
<style>
p > code {
padding-left: 0.5rem;
}
.string {
list-style-type: "😀";
}
.earthly-branch {
list-style-type: cjk-earthly-branch;/* 十二支(子丑寅...) */
}
.heavenly-stem {
list-style-type: cjk-heavenly-stem;/* 大字(甲乙丙...) */
}
.ideographic {
list-style-type: cjk-ideographic;/* 漢数字(一二三...) */
}
.trad-chinese-formal {
list-style-type: trad-chinese-formal;/* 漢数字旧字(壹貳參...) */
}
.trad-chinese-informal {
list-style-type: trad-chinese-informal;/* 漢数字(一二三...) */
}
</style>
</head>
<body>
<p>文字列を指定<code>list-style-type: &quot;😀&quot;;</code></p>
<ul class="string">
<li>そのいち</li>
<li>そのに</li>
<li>そのさん</li>
<li>そのよん</li>
<li>そのご</li>
</ul>
<p>十二支<code>list-style-type: cjk-earthly-branch;</code></p>
<ul class="earthly-branch">
<li>そのいち</li>
<li>そのに</li>
<li>そのさん</li>
<li>そのよん</li>
<li>そのご</li>
</ul>
<p>十干<code>list-style-type: cjk-heavenly-stem;</code></p>
<ul class="heavenly-stem">
<li>そのいち</li>
<li>そのに</li>
<li>そのさん</li>
<li>そのよん</li>
<li>そのご</li>
</ul>
<p>漢数字(互換)<code>list-style-type: cjk-ideographic;</code></p>
<ul class="ideographic">
<li>そのいち</li>
<li>そのに</li>
<li>そのさん</li>
<li>そのよん</li>
<li>そのご</li>
</ul>
<p>漢数字<code>list-style-type: trad-chinese-informal;</code></p>
<ul class="trad-chinese-informal">
<li>そのいち</li>
<li>そのに</li>
<li>そのさん</li>
<li>そのよん</li>
<li>そのご</li>
</ul>
<p>大字<code>list-style-type: trad-chinese-formal;</code></p>
<ul class="trad-chinese-formal">
<li>そのいち</li>
<li>そのに</li>
<li>そのさん</li>
<li>そのよん</li>
<li>そのご</li>
</ul>
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type">list-style-type - CSS: カスケーディングスタイルシート | MDN</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment