【HTML】ol、ul、liの使い方まとめ【リストの型・応用も】

今回はHTMLでよく使う<ol><ul><li>タグについて見ていきます。

 
この目次にもリストを使っていますし、箇条書きなどの説明には必要不可欠なタグなので確認しておきましょう。

olとは？

olとは『ordered list』の略です。orderedは『順序ある』とでも訳してあげましょう。
 
<ol>タグは<li>タグと一緒に使います。

<ol>
  <li>1番目のリスト</li>
  <li>2番目のリスト</li>
  <li>3番目のリスト</li>
</ol>

 
このような使い方になります。リストの数を足したい場合は<li>タグを増やしてあげましょう。

リストの中にリストを作って2段階リストにする

続いて、リストの中にリスト表示をする流れを見てみましょう。このページの目次もこの方法を使っています。

<ol>
  <li>大見出し①</li>
    <ol>
      <li>小見出し①-1</li>
      <li>小見出し①-2</li>
    </ol>
  <li>大見出し②</li>
    <ol>
      <li>小見出し②-1</li>
      <li>小見出し②-2</li>
    </ol>
</ol>

このように大見出し自体がリストでありながら、その中に小見出しがリストで表示されます。

リストの順番指定

<ol>タグにはstart属性とreversed属性というのがあります。
属性って何？という場合や、後述されるCSSのセレクタ、プロパティについてはこちらをご覧ください。

【HTML＆CSS】用語の整理【タグ、セレクタ、要素、値など】

HTMLとCSSの勉強をしていて、いまだに 「プロパティってなんだっけ」 「セレクタってどこの部分」 「要素って？」 といまいちパッと出てこない自分に嫌気がさしています。そんな自分用の整理のために書いていきます。 ...

sunsukeblog.com

2018-09-13 20:23

 
実際にやってみましょう。

[HTML]

<ol start="5" reversed="reversed">
  <li>番号を5から</li>
  <li>降順で</li>
  <li>表示しています</li>
</ol>

start属性で開始番号を『5』からに指定して、reversed属性で5から降順にしています。なお、リストは3つしかないので3までしか表示されません。

ulとは？

olは番号順でしたが、ulは『unordered list』の略でunorderedは『順序のない』とでも訳してあげましょう。

 
<ul>タグは<li>タグと一緒に使います。

<ul>
  <li>1番目のリスト</li>
  <li>2番目のリスト</li>
  <li>3番目のリスト</li>
</ul>

 
<ol>タグではタグ内のコンテンツの前に番号が振られていますが、<ul>タグの場合は代わりに●がついています。

リストのスタイル

<ol>タグならアラビア数字、<ul>タグなら●が初期値になっています。しかし、このページの目次では大見出しがolでアラビア数字に対して、小見出しはアルファベットになっています。

また、人によってはulのリスト表示を■にしたり、そもそもリストのポインタは不要だと感じる人もいるはずです。

リストのスタイルを指定するにはHTMLで<ol>タグまたは<ul>タグにtype属性で指定する場合と、CSSでセレクタ{プロパティ:値}でlist-style-typeプロパティで指定する方法があります。

 
ちなみに<li>タグにtype属性を付けることもでき、同一リスト内でも種類を切り替える事も可能です。

追記：HTML5からul・olタグへのtype属性の廃止

先日、Google先生のおうちのsearch console(通称:サチコ)さんから「このページにおかしいタグあるよー」と通知を受けて調べてたら、HTML5からul・olタグに対してのtype属性は廃止というのを知りました。不勉強で申し訳ございません。

現在はCSSでlist-style-typeで指定するとのことです。

<ol>タグのリストの種類(type属性)

<ol>タグのリストには以下のような種類があります。

<ul>タグのリストの種類(type属性)

<ol>タグのリストには以下のような種類があります。

list-style-typeの種類(style属性/CSS)

list-style-typeプロパティなら、より詳細な設定が可能です。

また、list-style-typeプロパティでは<ol>・<ul>タグのtype属性で指定できないリストの種類もあるので知識として覚えなくてもいいので「こんなものもある」と片隅においてあげましょう。

<ul>、<ol>、<li>タグは使用頻度が非常に高いので、しっかりと使いこなしていきましょう。