*

ウェッブ制作

Width =px

ホーム > 変化を付ける小技 >
CSS・カウンタ設置と行頭記号の表示 MENU 

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表記

css表記