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

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

リストマーカーの種類を指定するには、list-style-typeプロパティを使います。

list-style-typeプロパティは、ul要素、ol要素、li要素の他に、displayプロパティで list-item を指定した要素にも設定することができます。

サンプル

  • リスト1
  • リスト2
  • リスト3
<!-- html -->
<ul class="sample">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
/* css */
.sample {
list-style-type: disc;
}

マーカーの種類

説明サンプル
noneなし
  • リスト1
  • リスト2
  • リスト3
disc黒丸
  • リスト1
  • リスト2
  • リスト3
circle白丸
  • リスト1
  • リスト2
  • リスト3
square四角
  • リスト1
  • リスト2
  • リスト3
decimal数字
  • リスト1
  • リスト2
  • リスト3
upper-alphaアルファベット(大文字)
  • リスト1
  • リスト2
  • リスト3
lower-alphaアルファベット(小文字)
  • リスト1
  • リスト2
  • リスト3
upper-romanローマ数字(大文字)
  • リスト1
  • リスト2
  • リスト3
lower-romanローマ数字(小文字)
  • リスト1
  • リスト2
  • リスト3
decimal-leading-zero数字(2桁)
  • リスト1
  • リスト2
  • リスト3
lower-greekギリシャ文字(小文字)
  • リスト1
  • リスト2
  • リスト3
upper-latinラテン文字(大文字)
  • リスト1
  • リスト2
  • リスト3
lower-latinラテン文字(小文字)
  • リスト1
  • リスト2
  • リスト3
hebrewヘブライ数字
  • リスト1
  • リスト2
  • リスト3
armenianアルメニア数字
  • リスト1
  • リスト2
  • リスト3
georgianグルジア数字
  • リスト1
  • リスト2
  • リスト3
cjk-ideographic漢数字
  • リスト1
  • リスト2
  • リスト3
hiraganaひらがな
  • リスト1
  • リスト2
  • リスト3
katakanaカタカナ
  • リスト1
  • リスト2
  • リスト3
hiragana-irohaいろは(ひらがな)
  • リスト1
  • リスト2
  • リスト3
katakana-irohaいろは(カタカナ)
  • リスト1
  • リスト2
  • リスト3

マーカーに色をつけることもできます

  • リスト1
  • リスト2
  • リスト3
<!-- html -->
<ul class="sample">
<li><span>リスト1</span></li>
<li><span>リスト2</span></li>
<li><span>リスト3</span></li>
</ul>
/* css */
.sample {
list-style-type: disc;
color: #f33;
}
.sample span {
color: #000;
}

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事