正直めんどくさい。
こんな感じ
ul,ol{
padding-left: 0;
list-style: none;
li{
padding-left: 3em;
font-size: 1rem;
line-height: 1.8;
position: relative;
&::before{
content: "";
display: block;
position: absolute;
left: 0;
}
}
}
ul{
> li{
&::before{
content: "●";
width: 3em;
top: calc(.9em - 5px);
}
}
}
ol{
counter-reset: num;
> li{
counter-increment: num;
&::before{
content: counter(num)".";
text-align: right;
width: 2.25em;
}
}
}共通項
li::beforeを使用することで任意のアイコンを付けることができる。
丁度いい場所に丁度良く配置するのがネックになるし、それがめちゃくちゃだるい。
ulについて
::beforeをどう扱うかという話になる。
::beforeは表示領域として使用して、文字なり画像なりを配置するのがベスト。
そうじゃないと、例えばborder-radius: 50%;で円を作ったら、1行目の真ん中に位置調整しないといけない。横位置はそこまで難しくないけど縦位置の調整に苦しむことになる。
というのは、line-heightを基準に位置決めをしないといけないから。
大体は文字サイズに倍率をつけて指定してるから、大体は1.5emとか1.8emとか2emとかになると思う。calc()を使えば計算はできるけど、ただただめんどくさい。
olについて
ulとは違ったところに面倒がある。
counter-resetを使って連番を出力するのだけど、それはまあ別にそこまで問題じゃない。
左詰めでいいなら気にするところじゃないけど。
「右詰めで作らなきゃ桁が増えたときに気持ち悪いことになる」という点、要するに装飾関係がだるい。
なので今回のサンプルでは、3emの幅の中で連番の右側に余白（.75em）を作るために::beforeの幅を2.25emとしている。
padding-leftについて
olで何桁のリストを作るかをあらかじめ想定する必要がある。
桁が枠を超えたら壊れるから。
1桁でいいならpadding-leftはもっと狭くても良い。
3桁まで作るつもりならもっと広げたほうが良い。
ulとolは別物だけど、アウトラインは一致させた方が見た目的によろしい。
なので、ulとolのpadding-leftは同じ値を放り込んだほうがいい。
じゃあ何を基準にするかといえば、上記の通り要因の多いolをベースにするのがよろしい感じがする。
用途はあるのか
地味にめっちゃある。
list-styleの色は<li>のcolorに影響される。
例えばこういうのがあったとして
<ul>
<li style="color: red;">aaaaaaaaaaa</li>
<li style="color: blue;">aaaaaaaaaaa</li>
<li style="color: green;">aaaaaaaaaaa</li>
</ul>styleは同じだけど全部色が違う。
狙ってやってるならいいけど普通そんなことはないので猛烈に気持ち悪い。
多分色が変わるタイミングがあるとしたら、生半可にwebをかじった人が装飾したときくらいか。
譲渡したならともかく、共同でそういう事が起きたらめちゃくちゃだるい。
だからはじめから仕様を決めちゃったら良いよね、という場合がひとつ。
もう一つは、標準の装飾じゃ小さくて嫌だという場合。
これも<li>のfont-sizeに準拠してるのだけど、装飾目的でデカくしてもろくなことにならない。
まあ要するに、装飾部分だけをピックアップしていじる手段がないということ。
コメント