【CSS】リストに番号や記号を自動で割り振るolとli、list-styleの設定
list-styleとは？
リストに番号や記号を自動で割り振るlist-styleの使い方を紹介します。
下のサンプルのいろいろな値を変えて、違いを確かめてみてください。
- リスト1
- リスト2
- リスト3
HTML
ポイント : liをolで囲むこと。
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>CSS
基本
ol : margin, paddingはお好みで。
list-style : 使いそうなものを列挙しましたが、実際は1つを選んでください。
ol {
margin: 30px;
padding: 50px;
}
li {
list-style: disc;
list-style: circle;
list-style: square;
list-style: lower-roman;
list-style: upper-roman;
list-style: decimal;
list-style: decimal-leading-zero;
list-style: lower-latin;
list-style: lower-alpha;
list-style: upper-latin;
list-style: upper-alpha;
list-style: cjk-ideographic;
list-style: hiragana;
list-style: katakana;
list-style: hiragana-iroha;
list-style: katakana-iroha;
list-style: disclosure-open;
list-style: disclosure-closed;
}::markerのCSS
割り振られた数字や記号は疑似要素::markerで表されています。
::markerにあてられるCSSのプロパティは限られているので注意！
ol li::marker {
color: red;
font-size: 1.5rem
}もっと装飾したい場合
このように装飾したい場合は、以下を参照してください。
参考
【CSS】リスト番号を自動で表示する方法
まとめ
- <ol>で<li>を囲む。
- list-styleでいろいろな数字、記号が選択できる。
- ::markerにあてられるCSSは限られる。
