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

HTML

リストを作成するタグ

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

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

OLタグ

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

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

<記述例>

<ol>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>
<表示例>
  1. 項目1
  2. 項目2
  3. 項目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>

<表示例>

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

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>

<表示例>

  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>

<表示例>

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

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

コメント

タイトルとURLをコピーしました