リストとは大まかに分けて、２種類あり、ol(order list)とul(unorder list)がある。日本でも馴染みのあるオーダーという言葉ですが、この時のorder(オーダー)の意味は順序、順番といった意味になります。なので、olとulの使い分け方は、序列にするか順不同にするかです。それぞれの使い方を説明していきます！

ol(order list)は、料理のレシピのように順番通りに作らなければいけない時やランキング形式で何かを表したい時などに使用します。

例えば、温泉卵の作り方を作る場合、

このように、HTMLエディタにolでマークアップしてあげると、表の先頭に書いてある数字が自動で表記されます。

ul(unorder list)は、買い物リストや、会議や面接。などに必要なものといった、特に順番がなくとも問題にならない時に使用します。

例えば、今日の買い物をメモして置く場合、

このように、HTMLエディタにulでマークアップしてあげると、表の先頭に黒いまるが自動で表記されます。webサイトで使われているナビゲーション部分は、このulを使用して書いています。

使うタグは<ol>、<ul>と<li>の3つになり、全て開始タグと終了タグで囲みます。ちなみに、liはlistの略にです。

上の表のようにulタグでリスト宣言をして、開始タグと終了タグの間に必要な分だけliタグを入れていきます。そして、上の牛乳と書いてある欄を見て頂くとわかる通り、こちらは、ブロックレベルになるので、幅は一行分になります。ブロックレベルであり、ブロックボックスではないのですが、ブロックボックスに近いですが、いくつか制約があったりします。ブロックボックスの場合は、高さ設定ができるが、ブロックレベルでは出来ないなど、しかし、考え方はブロックボックスになります。もし、ブロックボックスとは？と思う方は、前回記事に書いてありますので、そちらを参照してみてください。