スタイルシートリファレンス > list-style

スタイルシートリファレンス list-style


list-style マーカーの指定をまとめて行う (IE4/N4)

<ul><ol><li>タグで表示される、マーカーの指定をまとめて行います。

ブラウザによりサポート状況は異なります。


position

outside
外側:規定値
inside
内側


type

none(なし)


disc(点:規定値:)


circle(丸)


square(四角)


decimal(1 2 3)


decimal-leading-zero(01 02 03)


lower-roman(@ A B)


upper-roman(T U V)


lower-alpha(a b c)


upper-alpha(A B C)


lower-latin(a b c)


upper-latin(A B C)


lower-greek(α β γ)


hebrew(ヘブライ)


armenian(アルメニア)


georgian(グルジア)


cjk-ideographic(一 二 三)


hiragana(あ い う)


katakana(ア イ ウ)


hiragana-iroha(い ろ は)


katakana-iroha(イ ロ ハ)

▲ページ先頭へ

使用例 list-style

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.smp1 {
list-style: disc outside;
}
.smp2 {
list-style: disc inside;
}
.smp3 {
list-style: url(sample.gif) outside;
}
-->
</style>
</head>
<body>
disc outside
<ul class="smp1">
<li>リスト1<br>このように表示されます。</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<br>
disc inside
<ul class="smp2">
<li>リスト1<br>このように表示されます。</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<br>
url(sample.gif) outside
<ul class="smp3">
<li>リスト1<br>このように表示されます。</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<br>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


disc outside


disc inside



url(sample.gif) outside


▲ページ先頭へ

関連項目【リスト】

list-style
マーカーの指定をまとめて行う
list-style-type
マーカーの形を指定する
list-style-position
マーカーの位置を指定する
list-style-image
マーカーに画像を指定する
marker-offset ※
マーカとリストアイテムとの距離を指定する

▲ページ先頭へ

スタイルシートリファレンス > list-style