リストスタイル（list-style-type,list-style-image,）
<html>
<head>
<title>リストスタイル</title>
<style type="text/css">
<!--
.ul1 {
list-style-type: disc; /* 黒丸 */
}
.ul2 {
list-style-type: circle; /* 白丸 */
}
.ul3 {
list-style-type: square; /* 四角 */
}
.ul4 {
list-style-type: square;
}
.ul4 li {
padding-left: 30px; /* 間隔 */
}
.ul5 {
list-style-type: none; /* なし */
}
.ul6 {
list-style-image: url("../../sample/img/img2.gif"); /* 画像 */
}
.ul7 {
list-style-type: circle;
list-style-position: inside; /* 要素内に表示 */
border: 1px solid #666;
}
.ul8 {
list-style-type: circle;
list-style-position: outside; /* 要素外に表示 */
border: 1px solid #666;
}
//-->
</style>
</head>
<body>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul1">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul2">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul3">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul4">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul5">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul6">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul7">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul8">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</body>
</html>
〔 実行する 〕