CSS講座

その他（リスト・テーブル）

list-style - リストの表示形式

リストの表示形式を指定します。

list-styleは、list-style-type、list-style-position、list-style-image の省略形です。

リスト要素に対しての設定を行うので、通常 ul、ol、li のいずれかに指定します。

type、position、imageをスペースで区切って指定します。順番に指定はありません。値は省略することもできます。

それぞれの値は、下の方に説明があります。とりあえず、サンプルを。

list-style: disc inside url("images/list_marker.png")

list-style-positionは、リストのマーカー表示される位置を指定します。

outoside（規定値）
マーカーはリスト要素のボックス（背景色が指定できる部分）の外側に表示される。
inside
マーカーはリスト要素のボックスの内側に表示される。

list-style-typeは、リストのマーカーを指定します。マーカーの種類とサンプルは、以下の通りです。

disc（ulの規定値）
黒丸
  • リストアイテム
  • リストアイテム
  • リストアイテム
circle
白丸
  • リストアイテム
  • リストアイテム
  • リストアイテム
square
四角
  • リストアイテム
  • リストアイテム
  • リストアイテム
decimal（olの規定値）
1, 2, 3 ・・・
  1. リストアイテム
  2. リストアイテム
  3. リストアイテム
lower-roman
ローマ数字（小文字）
  1. リストアイテム
  2. リストアイテム
  3. リストアイテム
upper-roman
ローマ数字（大文字）
  1. リストアイテム
  2. リストアイテム
  3. リストアイテム
lower-alpha
a, b, c ・・・
  1. リストアイテム
  2. リストアイテム
  3. リストアイテム
upper-alpha
A, B, C ・・・
  1. リストアイテム
  2. リストアイテム
  3. リストアイテム
none
マーカー無し
  • リストアイテム
  • リストアイテム
  • リストアイテム

list-style-type: lower-roman;

以上です。結構ありますよね。ただし、順番を持たないものはulに、順番を持つものは、olに指定した方が良いでしょう。

また、リストはネストすることが出来ましたよね。通常は、以下の様に表示されます。

  • リストアイテム
    • リストアイテム
      • リストアイテム
  1. リストアイテム
    1. リストアイテム
      1. リストアイテム

olの方が寂しいですね。

ol { list-style-tyle: decimal; }
ol ol { list-style-tyle: upper-roman; }
ol ol ol { list-style-tyle: upper-alpha; }

のように指定することで、少し気の利いた（？）リストになると思います。

  1. リストアイテム
    1. リストアイテム
      1. リストアイテム

list-style-positionは、マーカーの表示位置を指定するためのプロパティです。

違いが判りやすいように、背景色とボーダーを指定してあります。

outside（規定値）
list-style-position: outside;
  • リストアイテム リストアイテム リストアイテム
  • リストアイテム リストアイテム リストアイテム
  • リストアイテム リストアイテム リストアイテム
inside
list-style-position: inside;
  • リストアイテム リストアイテム リストアイテム
  • リストアイテム リストアイテム リストアイテム
  • リストアイテム リストアイテム リストアイテム

違いは・・・説明しにくいですね。とりあえず、違います。マーカーが リスト要素（この場合ul）の中に表示されるか、外に表示されるかの違いです。

list-style-imageプロパティは、マーカーにイメージファイルを指定する場合に使用します。・・・つまり、以下のようなことができるわけです。（ちなみに、上のマーカーイメージは、『豆』です。）

  • リストアイテム
  • リストアイテム
  • リストアイテム

ul { list-style-image: url("../pictures/bean.png"); }

ただし、このプロパティと一緒にline-heightプロパティが指定されている場合は、以下のように、マーカーがずれてしまいます。また、li要素にpaddingを指定した場合も同様に、マーカーがズレます。

  • リストアイテム
  • リストアイテム
  • リストアイテム

そのため、リストアイテム同士の間隔を広げる目的であれば、line-hegiht, paddingは使用せずに、li要素に上下のマージンを指定するのがいいでしょう。そうすれば、マーカーがずれることはありません。

上記問題は、IE6以前の不都合のようです。IE7以降や、Firefoxなどのブラウザではマーカーのズレは発生しないため、今後は素直に line-height プロパティを利用するのが良いでしょう。

border-collapse - セルの罫線の表示方法

セルの罫線を重ねて表示させるか、離して表示させるか指定をします。

指定できる値は、collapse, separate の２種類です。

separate
セルの罫線を離して表示させます。
border-collapse: separate;
separate の場合
ヘッダーヘッダー
データデータ
データデータ
collapse
セルの罫線を重ねて表示させます。
border-collapse: collapse;
collapse の場合
ヘッダーヘッダー
データデータ
データデータ

線を１本にしたい場合はborder-collapse: collapse;を指定してください。