? リストのマークの種類(list-style-type) - リストプロパティ - スタイルシート入門

リストのマークの種類

広告

リスト(<ul>又は<ol>)のマークはスタイルシートで多くの種類が選択できるようになっており、このプロパティで設定が可能です。定義式は下記のようになります。

list-style-type : style

プロパティは"list-style-type"です。値は下記の中から1つを選択します。

list-style-type : none;                  /* マークを使用しない */
list-style-type : disc;                  /* 黒い丸、デフォルト */
list-style-type : circle;                /* 白い丸 */
list-style-type : square;                /* 黒い四角 */
list-style-type : decimal;               /* 数字 */
list-style-type : decimal-leading-zero;  /* 数字(zero-fill) */
list-style-type : lower-roman;           /* ローマ数字(小文字) */
list-style-type : upper-roman;           /* ローマ数字(大文字) */
list-style-type : lower-greek;           /* ギリシア文字(小文字) */
list-style-type : lower-alpha;           /* アルファベット(小文字) */
list-style-type : upper-alpha;           /* アルファベット(大文字) */
list-style-type : lower-latin;           /* アルファベット(小文字) */
list-style-type : upper-latin;           /* アルファベット(大文字) */
list-style-type : cjk-ideographic;       /* 漢数字 */
list-style-type : hiragana;              /* ひらがな */
list-style-type : katakana;              /* かたかな */

ただ全てのブラウザで上記が全て利用できるわけではなく、対応状況はまちまちのようです。

では実際に試してみます。

sample1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">

<title>スタイルシートサンプル</title>

<link rel="stylesheet" href="./css/sample1.css" type="text/css">

</head>
<body>

<ul class="list_none">
<li>none</li>
<li>none</li>
<li>none</li>
</ul>

<ul class="list_disc">
<li>disc</li>
<li>disc</li>
<li>disc</li>
</ul>

<ul class="list_circle">
<li>circle</li>
<li>circle</li>
<li>circle</li>
</ul>

<ul class="list_square">
<li>square</li>
<li>square</li>
<li>square</li>
</ul>

<ol class="list_decimal">
<li>decimal</li>
<li>decimal</li>
<li>decimal</li>
</ol>

<ol class="list_lowerroman">
<li>lowerroman</li>
<li>lowerroman</li>
<li>lowerroman</li>
</ol>

<ol class="list_loweralpha">
<li>loweralpha</li>
<li>loweralpha</li>
<li>loweralpha</li>
</ol>

<ol class="list_upperalpha">
<li>upperalpha</li>
<li>upperalpha</li>
<li>upperalpha</li>
</ol>

</body>
</html>

sample1.css

@charset "Shift_Jis";

ul.list_none{
list-style-type:none;
}

ul.list_disc{
list-style-type:disc;
}

ul.list_circle{
list-style-type:circle;
}

ul.list_square{
list-style-type:square;
}

ol.list_decimal{
list-style-type:decimal;
}

ol.list_lowerroman{
list-style-type:lower-roman;
}

ol.list_loweralpha{
list-style-type:lower-alpha;
}

ol.list_upperalpha{
list-style-type:upper-alpha;
}

実行結果は下記の通りです。

リストのマーク指定のサンプル

IEでは"hiragana"や"katakana"などは対応していませんでした。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)