箇条書きの頭の記号を指定する

ホームページやブログなどのウェブサイトで 一覧などを箇条書きにする際には ULやDIRおよびMENUタグといったHTMLタグを使用しますが、このとき style指定で箇条書きの項目文章の頭に付加する記号を指定することができます。

<タグ名 style="list-style-type:記号の種類">
  • タグ名:ulmenuおよびdir といったブロックタグで指定するとそのブロック文章全体を対象に、li タグで指定すると個別に設定できます。
  • 記号の種類:下記から選べます。
    disc
    • (小さい黒丸)
    circle
  • (小さい白丸)
  • square
  • (小さい四角)
  • none
  • なし
  • decimal
  • 算用数字
  • lower-roman
  • 英小文字
  • upper-roman
  • 英大文字
  • lower-alpha
  • ローマ数字(小文字)
  • upper-alpha
  • ローマ数字(大文字)

ただし、Mac + Netscape 4 では、このスタイル指定は反映されず、『?』が表示されます。
Win + Netscape 4 では、none は反映さえますが、それ以外は白丸になります。
Internet Explorer 4 では、マークの形状に decimal を指定すると、数値が表示されてしまいます。

サンプルソースです。

テーブルを作成する
<ul>
<li style="list-style-type:disc">縦にまたがるセルを作成する
<li style="list-style-type:circle">横にまたがるセルを作成する
<li style="list-style-type:square">テーブルに枠線を付ける
<menu style="list-style-type:lower-roman">
<li>枠線の色を指定する
<li>枠線の太さを指定する
</menu>
<li style="list-style-type:decimal">テーブルに表題を付ける
<li style="list-style-type:upper-alpha">セル内の余白を指定する
</ul>

このソースでは、赤字部分で各項目に対してそれぞれ頭の記号を指定し、青字部分で入れ子になっている箇条書き文章全体の頭の記号を指定しています。このソースを表示すると次のようになります。

テーブルを作成する
  • 縦にまたがるセルを作成する
  • 横にまたがるセルを作成する
  • テーブルに枠線を付ける
  • 枠線の色を指定する
  • 枠線の太さを指定する
  • テーブルに表題を付ける
  • セル内の余白を指定する