Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

リストのマークや番号の形式

■ リストのマークや番号の形式

none 表示しない
disc 塗りつぶされた丸(初期値)
circle 線で描かれた丸
square 線で描かれた四角
lower-roman ローマ数字の小文字
upper-roman ローマ数字の大文字
lower-greek ギリシャ数字の小文字
decimal 算用数字
decimal-leading-zero 頭に0をつけた算用数字
lower-latin 算用数字
lower-alpha アルファベットの小文字
upper-latin 算用数字
upper-alpha アルファベットの大文字
cjk-ideographic 漢数字
hiragana ひらがなで「あいうえお」順
katakana カタカナで「アイウエオ」順
hiragana-iroha ひらがなで「いろは」順
katakana-iroha カタカナで「イロハ」順
hebrew ヘブライ数字
armenian アルメニア数字
georgian グルジア数字
list-style-typeは、リストのマークや番号の形式を設定します。
list-style-typeプロパティで画像が指定されている場合には、その画像が優先して表示されます。
■ 作例
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>リストのマークや番号の形式を変える</title>
</head>
<body>
<table>
<tr>
<td>
<ol style="list-style-type: none">
<li>none</li>
<li>none</li>
<li>none</li>
</ol>
</td>
<td>
<ol style="list-style-type: disc">
<li>disc</li>
<li>disc</li>
<li>disc</li>
</ol>
</td>
<td>
<ol style="list-style-type: circle">
<li>circle</li>
<li>circle</li>
<li>circle</li>
</ol>
</td>
<td>
<ol style="list-style-type: square">
<li>square</li>
<li>square</li>
<li>square</li>
</ol>
</td>
</tr>
<tr>
<td>
<ol style="list-style-type: lower-roman">
<li>lower-roman</li>
<li>lower-roman</li>
<li>lower-roman</li>
</ol>
</td>
<td>
<ol style="list-style-type: upper-roman">
<li>upper-roman</li>
<li>upper-roman</li>
<li>upper-roman</li>
</ol>
</td>
<td>
<ol style="list-style-type: lower-greek">
<li>lower-greek</li>
<li>lower-greek</li>
<li>lower-greek</li>
</ol>
</td>
<td>
</td>
</tr>
<tr>
<td>
<ol style="list-style-type: cjk-ideographic">
<li>cjk-ideographic</li>
<li>cjk-ideographic</li>
<li>cjk-ideographic</li>
</ol>
</td>
<td>
<ol style="list-style-type: decimal">
<li>decimal</li>
<li>decimal</li>
<li>decimal</li>
</ol>
</td>
<td colspan="2">
<ol style="list-style-type: decimal-leading-zero">
<li>decimal-leading-zero</li>
<li>decimal-leading-zero</li>
<li>decimal-leading-zero</li>
</ol>
</td>
</tr>
<tr>
<td>
<ol style="list-style-type: lower-alpha">
<li>lower-alpha</li>
<li>lower-alpha</li>
<li>lower-alpha</li>
</ol>
</td>
<td>
<ol style="list-style-type: lower-latin">
<li>lower-latin</li>
<li>lower-latin</li>
<li>lower-latin</li>
</ol>
</td>
<td>
<ol style="list-style-type: upper-alpha">
<li>upper-alpha</li>
<li>upper-alpha</li>
<li>upper-alpha</li>
</ol>
</td>
<td>
<ol style="list-style-type: upper-latin">
<li>upper-latin</li>
<li>upper-latin</li>
<li>upper-latin</li>
</ol>
</td>
</tr>
<tr>
<td>
<ol style="list-style-type: hiragana">
<li>hiragana</li>
<li>hiragana</li>
<li>hiragana</li>
</ol>
</td>
<td>
<ol style="list-style-type: katakana">
<li>katakana</li>
<li>katakana</li>
<li>katakana</li>
</ol>
</td>
<td>
<ol style="list-style-type: hiragana-iroha">
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
</ol>
</td>
<td>
<ol style="list-style-type: katakana-iroha">
<li>katakana-iroha</li>
<li>katakana-iroha</li>
<li>katakana-iroha</li>
</ol>
</td>
</tr>
<tr>
<td>
<ol style="list-style-type: hebrew">
<li>hebrew</li>
<li>hebrew</li>
<li>hebrew</li>
</ol>
</td>
<td>
<ol style="list-style-type: armenian">
<li>armenian</li>
<li>armenian</li>
<li>armenian</li>
</ol>
</td>
<td>
<ol style="list-style-type: georgian">
<li>georgian</li>
<li>georgian</li>
<li>georgian</li>
</ol>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial