CSSでカウンタ値を表示する場合、値の表示に使うリスト項目のマーカー(行頭記号)の形状を幾つか例示。CSSの「list-style-type」です。
概要:ボックス内の連続したpタグにCSSでカウンタ(連番)を表示、その際にカウンタ値の表示を「あいうえお順」など各種の表示で試した例示です。 尚、ulリストやテーブルにカウンタを設置した → ページ
cjk-ideographic
漢数字
漢数字
こんにちは!
お元気ですか
暑いですね
今日はどちらへ
では、また
decimal-leading-zero 0付き算用数字
こんにちは!
お元気ですか
暑いですね
今日はどちらへ
では、また
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とのことです。
html表記
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<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> 0付き算用数字</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> |
css表記
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
/* == カウンター関係 == */ .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 0付き算用数字 == */ .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)".";} |