list-style-type:箇条書きリストマーク【記号一覧】

HTMLのul、ol要素を使って箇条書きリストを作る際、CSSプロパティ list-style-type を使ってリストの先頭に付けるマーカーや数字の種類を指定できます。

指定できる値のうち、日本語文書で使われるものに絞って一覧にしています。

「list-style-type」指定方法サンプル

セレクタ {list-style-type: 値;}

<ul>
   <li>Word</li>
   <li>Excel</li>
   <li>PowerPoint</li>
</ul>

HTMLは全て同じ記述です。ulタグに対して、CSSでスタイルを指定します。

ブラウザ表示

ul{
   list-style-type: none;
}

ブラウザ表示

ul{
   list-style-type: circle;
}

ブラウザ表示

<ol>には、項目番号のタイプを指定するtype属性がありましたが、HTML5.0で廃止されています。

list-styleプロパティは、リストマーカーを一括指定するプロパティです。これひとつで全てのリストプロパティを指定できます。

指定できるのは、次のプロパティです。

list-styleで指定する場合、各プロパティは半角スペースで区切って指定します。

ただし、noneを単独で指定すると、list-style-image、list-style-typeプロパティの両方に適用されて、リストマーカーが表示されなくなります。

記述順序は任意です。

Sample

.list{
   list-style: disc outside;
}

もしこれを個別指定プロパティで指定すると、次のようになります。

Sample

.list{
   list-style-type: disc;
   list-style-position: outside;
}

同じスタイルの指定でも、一括指定プロパティを使ったほうがシンプルになりますね。

一括指定プロパティは、ひとつのプロパティで3つの項目を指定できるので便利ですが、指定されなかった値は初期値に設定されます。

ということは、先にlist-styleの指定があるにもかかわらず、後からlist-styleを追加してしまうと、前の指定は上書きされてしまいます。変えるつもりのなかった値が初期値に戻ってしまいます。

そういった事態を防ぐために、場面によっては個別指定プロパティを使います。

特にWordPressのようにテーマによってサイトがデザインされたものは、気づかない場面で他の設定に影響することがあります。リストマークだけの変更を目的にしている場合は、個別指定プロパティのlist-style-typeを使うほうが安全です。

あわせて読みたい