■ リストに関する設定

◆リストマークを変更する

(css file)
ul.kuro{ list-style-type:disc; }
ul.siro{ list-style-type:circle; }
ul.sikaku{ list-style-type:square; }
ul.suuji{ list-style-type:decimal; }
ul.roma1{ list-style-type:lower-roman; }
ul.roma2{ list-style-type:upper-roman; }
ul.alpha1{ list-style-type:lower-alpha; }
ul.alpha2{ list-style-type:upper-alpha; }
ul.nasi{ list-style-type:none; }

(html file)
<ul class="kuro"><li>Introduction</li><li>Fly high</li></ul>
<ul class="siro"><li>Trauma</li><li>And Then</li></ul>
<ul class="sikaku"><li>immature</li><li>Boys ＆ Girls</li></ul>
<ul class="suuji"><li>TO BE</li><li>End roll</li></ul>
<ul class="roma1"><li>P.S�U</li><li>WHATEVER</li></ul>
<ul class="roma2"><li>too late</li><li>appears</li></ul>
<ul class="alpha1"><li>monochrome</li><li>Interlude</li></ul>
<ul class="alpha2"><li>LOVE〜refrain〜</li><li>WHO...</li></ul>
<ul class="none"><li>LOVEppears</li><li>ayumi hamasaki</li></ul>

• Introduction
• Fly high

• Trauma
• And Then

• immature
• Boys ＆ Girls

• TO BE
• End roll

• P.S�U
• WHATEVER

• too late
• appears

• monochrome
• Interlude

• LOVE〜refrain〜
• WHO...

• LOVEppears
• ayumi hamasaki

CSS ではこの他に、漢数字、ひらがな（いろは）、カタカナ（イロハ）なども用意されていますが、まだブラウザが対応していないみたいです。

◆画像をリストマークにする

この画像　　ファイル名 "yasinoki.gif" をリストマークにしてみます。

(css file)
ul{ list-style-image:url("yasinoki.gif"); }

(html file)
<ul>
　<li>Far away</li>
　<li>SURREAL</li>
　<li>AUDIENCE</li>
</ul>

• Far away
• SURREAL
• AUDIENCE

◆リストマークの位置を指定する

(css file)
ul.soto{ list-style-position:outside; }
ul.uti{ list-style-position:inside; }

(html file)
<ul class="soto">
<li>通常はリストマークは文章の外側（outside）に表示されますが、list-style-position プロパティを使うと、文章の内側に設定することができます。ただし、通常リストは１行の箇条書きで書くので、あまりこれを使うことはないと思われます。</li>
</ul>
<ul class="uti">
<li>実際に使ってみても、リストマークが内側にあると、ちょっと格好悪い。覚えても使うことはないでしょう。ちなみに、画像をリストマークに使うことと、このリストマークの位置指定はまだ Netscape では対応していないらしい。</li>
</ul>

• 通常はリストマークは文章の外側（outside）に表示されますが、list-style-position プロパティを使うと、文章の内側に設定することができます。ただし、通常リストは１行の箇条書きで書くので、あまりこれを使うことはないと思われます。

• 実際に使ってみても、リストマークが内側にあると、ちょっと格好悪い。覚えても使うことはないでしょう。ちなみに、画像をリストマークに使うことと、このリストマークの位置指定はまだ Netscape では対応していないらしい。