ホームページ作成(リストを作りたい)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > リスト > 番号リストのマークを変更する(項目毎)
番号リストのマークを変更する(項目毎)

番号リストの『マーク』を、項目毎に変更する方法です。

番号リストではない場合には、リストのマークを変更する(項目毎) を参照願います。

各指定方法の全体は、リストのマークを変更する(全体)に一覧がありますので参照願います。

sample
  1. 項目1行目
  2. 項目2行目
  3. 項目3行目
  4. 項目4行目
  5. 項目5行目
HTML <li type="種類">〜</li>

番号リストのマークを、項目毎に変更するには、項目毎の<li>type="種類"を設定する事で、その項目が変更されます。

表示種類書き方
ホームページ作成(ローマ数字)ローマ数字(小文字)<li type="i">〜</li>
ホームページ作成(ローマ数字)ローマ数字(大文字)<li type="i">〜</li>
ホームページ作成(アルファベット)アルファベット(小文字)<li type="a">〜</li>
ホームページ作成(アルファベット)アルファベット(大文字)<li type="a">〜</li>
ホームページ作成(数字)数字<li type="1">〜</li>
書き方は

<ol>
<li type="i">項目1行目</li>
<li type="i">項目2行目</li>
<li type="a">項目3行目</li>
<li type="a">項目4行目</li>
<li type="1">項目5行目</li>
</ol>
こうなります
ホームページ作成(IE7)
ホームページ作成(IE)
ホームページ作成(Firefox)
ホームページ作成(Opera)

ホームページ作成TOP > リスト > 番号リストのマークを変更する(項目毎) > このページのTOP ▲

スタイルシート list-style:種類

リストのマークをスタイルシートにて項目毎に変更するには、項目を表す<li>list-style:種類を設定する事で、その項目のマークが変更されます。

スタイルシートの場合の種類は下記の様になります。

表示種類書き方
ホームページ作成(数字)数字list-style:decimal
ホームページ作成(ローマ数字)ローマ数字(小文字)list-style:lower-roman
ホームページ作成(ローマ数字)ローマ数字(大文字)list-style:upper-roman
ホームページ作成(アルファベット)アルファベット数字(小文字)list-style:lower-alpha
ホームページ作成(アルファベット)アルファベット数字(大文字)list-style:upper-alpha
要素に直接書く
書き方は

<ul>
<li style="list-style:lower-roman">項目1行目</li>
<li style="list-style:upper-roman">項目2行目</li>
<li style="list-style:lower-alpha">項目3行目</li>
<li style="list-style:upper-alpha">項目4行目</li>
<li style="list-style:decimal">項目5行目</li>
</ul>
headに書く
書き方は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        .sample1   { list-style:lower-roman;}
        .sample2   { list-style:upper-roman;}
        .sample3   { list-style:lower-alpha;}
        .sample4   { list-style:upper-alpha;}
        .sample5   { list-style:decimal;}

 -->
 </style>
 </head>
 <body>

        <ul>
        <li class="sample1">項目1行目</li>
        <li class="sample2">項目2行目</li>
        <li class="sample3">項目3行目</li>
        <li class="sample4">項目4行目</li>
        <li class="sample5">項目5行目</li>
        </ul>

 </body>
</html>
こうなります
ホームページ作成(IE7)
ホームページ作成(IE)
ホームページ作成(Firefox)
ホームページ作成(Opera)

ホームページ作成TOP > リスト > 番号リストのマークを変更する(項目毎) > このページのTOP ▲