▲TOPへ戻る

【CSS】リストに番号や記号を自動で割り振るolとli、list-styleの設定

list-style

list-styleとは?

リストに番号や記号を自動で割り振るlist-styleの使い方を紹介します。

下のサンプルのいろいろな値を変えて、違いを確かめてみてください。

  1. リスト1
  2. リスト2
  3. リスト3

HTML

ポイント : liolで囲むこと。

<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のプロパティは限られているので注意!

::markerについて
ol li::marker {
  color: red;
  font-size: 1.5rem
}

もっと装飾したい場合

list-style

このように装飾したい場合は、以下を参照してください。

参考

css
【CSS】リスト番号を自動で表示する方法

まとめ

  1. <ol>で<li>を囲む。
  2. list-styleでいろいろな数字、記号が選択できる。
  3. ::markerにあてられるCSSは限られる。

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

パソコン

javascript

カメラ

ブログ

サイト内検索👇