コーダー日誌
公開日：2019/11/08
順序に意味のあるコンテンツがリストなら、olを使ってこんなふうに表現すると思います。
例えば、①などという丸付き数字をリストマーカーとして使いたい場合、デフォルトのリストマーカーを非表示にして、UTF-8なら丸付き数字を直書き、それ以外なら文字コードで表示という方法もとれるとおもいます。
でも、リストが21個以上あったり、丸付き数字の丸を四角にしたいといったデザイン上の要望があった場合、どうしましょうか・・・。画像にするのもいいかもしれませんが、できれば自動的にナンバリングしてほしいですよね。
<ol class="counter">
<li>テキスト</li>
</ol>.counter{
counter-reset: css-counter;
list-style-type: none;
padding-left: 0;
}
.counter li::before{
counter-increment: css-counter;
content: counter(css-counter);
/* 装飾的なcssは省略 */
}counter-resetでカウンターに名前をつけて初期化します。子要素（ここではbefore疑似要素を使用）のcounter-incrementプロパティに親要素のcounter-resetプロパティでつけた名前を指定すると、表示される順番に1を加算していきます。
そして、contentにcounter関数を使って表示させます。このとき、例えば「位」「番目」などといったテキストも加えると、順位であることなどを表現できたりします。
また、cssを使ったナンバリングが素敵なのは、ol要素にこだわらなくてもいいところです。
<dl class="counter">
<div>
<dt>テキスト</dt>
<dd>テキスト</dd>
</div>
</dl>このようにdl+dtタグにも使えます（ここではdivタグも使っていますが、flexboxのために入れています）。
上のcssコード例のliをdtに変えれば同様に表示されます（flexboxなどは適宜設定してください）。
話はolリストに戻りますが、ちょっとおさらいです。
html5ではstart属性が普通に使えます。指定した番号から数えてくれます。
liタグにvalue属性を使えば、順番に関係なく特定の数字をマーカーとして表示させたり、途中から数えることもできます。
さらにreversed属性が追加されたので、降順で数えることもできます。
下はstart属性も組み合わせて、100から降順で数えた例です。
<ol reversed="reversed" start="100">
<li>テキスト</li>
</ol>ただし、IEは11も含めreversed属性はサポートされていないので、昇順でしか数えてくれません。
また、Edgeも2019/11現在、サポートしていないようです。
なお、cssでナンバリング（CSSカウンターを使用）した場合、ol要素にreversed属性を使用しても降順にナンバリング表示してくれません。
ナンバリングには関係ないですが、それっぽいマーカーをcssで作ってみました。
<ul class="checkbox">
<li>テキスト</li>
<li class="nocheck">テキスト</li>
</ul>タグはリストにこだわらなくて良いです。
.checkbox > *{
position: relative;
padding-left: 2em;
}
.checkbox > *::before,
.checkbox > *::after {
content: '';
position: absolute;
line-height: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.checkbox > *::before { /* チェックボックス */
width:0.8em;
height:0.8em;
background-color:#fff;
border:solid 1px #ccc;
margin-top:0.45em;
}
.checkbox > *::after { /* チェック */
border-left: 0;
border-top: 0;
border-bottom:0.16em solid #f06c00;
border-right: 0.16em solid #f06c00;
transform: rotate(42deg);
width:0.5em;
height:0.8em;
margin-top:0.2em;
left: 0.3em;
}
.checkbox > *.nocheck::after{ /* チェックなし */
border:0;
margin:0;
}これだと、テキストが増えたとき、チェックボックスマーカーは左上に位置するので、たとえば垂直方向に真ん中で表示させたい場合は、位置を適当にずらしてください。
.checkbox > *.mid::before{
top:50%;
margin-top:-0.6em;
}
.checkbox > *.mid::after{
top:50%;
margin-top:-0.85em;
}この例では、liタグにclass[mid]を追加しています。
line-heightの値（ここでは1.8）とかで、位置は微妙にずれると思うので数字を入れて微調整してもいいし、calcとかsassの演算とか駆使して、いい感じにしてください。
以下は参考にした記事です。
こんな感じに、cssだけでマーカーに使えそうな図形を作成できます。
もちろん、webフォントやsvgなどの画像を使った方が簡単だったりすると思いますが、こういった選択肢もあると知っていることは、引き出しが増えて良いんじゃないかなと思います。
go to homeindex