リストのマークの種類

リスト(<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 )

Profile
profile_img

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。