本サイトはアフィリエイト広告を利用しています

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でスタイルを指定します。

- □ ×

  • Word
  • Excel
  • PowerPoint

リストマークを消す

ul{
   list-style-type: none;
}

- □ ×

  • Word
  • Excel
  • PowerPoint

白丸

ul{
   list-style-type: circle;
}

- □ ×

  • Word
  • Excel
  • PowerPoint

list-style-type: リストマーカー一覧

説明ブラウザ対応状況
none表示しない(C2/e/Fx/Ch/Op/Sa)
disc黒丸(●)(既定値)(C2/e/Fx/Ch/Op/Sa)
circle白丸(○)(C2/e/Fx/Ch/Op/Sa)
square黒四角(■)(C2/e/Fx/Ch/Op/Sa)
decimal数字(1, 2, 3…)(C2/e/Fx/Op/Sa)
decimal-leading-zero0付き数字(01, 02, 03…)(C2/e/Fx/Ch/Op/Sa)
cjk-ideographic漢数字(一、二、三、、、)(C3/Fx/Ch/Sa)
lower-roman小文字ローマ数字(i, ii, iii…)(C2/e/Fx/Ch/Op/Sa)
upper-roman大文字ローマ数字(I, II, III…)(C2/e/Fx/Ch/Op/Sa)
upper-alpha大文字アルファベット(A, B, C…)(C2/e/Fx/Ch/Op/Sa)
hiraganaひらがな(あ、い、 う…)(C2/Fx/Ch/Sa)
hiragana-irohaひらがな-いろは(い、ろ、 は…)(C2/Fx/Ch/Sa)
katakanaカタカナ(ア、イ、 ウ…)(C2/Fx/Ch/Sa)
katakana-irohaカタカナ-イロハ(イ、 ロ、 ハ…)(C2/Fx/Ch/Sa)

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

list-style との違い

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

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

  • list-style-image
  • list-style-position
  • list-style-type

list-style プロパティの使い方

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

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

記述順序は任意です。

.list{
   list-style: disc outside;
}

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

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

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

一括指定プロパティを使う時の注意点

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

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

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

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


- スポンサーリンク -
HTML&CSS
タイトルとURLをコピーしました