リストを作成するHTMLタグで整列させよう！

リストを作成するタグ

ウェブサイト作成で使えるHTMLタグとして、
今回は、リストを作成するタグを紹介します。

リストの表示方法に順序があるものと、
順序がないものがあります。

OLタグ

順序のあるリストを表示する場合、
ol タグ（ordered list の略）を使用します。

リストの各項目は li タグで記述します。

＜記述例＞

<ol>
  <li>項目１</li>
  <li>項目２</li>
  <li>項目３</li>
</ol>

＜表示例＞

OLタグのリストマーカー

リストマーカー（リスト項目の先頭）は、type で指定します。

数字で表示（初期値）：<ol type=”1″></ol>
アルファベット小文字で表示：<ol type=”a”></ol>
アルファベット大文字で表示：<ol type=”A”></ol>
ローマ数字小文字で表示：<ol type=”i”></ol>
ローマ数字大文字で表示：<ol type=”I”></ol>

typeを何も指定しない場合、
初期値の数字で表示されます。

style属性に直接CSSを記述する場合、

数字で表示（初期値）：<ol style=”list-style: decimal></ol>
2桁の数字で表示：<ol style=”list-style: decimal-leading-zero></ol>
漢数字で表示：<ol style=”list-style: cjk-ideographic></ol>
ひらがな（あいうえお順）で表示：<ol style=”list-style: hiragana></ol>
カタカナ（アイウエオ順）で表示：<ol style=”list-style: katakana></ol>
ひらがな（いろは順）で表示：<ol style=”list-style: hiragana-iroha></ol>
カタカナ（イロハ順）で表示：<ol style=”list-style: katakana-iroha></ol>
アルファベット小文字で表示：<ol style=”list-style: lower-latin></ol>
アルファベット大文字で表示：<ol style=”list-style: upper-latin></ol>
ローマ数字小文字で表示：<ol style=”list-style: lower-roman></ol>
ローマ数字大文字で表示：<ol style=”list-style: upper-roman></ol>
ギリシャ文字で表示：<ol style=”list-style: lower-greek></ol>

と種類も多いですね。

開始番号は、start で指定（初期値 1 ）します。
例：<ol start=”3″>

アルファベットの例として、
3番目にあたるCから始まる場合、
例：<ol type=”A” start=”3″>
と指定するとアルファベット大文字の
C から順に表示します

＜記述例＞

<ol type="i">
  <li>文章や単語などを箇条書きで</li>
  <li>順序のある番号順に</li>
  <li>整列して表示します</li>
</ol>

＜表示例＞

ULタグ

順序のないリストを表示する場合、
ul タグ（unordered listの略）を使用します。

リストの各項目は li タグで記述します。

＜記述例＞

<ul>
  <li>項目１</li>
  <li>項目２</li>
  <li>項目３</li>
</ul>

＜表示例＞

ULタグのリストマーカー

リストマーカー（リスト項目の先頭）は、type で指定します。

黒丸を表示（初期値）：<ul type=”disc”></ul>
白丸を表示：<ul type=”circle”></ul>
黒い四角を表示：<ul type=”square”></ul>

typeを何も指定しない場合初期値の黒丸で表示されます。

style属性に直接CSSを記述する場合、
黒丸を表示（初期値）：<ul style=”list-style: disc></ul>
白丸を表示：<ul style=”list-style: circle></ul>
黒い四角を表示：<ul style=”list-style: square></ul>
となります。

＜記述例＞

<ul type="circle">
  <li>順序に意味を持たない</li>
  <li>文章や単語を箇条書きで</li>
  <li>整列して表示します</li>
</ul>

＜表示例＞

また、リストマーカーを消す場合、
style属性に直接CSSを記述します。

＜記述例＞

<ul style="list-style: none;">
  <li>順序に意味を持たない</li>
  <li>文章や単語を箇条書きで</li>
  <li>リストマーカーを消し</li>
  <li>整列して表示します</li>
</ul>

＜表示例＞

スタイルシートで詳細な設定をしてみよう

OL,ULどちらもスタイルシートで詳細な設定ができます。

リストの周りに線を引く

周りに線を引くには border プロパティを指定します。
例として、3pxの緑色の点線を引きましょう。

＜記述例＞

<ul style="border: 3px green dotted;">
  <li>順序に意味を持たない</li>
  <li>文章や単語を箇条書きで</li>
  <li>整列して表示します</li>
</ul>

＜表示例＞

• 順序に意味を持たない
• 文章や単語を箇条書きで
• 整列して表示します

リストの背景色を変える

背景色を変えるには background プロパティを指定します。
例として、背景色がアクアマリンで
周りに2pxの緑色の二重線を引きましょう。

＜記述例＞

<ol style="background: aquamarine;border: 2px green double;">
  <li>文章や単語などを箇条書きで</li>
  <li>順序のある番号順に</li>
  <li>整列して表示します</li>
</ol>

＜表示例＞

1. 文章や単語などを箇条書きで
2. 順序のある番号順に
3. 整列して表示します

リストの文字色を変える

文字色を変えるには color プロパティを
liタグに対して指定します。

例として、背景色がgold（金色）で
周りに3pxの赤色の立体的に隆起した線を引き、
各行の文字色を変えましょう。

＜記述例＞

<ul style="background: aquamarine;border: 3px red ridge;">
  <li style="color: red;">この列は赤色</li>
  <li style="color: blue;">この列は青色</li>
  <li style="color: green;">この列は緑色</li>
</ul>

＜表示例＞

• この列は赤色
• この列は青色
• この列は緑色

このように、スタイルシートを使うと
いろいろな装飾ができます。