"CSS Tips Factory" : Presented by Nishishi via WordPress.

リストの先頭記号を白丸や四角にする [リスト]

ul要素とli要素で作るリストでは、各項目の先頭に記号が表示されます。たいてい黒丸記号が使われますが、白丸や四角にすることもできます。黒丸記号はありふれてるから何か変更したいなあ…と思うものの、先頭記号用の画像を作成するほどではないなあ……という場合には、白丸や四角記号に変更してみると良いかも知れません。

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

  • リスト項目1
  • たぶん先頭記号は黒丸

少なくとも、IE・Firefox・Operaでは黒丸記号が項目の前に付加されるようです。
これは、以下のようにスタイルシートを記述することで変更できます。

ul {
   list-style-type: square;
}

list-style-typeプロパティは、リストの先頭記号を指定するプロパティです。値に「disc」を指定すれば黒丸、「circle」を指定すれば白丸、「square」を指定すれば四角で表示されます。「none」を指定することで、先頭記号をなくすこともできます。
(各記号は、閲覧環境によっては表示できないものもあるかも知れません。)

上記のソースでは、値に「square」を指定しているので、すべてのリストの先頭記号が四角になります。
それぞれを指定してみた例は、以下の通り。

  • 黒丸(disc)記号を使ったリスト項目
  • 白丸(circle)記号を使ったリスト項目
  • 四角(square)記号を使ったリスト項目
  • 先頭記号を非表示にしたリスト項目

なお、IEやFirefoxのデフォルトでの表示だと、リストの階層に応じて先頭記号が変化します。1階層名は黒丸、2階層目は白丸、3階層目以降は四角…になるようです。(どんな順序で何が使われるかは、環境によって異なります。全部黒丸で表示するブラウザもあります。)
上記のスタイルシートで先頭記号を指定すると、1階層目以降すべての階層で、同じ記号が使われます。

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

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階層目のリスト
    • 2階層目のリスト
      • 3階層目のリスト
        • 4階層目のリスト

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

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

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。