ホームページの基礎（2. CSS 編）

2.17 リスト

このページでは，リスト（箇条書き）に関する主なプロパティについて説明します。

2.17.1 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>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ul>
<ol>
    <li>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ol>

CSS総目次 | ページ先頭に戻る

2.17.2 list-style-imageプロパティ

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

list-style-imageプロパティ
値	<uri> | none | inherit
初期値	none
適用対象	"displayプロパティ"が"list-item"の要素
継承	する
パーセント値	受けつけない

<uri>

使用する画像のURIをurl()関数方式で指定します。画像が使用できる場合は，"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>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ul>

CSS総目次 | ページ先頭に戻る

2.17.3 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">項目１</li>
    <li class="outside">項目２</li>
</ul>

CSS総目次 | ページ先頭に戻る

2.17.4 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>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ul>

CSS総目次 | ページ先頭に戻る