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

メモ 構文 (動的変更) 関連

メモ

構文 (※記述方法)

ショートハンドプロパティ
list-style:
    list-style-type (リストマーカー種類)
|| list-style-position (リストマーカー位置)
|| list-style-image (リストマーカー画像)
リストスタイル
リストマーカー種類
list-style-type:
list-style-type (リストマーカー種類)
動的変更例
   none【表示なし】
| 《string【文字列】》
| symbols()【カウンタシンボル】

| circle【白丸:○】
| disc【黒丸:●】
| square【黒四角:■】

| cjk-decimal【中日韓-数字:一,二,三,…】
| cjk-earthly-branch【中日韓-干支:子,丑,寅,…】
| cjk-heavenly-stem【中日韓-十干:甲,乙,丙,…】
| cjk-ideographic【中日韓-表意文字:,…】
| decimal【数字:1,2,3,…】
| decimal-leading-zero【0埋め数字:01,02,03,…】
| disclosure-closed【閉じる】
| disclosure-open【開く】
| hiragana-iroha【ひらがな (いろは):い,ろ,は,…】
| hiragana【ひらがな:あ,い,う,…】
| japanese-formal【日本語 (公式):壱,弐,参,…】
| japanese-informal【日本語 (非公式):一,二,三,…】
| katakana-iroha【カタカナ (イロハ):イ,ロ,ハ,…】
| katakana【カタカナ:ア,イ,ウ…】
| lower-alpha【小文字アルファベット:a,b,c,…】
| lower-greek【小文字ギリシャ文字:α,β,γ,…】
| lower-latin【小文字ラテン文字:a,b,c,…】
| lower-roman【小文字ローマ数字:i,ii,iii,…】
| upper-alpha【大文字アルファベット:A,B,C,…】
| upper-latin【大文字ラテン文字:A,B,C,…】
| upper-roman【大文字ローマ数字:I,II,III,…】
| ・・・
| その他 (参照:CSS Counter Styles Level 3)
リストマーカー種類
リストマーカー位置
list-style-position:
list-style-position (リストマーカー位置)
動的変更例
   inside【内側】
| outside【外側】
リストマーカー位置
リストマーカー画像
list-style-image:
list-style-image (リストマーカー画像)
動的変更例
   《image【画像】》
| none
リストマーカー画像

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

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

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

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

<ol style="list-style:upper-roman inside none;">
  <li>項目1
  <li>項目2
</ol>
  • 項目1
  • 項目2
  • 項目1
  • 項目2
  • 項目1
  • 項目2
  1. 項目1
  2. 項目2
  1. 項目1
  2. 項目2
<ul style="list-style-type:square;">
  <li>項目1
  <li>項目2
</ul>

<ol style="list-style-type:decimal-leading-zero;">
  <li>項目1
  <li>項目2
  <li value="99">項目99
  <li value="100">項目100
</ol>

<ol style="list-style-type:lower-roman;">
  <li>項目1
  <li>項目2
  <li value="5">項目5
  <li value="10">項目10
  <li value="20">項目20
  <li value="100">項目100
</ol>
  • 項目1
  • 項目2
  1. 項目1
  2. 項目2
  3. 項目99
  4. 項目100
  1. 項目1
  2. 項目2
  3. 項目5
  4. 項目10
  5. 項目20
  6. 項目100

<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>

  • (inside) The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
  • (inside) The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
  • (outside) The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
  • (outside) The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
<ul style="list-style-image:url('image/sample-4color.gif');">
  <li>項目1
  <li>項目2
</ul>
  • 項目1
  • 項目2
&lt;ul&gt;【項目番号なしリスト】
<ul id="list1">
  <li>項目1
  <li>項目2
  <li>項目3
  <li>項目4
  <li>項目5
</ul>
&lt;ol&gt;【項目番号ありリスト】
<ol id="list2">
  <li>項目1
  <li>項目2
  <li>項目3
  <li value="10">項目10
  <li value="99">項目99
  <li value="100">項目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>

<ul>【項目番号なしリスト】
  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5
<ol>【項目番号ありリスト】
  1. 項目1
  2. 項目2
  3. 項目3
  4. 項目10
  5. 項目99
  6. 項目100
list-style-type【リストマーカー種類】<ul>:
list-style-type【リストマーカー種類】<ol>:
list-style-position【リストマーカー位置】:
list-style-image【リストマーカー画像】: