初心者に寄よる初心者の為のHTML辞典

 

リストについて

■リストタグについて説明します。UL・OL・LI・など聞いた事があると思います。CSSを使用する際にかなり便利なのでここはしっかり抑えておきましょう。
□ リストを作る
<ul><li>〜</li></ul>
<ul>タグと</ul>タグでその範囲がリストにあることを示します。項目の順序が必要でない箇条書きを作成したい場合に使用すると、行頭の記号に「・」を用いたリストが形成されます。リスト表示をしたい項目はそれぞれ<li>タグと</li>タグに挟んで並べます。
一般的には上下にスペースがあけられます。項目ごとに、マーク(デフォルテは黒丸)がつき、リスト全体はインデント(字下げ)して表示されます。
□ 番号付きリストを作る
<ol><li>〜</li></ol>
<ol>タグと</ol>タグでその範囲が番号付きのリストであることを示します。順番が重要なリストを作成したい場合に使用すると、行頭の記号が連番の数字になって表示されます。
<ul>タグによるリスと同様で、一般的なブラウザでは項目がインデントされ、上下にスペースをあけて表示されます。
□ リストのマークを変更する
<ul type="★"></li>〜</li></ul>
<ul><li type="★">〜</li></ul>
★・・・disc,circle,square
<ul>タグでは、type属性を使って、リストのマークを変更することが出来ます。
<ul>タグの場合はdisc(黒丸)、circle(白丸)、spuare(四角/一般的なブラウザでは黒く塗りつぶされた四角表示)の3種類か指定します。
<li>タグにtype属性を指定した場合は、していした項目のマークだけが変更され、この性質を応用すると、項目ごとに違うマークを付けることも出来ます。
 
□ 番号付きリストのマークを変更する
<ol type="★"><li>〜</ol>
<ol><li type="★">〜</li></ol>
★・・・1,a,A,i,I
<ol>タグにtype属性を指定すると、リストのマークを変更することが出来ます。1,a,A,i,Iのいずれかの値を指定します。
  1・・・アラビア数字(1,2,3・・・)
  a・・・小文字アルファベット(a,b,c,・・・)
  A・・・大文字アルファベット(A,B,C,・・・)
  i・・・小文字ローマ数字(@,A,B・・・)
  I・・・大文字ローマ数字(T,U,V・・・)
このようなマーク変更が出来ます。
<li>にtype属性を指定した場合はマークだけ変更されます。
□ リストの開始番号を指定する
<ol start="★"><li>〜</li></ol>
★・・・開始番号
start属性を使うと、<ol>タグで作成したリストの開始番号を変更することが出来ます。
tyoe属性と併用することもできます。例えば<ol type="a" start-"3">とすると、開始値=3はcになります。
□ リストの連番を変更する
<ol><li value="★">〜</li></ol>
★・・・開始番号
<li>タグにvalue属性をつけ、リスト項目の番号を指定するとその次の項目からは、value属性で設定した番号からの連番になります。
通常はデフォルテで使われる整数を変更することになります。しかし、type属性と併用すればtype属性で指定した値が変更されます。例えば<ol type="a"><li value="4">とした場合、番号はdになります。
ちなみにこの属性は<ol>タグ内でのみ使用します。