HTML&CSSコーディング
順番のある/ない箇条書き（リスト）

HTMLで箇条書き（リスト）を設定するには、olタグまたはulタグとliタグをセットで使用します。

ここでは、各タグの使い方、ulタグとolタグの違いや覚え方について、わかりやすく解説します。

入れ子構造にする

箇条書きを設定するには、olタグまたはulタグの中にliタグを入れます。

<ul>
  <li>じゃがいも</li>
  <li>にんじん</li>
  <li>たまねぎ</li>
</ul>

<ol>
  <li>たまねぎを炒める</li>
  <li>水と残りの材料を入れて煮込む</li>
  <li>カレー粉を入れる</li>
</ol>

箇条書きしたい内容は、<li></li>の中に記述します。liタグの数だけ、項目数が増えていきます。

順序のない箇条書き、順序のある箇条書き

olタグとulタグの違い

olタグとulタグは混同しやすいですが、タグ名の由来をおさえておけばはっきり区別できると思います。

olは、ordered listに由来します。orderedは順序だてられている、という意味です。そのため、頭には序数がつきます。

ulは、unordered listに由来します。unorderedは順序だてられていない、という意味です。頭には序数ではなく記号が表示されます。

否定をあらわすunがある方、つまりulタグが順序のない箇条書き、と考えてみてください。

また、子要素となるliは、list itemに由来します。