超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ リストに関する設定

プロパティ説明
list-style-typedisc黒丸●(デフォルト)
circle白丸○
square四角■
decimal数字123
lower-roman小文字ローマ数字@AB
upper-roman大文字ローマ数字TUV
lower-alpha小文字アルファベットabc
upper-alpha大文字アルファベットABC
noneなし
list-style-imageurl("ファイル名")画像ファイル
none画像表示なし(デフォルト)
list-style-positionoutsideリストの外側(デフォルト)
insideリストの内側

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

(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.SU</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.SU
  • 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 プロパティを使うと、文章の内側に設定することができます。ただし、通常リストは1行の箇条書きで書くので、あまりこれを使うことはないと思われます。</li>
</ul>
<ul class="uti">
<li>実際に使ってみても、リストマークが内側にあると、ちょっと格好悪い。覚えても使うことはないでしょう。ちなみに、画像をリストマークに使うことと、このリストマークの位置指定はまだ Netscape では対応していないらしい。</li>
</ul>

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