list-style【リストスタイル】ショートハンドプロパティ
list-style-type【リストマーカー種類】
list-style-position【リストマーカー位置】
list-style-image【リストマーカー画像】

<ul style="list-style:circle outside none;">
  <li>項目１
  <li>項目２
</ul>

<ul style="list-style:square inside none;">
  <li>項目１
  <li>項目２
</ul>

<ul style="list-style:none inside url('image/sample-4color.gif');">
  <li>項目１
  <li>項目２
</ul>

<ol style="list-style:decimal-leading-zero outside none;">
  <li>項目１
  <li>項目２
</ol>

<ol style="list-style:upper-roman inside none;">
  <li>項目１
  <li>項目２
</ol>

<ul style="list-style-type:square;">
  <li>項目１
  <li>項目２
</ul>

<ol style="list-style-type:decimal-leading-zero;">
  <li>項目１
  <li>項目２
  <li value="99">項目９９
  <li value="100">項目１００
</ol>

<ol style="list-style-type:lower-roman;">
  <li>項目１
  <li>項目２
  <li value="5">項目５
  <li value="10">項目１０
  <li value="20">項目２０
  <li value="100">項目１００
</ol>

<div style="width:25%; border:thin black solid;">
  <ul style="list-style-position:inside;">
  <li>(inside) The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
  <li>(inside) The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
  </ul>
  <ul style="list-style-position:outside;">
  <li>(outside) The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
  <li>(outside) The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
  </ul>
</div>

<ul style="list-style-image:url('image/sample-4color.gif');">
  <li>項目１
  <li>項目２
</ul>

<ul>【項目番号なしリスト】
<ul id="list1">
  <li>項目１
  <li>項目２
  <li>項目３
  <li>項目４
  <li>項目５
</ul>
&lt;ol&gt;【項目番号ありリスト】
<ol id="list2">
  <li>項目１
  <li>項目２
  <li>項目３
  <li value="10">項目１０
  <li value="99">項目９９
  <li value="100">項目１００
</ol>

list-style-type【リストマーカー種類】&lt;ul&gt;：<select onchange="changeStyle(this, 0);" style="font-size:large; background-color:lightyellow;">
  <option value="none">none 【表示なし】
  <option value="circle">circle 【白丸：○】
  <option value="disc" selected>disc 【黒丸：●】
  <option value="disclosure-closed">disclosure-closed 【閉じる】
  <option value="disclosure-open">disclosure-open 【開く：▼】
  <option value="square">square 【黒四角：■】
</select>
<br>
list-style-type【リストマーカー種類】&lt;ol&gt;：<select onchange="changeStyle(this, 1);" style="font-size:large; background-color:lightyellow;">
  <option value="cjk-decimal">cjk-decimal 【中日韓-数字：一,二,三,…】
  <option value="cjk-earthly-branch">cjk-earthly-branch 【中日韓-干支：子,丑,寅,…】
  <option value="cjk-heavenly-stem">cjk-heavenly-stem 【中日韓-十干：甲,乙,丙,…】
  <option value="cjk-ideographic">cjk-ideographic 【中日韓-表意文字：,…】
  <option value="decimal-leading-zero">decimal-leading-zero 【0埋め数字：01,02,03,…】
  <option value="decimal" selected>decimal 【数字：1,2,3,…】
  <option value="hiragana-iroha">hiragana-iroha 【ひらがな (いろは)：い,ろ,は,…】
  <option value="hiragana">hiragana 【ひらがな：あ,い,う,…】
  <option value="japanese-formal">japanese-formal 【日本語 (公式)：壱,弐,参,…】
  <option value="japanese-informal">japanese-informal 【日本語 (非公式)：一,二,三,…】
  <option value="katakana-iroha">katakana-iroha 【カタカナ (イロハ)：イ,ロ,ハ,…】
  <option value="katakana">katakana 【カタカナ：ア,イ,ウ…】
  <option value="lower-alpha">lower-alpha 【小文字アルファベット：a,b,c,…】
  <option value="lower-greek">lower-greek 【小文字ギリシャ文字：α,β,γ,…】
  <option value="lower-latin">lower-latin 【小文字ラテン文字：a,b,c,…】
  <option value="lower-roman">lower-roman 【小文字ローマ数字：i,ii,iii,…】
  <option value="upper-alpha">upper-alpha 【大文字アルファベット：A,B,C,…】
  <option value="upper-latin">upper-latin 【大文字ラテン文字：A,B,C,…】
  <option value="upper-roman">upper-roman 【大文字ローマ数字：I,II,III,…】
</select>
<br>
list-style-position【リストマーカー位置】：<select onchange="changeStyle(this, 2);" style="font-size:large; background-color:lightyellow;">
  <option>inside
<option selected>outside
</select>
<br>
list-style-image【リストマーカー画像】：<select onchange="changeStyle(this, 3);" style="font-size:large; background-color:lightyellow;">
  <option>画像
  <option selected>none
</select>

<script>
/**
 * リストスタイル 変更
 * @param {HTMLSelectElement} ctrl コントロール
 * @param {number} type 変更種類
 */
function changeStyle(ctrl, type) {
  var list1 = document.getElementById("list1");
  var list2 = document.getElementById("list2");
  switch (type) {
  case 0:
    list1.style.listStyleType = ctrl.value;
    break;
  case 1:
    list2.style.listStyleType = ctrl.value;
    break;
  case 2:
    list1.style.listStylePosition = ctrl.value;
    list2.style.listStylePosition = ctrl.value;
    break;
  case 3:
    var image = (ctrl.value == "none") ? ctrl.value : "url('image/sample-4color.gif')";
    list1.style.listStyleImage = image;
    list2.style.listStyleImage = image;
    break;
  }
}
</script>