リストを作成するタグ
ウェブサイト作成で使えるHTMLタグとして、
今回は、リストを作成するタグを紹介します。
リストの表示方法に順序があるものと、
順序がないものがあります。
OLタグ
順序のあるリストを表示する場合、
ol タグ(ordered list の略)を使用します。
リストの各項目は li タグで記述します。
<記述例>
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<表示例>- 項目1
- 項目2
- 項目3
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>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<表示例>
- 項目1
- 項目2
- 項目3
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>
<表示例>
- 文章や単語などを箇条書きで
- 順序のある番号順に
- 整列して表示します
リストの文字色を変える
文字色を変えるには 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>
<表示例>
- この列は赤色
- この列は青色
- この列は緑色
このように、スタイルシートを使うと
いろいろな装飾ができます。
コメント