スタイルに marker 擬似要素 ::marker { color: darkblue; font-size: small; } などと加えておけばフォントやカラーの指定ができる。ここでは全体をそれで変更している。但し、Chrome では未対応。
ul li タグの marker の種類を変えるには、ul タグのスタイルに list-style-type プロパティを使えばよい。その list-style-type には固定文字列のみならず、ユーザ定義のカウンタスタイル、もしくは定義済みのカウンタスタイル、加えて symbols() によるカウンタスタイルを指定できる。但し、Chrome, Safari では固定文字列とユーザ定義のカウンタスタイルの指定には未対応で、定義済みカウンタスタイルのみ対応。
ul タグ向けのカウンタスタイルを定義するには以下のようにスタイルを書けばよい。
@counter-style circled-white-bullet {
system: cyclic;
symbols: \29BE;
/* ⦾ */
suffix: " ";
}
ul li タグの marker と li タグのスタイルを変えるには、li タグのスタイルに font-family: monospace; などと加えていけばよい。
以下、それらの典型例を紹介するので、UA での挙動の確認に使われたし。
Chrome, Safari の対応状況が芳しくないことを確認した。
以上の Chrome, Safari の対応状況が芳しくないので、before 擬似要素を用いた方法を確認する。結論からすると、こちらの方が多少融通が効く。
スタイルに before 擬似要素 ::before { color: darkgreen; font-size: small; } などと加えておけばフォントやカラーの指定ができる。ここでは全体をそれで変更している。但し、Safari では未対応。
before 擬似要素はインライン CSS では指定が不可能である。よって、以下のようなクラスを非インラインスタイルにて設定しておく。
ul.content {
list-style-type: none; padding-left: 0;
}
ul.content>li::before {
display: inline-block;
width: auto;
min-width: calc(80px - .5em);
max-width: calc(160px - .5em);
margin-right: .5em;
text-align: right;
white-space: nowrap;
vertical-align: middle;
overflow: scroll;
}
ul.bullet>li::before { content: '•'; }
ul.endash>li::before { content: '–'; }
ul.asterisk>li::before { content: '*'; }
ul.period>li::before { content: '･'; }
ul.black-square>li::before { content: '◼'; }
ul.white-bullet>li::before { content: '◦'; }
ul.white-square>li::before { content: '◻'; }
ul.middle-dot>li::before { content: '·'; }
ul.triangular-bullet>li::before { content: '‣'; }
ul.hyphen-bullet>li::before { content: '⁃'; }
これらのクラスは before 擬似要素を利用した先の marker の代替となるものであり、この content クラスはそれら共通のスタイルを定めている。
ul li タグの marker と li タグのスタイルを変えるには、li タグのスタイルに font-family: monospace; などと加えていけばよい。
以下、それらの典型例を紹介するので、UA での挙動の確認に使われたし。
本項では後述の事情で padding-left: 80px などとしているが、他の 80px を含めて 40px 辺りに書き換えれば、実用上は問題ない。
固定文字列の before が Chrome, Safari で実現できている。
スタイルに marker 擬似要素 ::marker { color: darkblue; font-size: small; } などと加えておけばフォントやカラーの指定ができる。ここでは全体をそれで変更している。但し、Chrome では未対応。
ol li タグの marker の種類を変えるには、ol タグのスタイルに list-style-type プロパティを使えばよい。その list-style-type には固定文字列のみならず、ユーザ定義のカウンタスタイル、もしくは定義済みのカウンタスタイル、加えて symbols() によるカウンタスタイルを指定できる。但し、Chrome, Safari では固定文字列とユーザ定義のカウンタスタイルの指定には未対応で、定義済みカウンタスタイルのみ対応。
ol タグ向けのカウンタスタイルを定義するには以下のようにスタイルを書けばよい。
@counter-style fnsymbol {
system: symbolic;
symbols: '*' '†' '‡' '§' '¶' '‖';
suffix: ' ';
}
ol li タグの marker と li タグのスタイルを変えるには、li タグのスタイルに font-family: monospace; などと加えていけばよい。
以下、それらの典型例を紹介するので、UA での挙動の確認に使われたし。ちなみに、負値から start 属性で始めて直線的(+1)に増加していくが 10 以上は value 属性で指数的(×10)に増加させている。
カウンタの定義域を超えた場合の fallback などの挙動なども興味深い。
以上の Chrome, Safari の対応状況が芳しくないので、before 擬似要素や counter を用いた方法を確認する。結論からすると、こちらの方が多少融通が効く。
スタイルに before 擬似要素 ::before { color: darkgreen; font-size: small; } などと加えておけばフォントやカラーの指定ができる。ここでは全体をそれで変更している。但し、Safari では未対応。
before 擬似要素はインライン CSS では指定が不可能である。よって、以下のようなクラスを非インラインスタイルにて設定しておく。
ol.content {
list-style-type: none; padding-left: 0;
}
ol.content>li::before {
display: inline-block;
width: calc(80px - .5em);
margin-right: .5em;
text-align: right;
white-space: nowrap;
vertical-align: middle;
overflow: hidden;
}
ol.asterisk { font-family: monospace; }
ol.asterisk>li::before { content: "* "; }
ol.dagger { font-family: monospace; }
ol.dagger>li::before { content: "†"; }
ol.decimal {
counter-reset: decimal;
font-family: monospace;
}
ol.decimal>li::before {
counter-increment: decimal;
content: counter(decimal, decimal) ".";
}
ol.lower-roman {
counter-reset: lower-roman;
font-family: monospace;
}
ol.lower-roman>li::before {
counter-increment: lower-roman;
content: counter(lower-roman, lower-roman) ".";
}
ol.hiragana-iroha {
counter-reset: hiragana-iroha;
}
ol.hiragana-iroha>li::before {
counter-increment: hiragana-iroha;
content: counter(hiragana-iroha, hiragana-iroha) "､";
}
ol.cjk-ideographic {
counter-reset: cjk-ideographic;
}
ol.cjk-ideographic>li::before {
counter-increment: cjk-ideographic;
content: counter(cjk-ideographic, cjk-ideographic) "､";
}
ol.fnsymbol {
counter-reset: fnsymbol;
}
ol.fnsymbol>li::before {
counter-increment: fnsymbol;
content: counter(fnsymbol, fnsymbol) ".";
}
これらのクラスは before 擬似要素とカウンタを利用した先の marker の代替となるものであり、この content クラスはそれら共通のスタイルを定めている。
ol li タグの marker と li タグのスタイルを変えるには、li タグのスタイルに font-family: monospace; などと加えていけばよい。
以下、それらの典型例を紹介するので、UA での挙動の確認に使われたし。ちなみに、負値から counter-reset プロパティで始めて直線的(+1)に増加していくが 10 以上は counter-reset プロパティで指数的(×10)に増加させている。
本項では実用上は稀なカウンタ値の桁数まで表示させているので、padding-left: 80px などとしているが、他の 80px を含めて 40px 辺りに書き換えれば、実用上は問題ない。
その幅を超えた場合の挙動も興味深い。
固定文字列の before が Chrome, Safari で実現できている。
以下、UA でのサポート状況の確認に使われたし。
Firefox ではすべて用意されているようである。