血統の森: Homeweb実験小屋CSS3ウェブブラウザ実装メモCSS Lists and Counters Module

xreaの広告です。

hosting by xrea.com

CSS Lists and Counters Module

作成:
更新:

CSS3ではCSS Lists and Counters Module Level 3として、リストのスタイルが大幅に拡張されている。CSS2.1では、list-style-typeプロパティの値は、規定の値しか取ることが出来なかったが、CSS3の草案では任意のカウントスタイルとして@counter-styleを導入し、複雑な数のカウントの仕方をCSS製作者が自在に操れるよう設計されている。

ここでは、Predefinedとして@counter-styleであらかじめ定義されたlist-style-typeについて触れることにする。ただし、OSにインストールされているフォントに依存する値が含まれているために、ブラウザでこのwebページを閲覧しても対応フォントがないために文字化けする可能性があることを断っておく。

定義済みスタイル

6.1節で定義されるもの(Numeric)

value IE Edge Firefox Blink WebKit 説明
decimal 1から始まる10進数(CSS2で定義)
decimal-leading-zero 冒頭を0で詰め物をした10進数(CSS2で定義)
arabic-indic ××アラビア・インド数字
armenian 伝統的なアルメニア数字(CSS2で定義)
upper-armenian ××伝統的な大文字アルメニア語
lower-armenian ××小文字アルメニア語
bengali ××ベンガル語
cambodian ××カンボジア語/クメール語
khmer ××カンボジア語/クメール語
cjk-decimal ××××漢字十進数
devanagari ××デヴァーナーガリー
georgian 伝統的なグルジア数字(CSS2で定義)
gujarati ××グジャラート語
gurmukhi ××グルムキー語
hebrew ××伝統的なヘブライ語
kannada ××カンナダ語
lao ××ラオス語
malayalam ××マラーヤム語
mongolian ××モンゴル語
myanmar ××ミャンマー語(ビルマ語)
oriya ××オリヤー語
persian ××ペルシア語
lower-roman 小文字のローマ数字(CSS2で定義)
upper-roman 大文字のローマ数字(CSS2で定義)
tamil ××××タミル語
telugu ××テルグ語
thai ××タイ語(シャム語)
tibetan ××チベット語

6.2節で定義されるもの(Alphabetic)

value IE Edgel Firefox Blink WebKit 説明
lower-alpha 小文字のアスキー文字(CSS2.1で定義)
upper-alpha 大文字のアスキー文字(CSS2.1で定義)
cjk-earthly-branch ××地干(十二支)
cjk-heavenly-stem ××天干(十干)
lower-greek 小文字の古代ギリシャ文字(CSS2.1で定義)
hiragana-iroha ××ひらがな(いろは順)
hiragana ××ひらがな(五十音順)
katakana-iroha ××カタカナ(いろは順)
katakana ××カタカナ(五十音順)

6.3節で定義されるもの(Symbolic)

value IE Edge Firefox Blink WebKit 説明
disc •(CSS2.1で定義)
circle ◦(CSS2.1で定義)
square ◾(CSS2.1で定義)
disclosure-open ××××<details>要素などの、開状態記号
disclosure-closed ××××<details>要素などの、閉状態記号

7章で定義されるもの(Complex Predefined Counter Styles)

value IE Edge Firefox Blink WebKit 説明
japanese-informal ××××非公式的な日本語漢字
japanese-formal ××××公式的な日本語漢字
korean-hangul-formal ×××韓国語ハングル
korean-hanja-informal ×××非公式的な韓国語漢字
korean-hanja-formal ×××公式的な韓国語漢字
simp-chinese-informal ×××簡体字中国語による非公式的な付番
simp-chinese-formal ×××簡体字中国語による公式的な付番
trad-chinese-informal ×××繁体字中国語による非公式的な付番
trad-chinese-formal ×××繁体字中国語による公式的な付番
ethiopic-numeric ××××ゲエズ語による数的カウンタスタイル

実際に試してみる

ブラウザが対応していれば、フォームの値を選択することで下の表示例が変化するものを作成した。

coding

#id {
  list-style: decimal;
}

表示例

  1. 花よりさきに実のなるやうな
  2. 種子(たね)よりさきに芽の出るやうな
  3. 夏から春のすぐ来るやうな
  4. そんな理窟に合はない不自然を
  5. どうかしないでゐて下さい
  6. 型のやうな旦那さまと
  7. まるい字をかくそのあなたと
  8. かう考へてさへなぜか私は泣かれます
  9. 型のやうな旦那さまと
  10. まるい字をかくそのあなたと
  11. かう考へてさへなぜか私は泣かれます

検証に使用したブラウザ

Internet Explorer
11.0.26 Trident/7.0(リリース版)
MS Edge
Edge/13.10586 (リリース版)
Firefox
Firefox/43.0(リリース版)
Blink
AppleWebKit/537.36 Chrome/47.0.2526.80 Vivaldi/1.0.352.3(スナップショット版)
WebKit
AppleWebKit/602.1 Epiphany/3.18.1(リリース版)

仕様書とリファレンス

CSS2.2訳 12.5 リスト
http://momdo.github.io/css2/generate.html#lists
CSS Counter Styles Level 3 日本語訳
http://www.hcn.zaq.ne.jp/___/WEB/css-counter-styles-ja.html
Predefined Counter Styles
http://www.w3.org/TR/predefined-counter-styles/
list-style-type - MDN
https://developer.mozilla.org/en/CSS/list-style-type
智恵子抄 高村 光太郎
http://www.aozora.gr.jp/cards/001168/files/46669_25695.html