list-style-type/マーカー種類

list-style-typeプロパティを使うとリストマーカーの種類を変更出来ます。

説明

 list-style-typeはリストのマーカーの記号を四角に変更したり、番号をローマ字にしたり、削除する設定が出来ます。

list-style-type説明

構文

 list-style-typeプロパティの構文は以下の通りです。

list-style-type: マーカー種類;

 マーカー種類は記号としては以下が指定出来ます。

【マーカー種類記号の指定】
記号 説明 表示例
disc 黒丸(デフォルト)
square 黒四角
circle 白丸
none なし

 マーカー種類は番号としては以下が指定出来ます。

【マーカー種類番号の指定】
番号種類 説明 表示例
decimal 10進数(デフォルト)
decimal-leading-zero 10進数
1桁の場合は先頭に0
lower-roman ローマ字小文字
upper-roman ローマ字大文字
lower-alpha アルファベット小文字
upper-alpha アルファベット大文字
lower-greek ギリシャ文字小文字
none なし
hiragana ひらがな
あいうえお順
katakana カタカナ
アイウエオ順
cjk-ideographic 漢字
hiragana-iroha ひらがな
いろはにほへと順
katakana-iroha カタカナ
イロハニホヘト順

 ひらがな(あいうおえ順)以降はInternetExplorer等、ブラウザによっては表示されません。

記号利用例

 list-style-typeの記号利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

ul {
list-style-type: none;
}

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

 上記を表示すると以下になります。

  • リスト
  • リスト
  • リスト

 マーカーが消えます。

 指定しない場合は、デフォルトで以下のように黒丸で表示されます。

  • リスト
  • リスト
  • リスト

番号種類利用例

 番号種類を指定した時の例は以下の通りです。

ol {
list-style-type: lower-alpha;
}

<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>

 上記を表示すると以下になります。

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

 マーカーがa. b. c.とアルファベット小文字で表示されます。

 指定しない場合は、デフォルトで以下のように10進数で表示されます。

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

入れ子

 入れ子にする場合は親は大文字、子は小文字等にすると分かり易くなります。

.t1 {
list-style-type: upper-roman;
}

.t2 {
list-style-type: lower-roman;
}

<ol class="t1">
<li>親リスト</li>
<ol class="t2">
<li>子リスト</li>
<li>子リスト</li>
<li>子リスト</li>
</ol>
<li>親リスト</li>
<li>親リスト</li>
</ol>

  1. 親リスト
    1. 子リスト
    2. 子リスト
    3. 子リスト
  2. 親リスト
  3. 親リスト

関連ページ

・ホームページ作成「リスト項目の挿入

 リスト項目の設定方法や装飾の方法等を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)