HTMLのulとol、liの使い方【現役エンジニアが解説】

PROGRAM

今回は、HTMLのulとol、liの使い方について、ulとliの使い方とolとliの使い方に分け、簡単に解説していきます。

ulとliの使い方

ulはunordered listの略のため、順序のない箇条書きで使用されるタグです。

liはlist itemの略のため、ulとliを一緒に使うことで、順序のない箇条書きが可能です。

<ul>
    <li>アイスティー</li>
    <li>アイスコーヒー</li>
    <li>オレンジジュース</li>
</ul>

上記のコードでは、ulとliを使って、ドリンクを順序を付けずに、箇条書きで表示しています。

olとliの使い方

olはordered listの略で、番号付きの順序のあるリストの表示に使用されるタグです。

ulと同様に、olはliと一緒に使うことで、順序のある番号付きのリストの表示ができます。

<ol>
    <li>アイスティー</li>
    <li>アイスコーヒー</li>
    <li>オレンジジュース</li>
</ol>

上記のコードでは、olとliを使って、番号を付けて、ドリンクを順序のあるリストで表示しています。

マーカーを消す

ulとolでは、いずれもマーカーが付きますが、これはスタイルで削除することができます。

スタイル属性等でulもしくはolのlist-style-typeプロパティをnoneにすることで非表示にできます。

<ol style="list-style-type:none;">
    <li>アイスティー</li>
    <li>アイスコーヒー</li>
    <li>オレンジジュース</li>
</ol>

上記のコードでは、先程のドリンクのリストの番号等を非表示にし、リストアイテムの名前のみを表示しています。