リスト

１.番号無しのリスト(ul要素とli要素)

リストとして表示されるリスト項目にはli要素を使います。リスト項目を必要な数だけ記述したら、全体をul要素でマークアップします。 

<ul>
    <li>項目テキスト1</li>
    <li>項目テキスト2</li>    
    <li>項目テキスト3</li>    
</ul>

２．番号付きのリスト(ol要素とli要素)

リストの項目にli要素を使う点は番号無しのリスト同じで、全体をol要素でマークアップします。 

<ol>
    <li>項目テキスト1</li>
    <li>項目テキスト2</li>    
    <li>項目テキスト3</li>    
</ol>

下記をファイル名 「list_kihon.html」として「text」フォルダーに保存します。

<h1>リスト-基本</h1>
<h2>番号なしリスト</h2>
    <p>
    カテゴリ一覧
    </p>
    <ul>
	    <li>アクション</li>
	    <li>ミステリー</li>
	    <li>SF</li>
	    <li>ヒューマン</li>
    </ul>
    
<h2>番号付きリスト</h2>
    <p>
    カテゴリ一覧
    </p>
    <ol>
	    <li>アクション</li>
	    <li>ミステリー</li>
	    <li>SF</li>
	    <li>ヒューマン</li>
    </ol>

３．リスト項目に他のリスト

リストの項目に他のリストを入れ子にすることができます。 

<ul>
<li>項目テキスト1</li>
<li>項目テキスト2
  <ul>
  <li>項目テキスト2_1</li>
  <li>項目テキスト2_2</li>
  </ul>
</li>
<li>項目テキスト3</li>
<li>項目テキスト4</li>
</ul>

下記を「text」フォルダーに保存します。

<h1>リストサンプル3</h1>

    <p>
    カテゴリ一覧
    </p>

    <ul>
    <li>アクション</li>
    <li>ミステリー
        <ul>
        <li>邦画</li>
        <li>洋画
            <ul>
            <li>米国</li>
            <li>欧州</li>
            <li>アジア</li>
            </ul>
        </li>
        </ul>
    </li>
    <li>SF
        <ol>
        <li>2006年</li>
        <li>2007年</li>
        <li>2008年
            <ol>
            <li>上半期</li>
            <li>下半期</li>
            </ol>
        </li>
        </ol>
    </li>
    <li>ヒューマン</li>
    </ul>

４．項目マークの種類を変更

ul要素を使ってリストを作成した場合、デフォルトでは項目のマークに黒丸が付きます。また階層を深くしていくと白丸、そして黒四角がマークとして使われます。この表示されるマークはul要素又はli要素に対するスタイルシートで指定することが出来ます。

<ul style="list-style-type: xxxx;"> xxxxはマークの種類
<li style="list-style-type: xxxx;">
none:マーク無し、disc:黒丸、circle:白丸、square:黒四角

５．項目番号の種類を変更

ol要素の場合も同じように表示として使われる番号の種類を変更できます。

<ol style="list-style-type: xxxx;"> xxxxはマークの種類
<li style="list-style-type: xxxx;">
decimal:算用数字、lower-latin:小文字のアルファベット、lower-alpha:小文字のアルファベット
upper-latin:大文字のアルファベット、 upper-alpha:大文字のアルファベット
lower-roman:小文字のローマ数字、upper-roman:大文字のローマ数字
decimal-leading-zero:先頭に０のついた算用数字
なお
cjk-ideographic　漢数字、hiragana　ひらがなのあいうえお順、katakana　カタカナのアイウエオ順はサポートされておらずChrome 、Firefoxでは表示されるがEdge IEでは表示されません。

マーク無しの例

    <ul style="list-style-type: none;" >
    　<li>アクション</li>
    　<li>ミステリー</li>
    　<li>SF</li>
    　<li>ヒューマン</li>
    </ul>