リストのマーカーの種類を指定する

CSS - list-style-type

概要

CSSプロパティ「list-style-type」は、リストの先頭に対して、中点などマーカーの種類を指定します。またマーカーに画像を指定したい場合は list-style-image を利用します。

<p>好きな動物リストです</p>
<ul>
  <li class="circle">ネコ</li>
  <li class="square">犬</li>
  <li class="disc">ウサギ</li>
</ul>
<style>
.circle {
  list-style-type: circle;
}
.square {
 list-style-type: square;
}
.disc {
 list-style-type: disc;
}
</style>

取りうる値

キーワードを指定します。様々なキーワードが用意されてますがブラウザによって適用されない場合もあるので気をつけましょう。

{ list-style-type: キーワード;}
キーワード説明
noneこれが初期値です。マーカーがつきません
disc黒い丸です。
circle白抜きの丸です。
square黒い四角です。
decimal1,2,3..のような数字です
decimal-leading-zero 01,02などのように先頭に0のつく数字です
lower-romani, ii, iii..のような小文字のローマ数字です
upper-romanI, II, III...のような大文字のローマ数字です
lower-greekα, β, γ...のような小文字のギリシャ数字です
upper-alphaA, B, C,大文字のギリシャ数字です
lower-latina, b, c...のような小文字のラテン文字です
upper-latinA, B, C...のような大文字のラテン文字です
lower-alphaa,b,c...のような小文字のアルファベットです
cjk-ideographic一萬一千一百一のような漢数字です。trad-chinese-informalと同義
hiragana『あいうえお』が付きます。
katakana『アイウエオ』が付きます。
hiragana-iroha『いろはにほへと』が付きます。
katakana-iroha『イロハニホヘト』が付きます。
hebrewヘブライ数字が付きます。
armenianアルメニア数字が付きます。
georgianグルジア数字が付きます。

各値の表示例

確認するブラウザによって表示が異なる場合がありますので、使用する際には気をつけましょう。

<p>list-style-typeの種類</p>
<ul>
  <li class="none">noneを指定</li>
  <li class="disc">discを指定</li>
  <li class="circle">circleを指定</li>
  <li class="square">squareを指定</li>
  <li class="decimal">decimalを指定</li>
  <li class="decimal-leading-zero">decimal-leading-zeroを指定</li>
  <li class="lower-roman">lower-romanを指定</li>
  <li class="upper-roman">upper-romanを指定</li>
  <li class="lower-greek">lower-greekを指定</li>
  <li class="upper-alpha">upper-alphaを指定</li>
  <li class="lower-latin">lower-latinを指定</li>
  <li class="upper-latin">upper-latinを指定</li>
  <li class="lower-alpha">lower-alphaを指定</li>
  <li class="cjk-ideographic">cjk-ideographicを指定</li>
  <li class="hiragana">hiraganaを指定</li>
  <li class="katakana">katakanaを指定</li>
  <li class="hiragana-iroha">hiragana-irohaを指定</li>
  <li class="katakana-iroha">katakana-irohaを指定</li>
  <li class="hebrew">hebrewを指定</li>
  <li class="armenian">armenianを指定</li>
  <li class="georgian">georgianを指定</li>
</ul>
<style>
  .none {list-style-type: none;}
  .disc {list-style-type: disc;}
  .circle {list-style-type: circle;}
  .square {list-style-type: square;}
  .decimal {list-style-type: decimal;}
  .decimal-leading-zero {list-style-type: decimal-leading-zero;}
  .lower-roman {list-style-type: lower-roman;}
  .upper-roman {list-style-type: upper-roman;}
  .lower-greek {list-style-type: lower-greek;}
  .upper-alpha {list-style-type: upper-alpha;}
  .lower-latin {list-style-type: lower-latin;}
  .upper-latin {list-style-type: upper-latin;}
  .lower-alpha {list-style-type: lower-alpha;}
  .cjk-ideographic {list-style-type: cjk-ideographic;}
  .hiragana {list-style-type: hiragana;}
  .katakana {list-style-type: katakana;}
  .hiragana-iroha {list-style-type: hiragana-iroha;}
  .katakana-iroha {list-style-type: katakana-iroha;}
  .hebrew {list-style-type: hebrew;}
  .armenian {list-style-type: armenian;}
  .georgian {list-style-type: georgian;}
</style>

 

list-styleに関連のプロパティ一覧

プロパティ名説明
list-styleマーカーに関する指定をまとめて行うショートハンド
list-style-imageマーカーに画像を指定する
list-style-typeマーカー文字の種類を指定する
list-style-positionマーカー文字の位置を指定する
marker-offsetマーカーとの間隔を指定する

使用例

リストの階層で表示するマーカーを分けた例です。

<p>猫と犬の種類</p>
<ul>
  <li class="square">
    <p>猫</p>
    <ul class="decimal">
      <li>シャム</li>
      <li>メインクーン</li>
    </ul>  
  </li>
  <li class="square">
    <p>犬</p>
    <ul class="decimal">
      <li>シャム</li>
      <li>メインクーン</li>
    </ul>  
  </li>
</ul>
<style>
  .square {
    list-style-type: square;
  }
  .decimal > li {
    list-style-type: decimal;
  }
</style>

仕様書

関連CSSプロパティ