XHTML/CSS・トップ | CSSプロパティ・目次

●リストマークの種類

 list-style-typeはリストのマーカー、番号の形、タイプを指定するプロパティです。指定できる値はいろいろな種類がありますが、どのブラウザも対応しているバグのないものを表にまとめてあります。

■リストマークの種類一覧表

list-style-typeプロパティの値
コメント
none リストマークの表示なし
circle 小さくて線で描かれる丸
decimal 算用数字、アラビア数字
disc 小さくて塗りつぶされた丸
lower-alpha 小文字のアルファベット
lower-roman 小文字のローマ数字
square 小さい四角形
upper-alpha 大文字のアルファベット
upper-roman 大文字のローマ数字

【サンプル】↓


【CSS】↑↓

ul {
  list-style-type: square;
}

【HTML】↓

<ul>
 <li>値に square を指定しています。
 <li>←リストマークが四角形です。
</ul>


【サンプル】↓

  1. 値に lower-alpha を指定しています。
  2. ←リストマークが小文字のアルファベット順に並びます。

【CSS】↑↓

ol {
  list-style-type: lower-alpha;
}

【HTML】↓

<ol>
  <li>値に lower-alpha を指定しています。
  <li>←リストマークが小文字のアルファベット順に並びます。
</ol>




【総括】↓

・list-style-typeのプロパティはリストとなる要素にすべて適用できますので、基本的に ul要素(番号なしリスト)、ol要素(番号付きリスト)、li要素(リスト項目)のいずれにも適用することができます。ただし、li要素は ul要素か ol要素の入れ子として配置してください。

・厳密にはリストのマークが番号なしの場合は ul要素に適用し、マークが数字順、ABC順など順番がある場合は ol要素に適用します。

・list-style-imageのプロパティ(リストマークの画像指定)と重複した場合はlist-style-imageプロパティが優先されます。画像が表示されない環境などlist-style-imageプロパティが有効でない場合は list-style-typeプロパティで指定した値が反映されます。

・リスト項目とリスト項目の行間が狭い場合は下マージン(margin-bottomプロパティ) を使うと良いでしょう。


【CSS】↓

li { margin-bottom: 1em; } 

※実数値は調整してみてください。また、そのほかの単位も使えます。

【HTML】↓

<ul>
 <li>リスト項目
 <li>リスト項目
 <li>リスト項目
</ul>

・実際に指定するときはクラス名を使ったほうが実用的でしょう。クラス名の使い方は関連ページおよび、ここのWebページのソースを参照にしてください。(実際はクラス名を使って解説しています。)


【補足】↓

 次のように li要素を ul要素(または ol要素)で囲むとある程度、リスト項目とリスト項目のすき間が適度になります。


【CSS】↓

ul {
  list-style-type: square;
}

【HTML】↓

<ul>
 <li>値に square を指定しています。
</ul>
<ul>
 <li>←リストマークが四角形です。
</ul>

※↑文書を構造的にスッキリさせるという点においては li要素を並べたほうが優れていると言えます。リスト項目とリスト項目との行間の幅はCSSのスタイルシートを適用させましょう。それに数字やアルファベット、ローマ数字の場合、この形で使うと順番に表示されません。間に ulのタグ( </ul>、<ul>)や olのタグを入れてしまうと数字、アルファベット、ローマ数字が連続して表示されませんのでご注意ください。

■関連ページ

■テイクノート

・リストはいくらでも入れ子にすることはできますが、アクセシビリティの観点からできるだけシンプルにすることをおすすめします。

・ul要素、ol要素、li要素はHTML 4.01、XHTML 1.0 Transitional および、Framesetのみ使えます。

XHTML/CSS・目次 | リスト・目次

Copyright (C) 2005-2007 http://www.xml.vc/