番号つきリリスト（list-style-type,padding-left）
<html>
<head>
<title>リストスタイル</title>
<style type="text/css">
<!--
.ol1 {
list-style-type: decimal; /* 数字 */
}
.ol2 {
list-style-type: lower-alpha; /* アルファベット（小文字） */
}
.ol3 {
list-style-type: upper-alpha; /* アルファベット（大文字） */
}
.ol4 {
list-style-type: lower-roman; /* ローマ数字（小文字） */
}
.ol5 {
list-style-type: upper-roman; /* ローマ数字（大文字） */
}
.ol6 {
list-style-type: upper-roman;
}
.ol6 li {
padding-left: 30px; /* 間隔 */
}
.ol7 {
list-style-type: lower-alpha;
list-style-position: inside; /* 要素内に表示 */
border: 1px solid #666;
}
.ol8 {
list-style-type: lower-alpha;
list-style-position: outside; /* 要素外に表示 */
border: 1px solid #666;
}
.ol9 {
list-style-type: none; /* なし */
}
//-->
</style>
</head>
<body>
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol1">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol2">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol3">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol4">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol5">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol6">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol7">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol8">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol9">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
</body>
</html>
〔 実行する 〕