ＣＳＳでカウンタ値を表示する場合、値の表示に使うリスト項目のマーカー（行頭記号）の形状を幾つか例示。ＣＳＳの「ｌｉｓｔ－ｓｔｙｌｅ－ｔｙｐｅ」です。

2019-8-20

概要：ボックス内の連続したｐタグにＣＳＳでカウンタ（連番）を表示、その際にカウンタ値の表示を「あいうえお順」など各種の表示で試した例示です。尚、ｕｌリストやテーブルにカウンタを設置した → ページ

cjk-ideographic
　漢数字

こんにちは！

お元気ですか

暑いですね

今日はどちらへ

では、また

decimal-leading-zero ０付き算用数字

こんにちは！

お元気ですか

暑いですね

今日はどちらへ

では、また

hiragana
　あいうえお順

こんにちは！

お元気ですか

暑いですね

今日はどちらへ

では、また

hiragana-iroha
　いろは順

こんにちは！

お元気ですか

暑いですね

今日はどちらへ

では、また

katakana
　アイウエオ順

こんにちは！

お元気ですか

暑いですね

今日はどちらへ

では、また

katakana-iroha
　イロハ順

こんにちは！

お元気ですか

暑いですね

今日はどちらへ

では、また

lower-alpha
　小文字アルファベッド

こんにちは！

お元気ですか

暑いですね

今日はどちらへ

では、また

lower-greek
　小文字ギリシャ

こんにちは！

お元気ですか

暑いですね

今日はどちらへ

では、また

lower-roman
　小文字ローマ数字

こんにちは！

お元気ですか

暑いですね

今日はどちらへ

では、また

upper-alpha
　大文字アルファベット

こんにちは！

お元気ですか

暑いですね

今日はどちらへ

では、また

upper-roman
　大文字ローマ数字

こんにちは！

お元気ですか

暑いですね

今日はどちらへ

では、また

補足

upper-alphaとupper-latin、lower-alphaとlower-latinは、同一スタイルです。latinは例示には入れていません。

alphaとlatinの違いは、CSS1から定義されたalpha、CSS2から定義されたのがlatinとのことです。

ｈｔｍｌ表記

<div class="p_list_all">
<div class="p_list">
  <div>cjk-ideographic<br>
　漢数字</div>
  <p>こんにちは！</p>
  <p>お元気ですか</p>
  <p>暑いですね</p>
  <p>今日はどちらへ</p>
  <p>では、また</p>
</div>
<div class="p_list">
  <div>decimal-leading-zero<br>
　０付き算用数字</div>
  <p>こんにちは！</p>
  <p>お元気ですか</p>
  <p>暑いですね</p>
  <p>今日はどちらへ</p>
  <p>では、また</p>
</div>
<div class="p_list">
  <div>hiragana<br>
　あいうえお順</div>
  <p>こんにちは！</p>
  <p>お元気ですか</p>
  <p>暑いですね</p>
  <p>今日はどちらへ</p>
  <p>では、また</p>
</div>
<div class="p_list">
  <div>hiragana-iroha<br>
　いろは順</div>
  <p>こんにちは！</p>
  <p>お元気ですか</p>
  <p>暑いですね</p>
  <p>今日はどちらへ</p>
  <p>では、また</p>
</div>
<div class="p_list">
  <div>katakana<br>
　アイウエオ順</div>
  <p>こんにちは！</p>
  <p>お元気ですか</p>
  <p>暑いですね</p>
  <p>今日はどちらへ</p>
  <p>では、また</p>
</div>
<div class="p_list">
  <div>katakana-iroha<br>
　イロハ順</div>
  <p>こんにちは！</p>
  <p>お元気ですか</p>
  <p>暑いですね</p>
  <p>今日はどちらへ</p>
  <p>では、また</p>
</div>
<div class="p_list">
  <div>lower-alpha<br>
　小文字アルファベッド</div>
  <p>こんにちは！</p>
  <p>お元気ですか</p>
  <p>暑いですね</p>
  <p>今日はどちらへ</p>
  <p>では、また</p>
</div>
<div class="p_list">
  <div>lower-greek<br>
　小文字ギリシャ</div>
  <p>こんにちは！</p>
  <p>お元気ですか</p>
  <p>暑いですね</p>
  <p>今日はどちらへ</p>
  <p>では、また</p>
</div>
<div class="p_list">
  <div>lower-roman<br>
　小文字ローマ数字</div>
  <p>こんにちは！</p>
  <p>お元気ですか</p>
  <p>暑いですね</p>
  <p>今日はどちらへ</p>
  <p>では、また</p>
</div>
<div class="p_list">
  <div>upper-alpha<br>
　大文字アルファベット</div>
  <p>こんにちは！</p>
  <p>お元気ですか</p>
  <p>暑いですね</p>
  <p>今日はどちらへ</p>
  <p>では、また</p>
</div>
<div class="p_list">
  <div>upper-roman<br>
　大文字ローマ数字</div>
  <p>こんにちは！</p>
  <p>お元気ですか</p>
  <p>暑いですね</p>
  <p>今日はどちらへ</p>
  <p>では、また</p>
</div>
</div>

100

101

<div>cjk-ideographic<br>

　漢数字</div>

<p>こんにちは！</p>

<p>お元気ですか</p>

<p>暑いですね</p>

<p>今日はどちらへ</p>

</div>

<div>decimal-leading-zero<br>

　０付き算用数字</div>

<p>こんにちは！</p>

<p>お元気ですか</p>

<p>暑いですね</p>

<p>今日はどちらへ</p>

</div>

<div>hiragana<br>

　あいうえお順</div>

<p>こんにちは！</p>

<p>お元気ですか</p>

<p>暑いですね</p>

<p>今日はどちらへ</p>

</div>

<div>hiragana-iroha<br>

　いろは順</div>

<p>こんにちは！</p>

<p>お元気ですか</p>

<p>暑いですね</p>

<p>今日はどちらへ</p>

</div>

<div>katakana<br>

　アイウエオ順</div>

<p>こんにちは！</p>

<p>お元気ですか</p>

<p>暑いですね</p>

<p>今日はどちらへ</p>

</div>

<div>katakana-iroha<br>

　イロハ順</div>

<p>こんにちは！</p>

<p>お元気ですか</p>

<p>暑いですね</p>

<p>今日はどちらへ</p>

</div>

<div>lower-alpha<br>

　小文字アルファベッド</div>

<p>こんにちは！</p>

<p>お元気ですか</p>

<p>暑いですね</p>

<p>今日はどちらへ</p>

</div>

<div>lower-greek<br>

　小文字ギリシャ</div>

<p>こんにちは！</p>

<p>お元気ですか</p>

<p>暑いですね</p>

<p>今日はどちらへ</p>

</div>

<div>lower-roman<br>

　小文字ローマ数字</div>

<p>こんにちは！</p>

<p>お元気ですか</p>

<p>暑いですね</p>

<p>今日はどちらへ</p>

</div>

<div>upper-alpha<br>

　大文字アルファベット</div>

<p>こんにちは！</p>

<p>お元気ですか</p>

<p>暑いですね</p>

<p>今日はどちらへ</p>

</div>

<div>upper-roman<br>

　大文字ローマ数字</div>

<p>こんにちは！</p>

<p>お元気ですか</p>

<p>暑いですね</p>

<p>今日はどちらへ</p>

</div>

ｃｓｓ表記

/* == カウンター関係 == */
.p_list_all {counter-reset: ctr1 0;} 

.p_list_all > div:nth-of-type(n+1) {
  counter-increment: ctr1;}

.p_list_all > div:nth-of-type(n+1) >
  div::before{
  content: counter(ctr1)"．";}

.p_list > div {
  font-weight:bold;
  margin-bottom:5px;}

.p_list > div {counter-reset: ctr 0;} 

.p_list:nth-of-type(n+1) > 
  p:nth-of-type(n+1){
  counter-increment: ctr;}

/* == 1.cjk-ideographic 漢数字 == */
.p_list:nth-of-type(1) >
  p:nth-of-type(n+1)::before{
  content:counter(ctr,cjk-ideographic)"．";}

/* == 2.decimal-leading-zero ０付き算用数字 == */
.p_list:nth-of-type(2) >
  p:nth-of-type(n+1)::before{
  content:counter(ctr,decimal-leading-zero)"．";}

/* == 3.hiragana あいうえお順 == */
.p_list:nth-of-type(3) >
  p:nth-of-type(n+1)::before{
  content:counter(ctr,hiragana)"．";}

/* == 4.hiragana-iroha いろは順 == */
.p_list:nth-of-type(4) >
  p:nth-of-type(n+1)::before{
  content:counter(ctr,hiragana-iroha)"．";}

/* == 5.katakana アイウエオ順 == */
.p_list:nth-of-type(5) >
  p:nth-of-type(n+1)::before{
  content:counter(ctr,katakana)"．";}

/* == 6.katakana-iroha イロハ順 == */
.p_list:nth-of-type(6) >
  p:nth-of-type(n+1)::before{
  content:counter(ctr,katakana-iroha)"．";}

/* == 7.lower-alpha 小文字アルファベット順 == */
.p_list:nth-of-type(7
  p:nth-of-type(n+1)::before{
  content:counter(ctr,lower-alpha)"．";}

/* == 8.lower-greek 小文字ギリシャ == */
.p_list:nth-of-type(8) >
  p:nth-of-type(n+1)::before{
  content:counter(ctr,lower-greek)"．";}

/* == 9.lower-roman 小文字ローマ数字 == */
.p_list:nth-of-type(9) >
  p:nth-of-type(n+1)::before{
  content:counter(ctr, lower-roman)"．";}

/* == 10.upper-alpha 大文字アルファベット == */
.p_list:nth-of-type(10) >
  p:nth-of-type(n+1)::before{
  content:counter(ctr,upper-alpha)"．";}

/* == 11.upper-alpha 大文字ローマ数字 == */
.p_list:nth-of-type(11) >
  p:nth-of-type(n+1)::before{
  content:counter(ctr,upper-roman)"．";}

/* == カウンター関係 == */

.p_list_all {counter-reset: ctr1 0;}

.p_list_all > div:nth-of-type(n+1) {

counter-increment: ctr1;}

.p_list_all > div:nth-of-type(n+1) >

div::before{

content: counter(ctr1)"．";}

.p_list > div {

font-weight:bold;

margin-bottom:5px;}

.p_list > div {counter-reset: ctr 0;}

.p_list:nth-of-type(n+1) >

p:nth-of-type(n+1){

counter-increment: ctr;}

/* == 1.cjk-ideographic 漢数字 == */

.p_list:nth-of-type(1) >

p:nth-of-type(n+1)::before{

content:counter(ctr,cjk-ideographic)"．";}

/* == 2.decimal-leading-zero ０付き算用数字 == */

.p_list:nth-of-type(2) >

p:nth-of-type(n+1)::before{

content:counter(ctr,decimal-leading-zero)"．";}

/* == 3.hiragana あいうえお順 == */

.p_list:nth-of-type(3) >

p:nth-of-type(n+1)::before{

content:counter(ctr,hiragana)"．";}

/* == 4.hiragana-iroha いろは順 == */

.p_list:nth-of-type(4) >

p:nth-of-type(n+1)::before{

content:counter(ctr,hiragana-iroha)"．";}

/* == 5.katakana アイウエオ順 == */

.p_list:nth-of-type(5) >

p:nth-of-type(n+1)::before{

content:counter(ctr,katakana)"．";}

/* == 6.katakana-iroha イロハ順 == */

.p_list:nth-of-type(6) >

p:nth-of-type(n+1)::before{

content:counter(ctr,katakana-iroha)"．";}

/* == 7.lower-alpha 小文字アルファベット順 == */

.p_list:nth-of-type(7

p:nth-of-type(n+1)::before{

content:counter(ctr,lower-alpha)"．";}

/* == 8.lower-greek 小文字ギリシャ == */

.p_list:nth-of-type(8) >

p:nth-of-type(n+1)::before{

content:counter(ctr,lower-greek)"．";}

/* == 9.lower-roman 小文字ローマ数字 == */

.p_list:nth-of-type(9) >

p:nth-of-type(n+1)::before{

content:counter(ctr, lower-roman)"．";}

/* == 10.upper-alpha 大文字アルファベット == */

.p_list:nth-of-type(10) >

p:nth-of-type(n+1)::before{

content:counter(ctr,upper-alpha)"．";}

/* == 11.upper-alpha 大文字ローマ数字 == */

.p_list:nth-of-type(11) >

p:nth-of-type(n+1)::before{

content:counter(ctr,upper-roman)"．";}