ul要素とli要素で作るリストでは、各項目の先頭に「箇条書きを示す記号」が表示されます。たいていは黒丸記号が使われますが、白丸や四角にすることもできます。

黒丸記号はありふれてるから何か変更したいなあ、と思うものの、先頭記号用の画像を作成するほどではないなあ……という場合には、白丸や四角記号に変更してみると良いかも知れません。(そもそも、2階層目や3階層目など階層を深くすると、自動的に白丸や四角が使われたりもしますが。)

何も指定せずにHTMLでリストを作った場合、以下のように表示されます。

代表的なブラウザでは、黒丸記号が項目の前に付加されるようです。この記号は、スタイルシートで簡単に変更できます。

リスト(箇条書き)の先頭記号を丸ではなく四角にする

例えば四角形にするには、以下のようにCSSソースを記述します。

ul {
   list-style-type: square;
}

list-style-typeプロパティは、リストの先頭記号を指定するプロパティです。上記のソースでは、値に「square」を指定しているので、すべてのリストの先頭記号が四角になります。表示例は下記の通りです。

上記のCSSソースでは、箇条書きリストを作っている「ul要素」を対象に指定しています。しかし、リスト項目自体はli要素で作られているので、li要素に対して指定しても構いません。(ただ、li要素は箇条書きリスト以外に「ol要素で作る番号付きリスト」の各項目にも使われるので、なんとなくul要素に対して指定してみました。)

リストの先頭記号を黒丸にしたり白丸にしたり四角にしたりする例

list-style-typeプロパティの値には、「disc」を指定すれば黒丸、「circle」を指定すれば白丸、「square」を指定すれば四角で表示されます。「none」を指定することで、先頭記号をなくすこともできます。
それぞれを指定してみた例は、以下の通りです。

li.sample1 { list-style-type: disc; }
li.sample2 { list-style-type: circle; }
li.sample3 { list-style-type: square; }
li.sample4 { list-style-type: none; }

表示例は以下の通りです。

先頭記号を非表示にした場合でも、リストの中身の掲載位置は変化しません。左側にできる余計な余白を消したい場合は、リストそのものを作っている要素(ul要素やol要素)に対して余白量をゼロにして下さい。

階層に応じて記号を変化させたい場合

なお、例えばIEやFirefoxのデフォルトでの表示だと、リストの階層に応じて先頭記号が変化します。1階層名は黒丸、2階層目は白丸、3階層目以降は四角……になるようです。どんな順序で何が使われるかは決まっているわけではないので環境によって異なる可能性があります。どの階層も全部黒丸で表示するブラウザもあります。

冒頭のCSSソースを使って先頭記号を指定すると、1階層目以降すべての階層で同じ記号が使われます。なぜなら、list-style-typeプロパティの値は子要素に継承されるからです。

階層に応じて変化させたい場合は、以下のような感じでCSSソースを書くと良いでしょう。

ul { list-style-type: square; /* 1階層目 */ }
ul ul { list-style-type: disc; /* 2階層目 */ }
ul ul ul { list-style-type: circle; /* 3階層目以降 */ }

上記のスタイルシートだと、1階層目に四角、2階層目に黒丸、3階層目以降に白丸を指定しています。
実際に表示させてみると、以下のように見えます。

なお、リストの先頭記号には「自分で用意した画像」を使うこともできます。その方法は、別途「リストの先頭記号に画像を使う」で紹介しています。1つのリストの中で、画像と記号を併用することもできます。例えば、1階層目のリストには画像を使い、2階層目以降は記号を使う……といったことも可能です。

また、今回使ったlist-style-typeプロパティは、記号を指定するだけではなく、番号付きリストで使う数字の種類を指定する際にも使います。それについては、別途「番号付きリストをローマ数字にする」などをご参照下さい。

(更新日：2016年02月06日)