17. リスト

ここでは、リスト(箇条書き)に関する主要なプロパティについて説明する。

list-style-typeプロパティ

list-style-typeプロパティ」は、箇条書きに使用するマーカーの種類を指定する。 その書式は以下のとおりである。

list-style-typeプロパティ
disc | circle | square | decimal | decimal-leading-zero| lower-roman | upper-roman | lower-greek | lower-latin | upper-latin| armenian | georgian | lower-alpha | upper-alpha | none | inherit
初期値disc
適用対象"displayプロパティ"が"list-item"の要素
継承する
パーセント値受けつけない

箇条書きのマーカーとして、つぎのようなマーカーが指定できる。(※ マーカーの指定は同じでも実際に表示される図形(グリフ)はブラウザによって異なる。 また、いくつかの指定が無視されるブラウザも存在する。)

disc
黒丸」を意味するが、実際の表示はブラウザによって異なる。
circle
白丸」を意味するが、実際の表示はブラウザによって異なる。
square
四角」を意味するが、実際の表示はブラウザによって異なる。
decimal
1から始まる10進数。
decimal-leading-zero
01、02、03のように最初に0が付く10進数。
lower-roman
小文字のローマ数字。
upper-roman
大文字のローマ数字。
lower-greek
小文字のギリシャ文字。
lower-latin、lower-alpha
小文字のアスキー文字(英字)。
upper-latin、upper-alpha
大文字のアスキー文字(英字)。
armenian
アルメニア数字。
georgian
グルジア数字。
none
マーカーを表示しない。

以下にサンプルのスタイルと、それを適用したHTMLコードおよび表示結果を示す。

ul li {
    display: list-item;
    list-style-type: disc;
}
ol li {
    display: list-item;
    list-style-type: lower-roman;
}
<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>
<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>

list-style-typeプロパティのサンプル表示

list-style-imageプロパティ

list-style-imageプロパティ」は、箇条書きに使用するマーカーに画像を指定する。 その書式は以下のとおりである。

list-style-imageプロパティ
<uri> | none | inherit
初期値none
適用対象"displayプロパティ"が"list-item"の要素
継承する
パーセント値受けつけない
<uri>
使用する画像のURIを指定する。画像が使用できる場合は、"list-style-type"で指定されたマーカーが画像に置き換わる。 また、画像が利用できない場合は、"list-style-type"で指定されたマーカーが使用される。
none
画像を使用しない。

以下にサンプルのスタイルと、それを適用したHTMLコードおよび表示結果を示す。

ul li {
    display: list-item;
    list-style-type: disc;
    list-style-image: url(images/marker.jpg);
}
<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

list-style-imageプロパティのサンプル表示

list-style-positionプロパティ

list-style-positionプロパティ」は、マーカーの表示位置を指定する。 その書式は以下のとおりである。

list-style-positionプロパティ
inside | outside | inherit
初期値outside
適用対象"displayプロパティ"が"list-item"の要素
継承する
パーセント値受けつけない
inside
マーカーは、ボックスの外側に配置される。
outside
マーカーは、ボックスの内側に配置される。

以下にサンプルのスタイルと、それを適用したHTMLコードおよび表示結果を示す。

ul li {
    display: list-item;
    border: 1px solid #000;
    list-style-type: disc;
}
ul li.inside  { list-style-position: inside; }
ul li.outside { list-style-position: outside; }
<ul>
    <li class="inside">項目1</li>
    <li class="outside">項目2</li>
</ul>

list-style-positionプロパティのサンプル表示

list-styleプロパティ

list-styleプロパティ」は、"list-style-typeプロパティ"、"list-style-imageプロパティ"、"list-style-positionプロパティ"を一括指定する簡略記法である。 その書式は以下のとおりである。

list-styleプロパティ
[ <'list-style-type'> || <'list-style-position'>|| <'list-style-image'> ] | inherit
初期値各プロパティを参照する
適用対象"displayプロパティ"が"list-item"の要素
継承する
パーセント値受けつけない

以下にサンプルのスタイルと、それを適用したHTMLコードおよび表示結果を示す。

ul li {
    display: list-item;
    border: 1px solid #000;
    list-style: disc url(images/marker.jpg) inside;
}
<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

list-styleプロパティのサンプル表示

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.