| ショートハンドプロパティ | ||
|---|---|---|
| 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>項目１
<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>
<ol>【項目番号ありリスト】
<ol id="list2">
<li>項目１
<li>項目２
<li>項目３
<li value="10">項目１０
<li value="99">項目９９
<li value="100">項目１００
</ol>
list-style-type【リストマーカー種類】<ul>：<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【リストマーカー種類】<ol>：<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>