HTMLのliタグの使い方について

今回はHTMLのliタグについて簡単にまとめようと思います。

liタグは「List Item」の略で、箇条書きを表示することができます。
また、liタグはリストの中身を表現するものなので、基本的に<ol>か<ul>のどちらかで囲う必要があります。

olタグは「Ordered List」の略で、ulタグは「Unordered List」の略です。
そのままの意味でolタグは順序付けする場合使用し、ulタグは順序付けを必要としない場合に使用します。

olタグとliタグ

<ol>
  <li>一個目の要素</li>
  <li>二個目の要素</li>
  <li>三個目の要素</li>
</ol>

ブラウザ表示例

1. 一個目の要素
2. 二個目の要素
3. 三個目の要素

上記のように1. 2. 3. と番号のついた状態で表示されます。

ulタグとliタグ

<ul>
  <li>一個目の要素</li>
  <li>二個目の要素</li>
  <li>三個目の要素</li>
</ul>

ブラウザ表示例

• 一個目の要素
• 二個目の要素
• 三個目の要素

上記のように「・」がついた状態で表示されます。

マーカー表示の変更

ulタグのマーカーやolタグの数字の種類をcssで変更することができます。

ul {
  list-style: ...;
}

ol {
  list-style-type: ...;
}

...の箇所に値を記述することでできます。
list-styleでもlist-style-typeでも指定することができます。
2つのプロパティの違いについては調べてみてください。

たくさんの種類があるので例をあげたいと思います。

• circle ・・・ 白丸
• square ・・・ 黒の四角
• hiragana ・・・ あ、い、う、え、お、の順番
• upper-latin ・・・ A, B, C, の順番
• none ・・・ マーカー・数字を非表示にする

他にもたくさん種類があるので、Chromeのデベロッパーツール等で実際に試してみるのが一番手っ取り早いかと思います。

おわりに

liタグ、olタグ、ulタグは使用する出番が多いので基本的な記述はしっかり覚えておきましょう。