ul・ol・liタグの基礎知識から書き方まで！

今回は、リストを作成の際に使用するul・ol・liタグ使い方を解説したいと思います。

リストのマークのデザインを変更する方法など、ul・ol・liタグを使うときに悩みやすいことも合わせて解説していきます！

ul・ol・liの使い方

ul・ol・liを使用すると、HTMLでリストや箇条書きを作成することができます。

<ul>
  <li>リスト１つめ</li>
  <li>リスト２つめ</li>
  <li>リスト３つめ</li>
</ul>

ul…番号なしリスト

<ul>
  <li>アンパンマン</li>
  <li>カレーパンマン</li>
  <li>しょくぱんまん</li>
</ul>

ulでli全体を囲った場合はこのようになります。デフォルトでは各項目の左に黒丸がつき、リストが縦に並びます。

ulはUnordered Listの略で、並び順が関係ない箇条書きを作成する時に使用します！

ol…番号ありリスト

<ol>
  <li>アンパンマン</li>
  <li>カレーパンマン</li>
  <li>しょくぱんまん</li>
</ol>

olでli全体を囲った場合はこのようになります。各項目の左に数字がつき、１から順に増えて行きます。liが増えればその分、左側の番号も増えていきます。

olはOrdered Listの略で、順番が重要な箇条書きを作成する時に使用します！

ulとolの違いは？

• ul … 黒丸の箇条書き
• ol … 番号付きの箇条書き

違いはこの２点のみで、CSSでの指定方法など、取り扱い方法はほとんど変わりません。

かもめ

ulとol２つをセットに考え、使い方を学ぶことをおすすめします！

実例：ulタグ

例えば、本来の箇条書きとして

• アンパンマン
• カレーパンマン
• しょくぱんまん

こういう風に単純な箇条書きとして使うこともできまずが、webページではみなさんが想像されている以上にいろいろなところに使われています！

今回は当ブログの中で、どこにul・liタグが使用されているか軽くご紹介しますね。

ナビゲーションメニュー

当ブログの右上、ヘッダー部分にあるナビゲーションメニューはul・liタグで作成されています。

メニュー全体がul、各メニューがliで囲まれています。

かもめ

ヘッダーにあるナビゲーションメニューはulが使用されていることが多いですよ！

カテゴリ・アーカイブ

サイドバー部分にあるカテゴリ・アーカイブもul・liタグで作成されています。

同様に、記事ページにアクセスすると表示される人気記事ランキングもul・liタグですよ！

メニュー全体がul、各メニューがliで囲まれています。

SNSシェアボタン

ブログの上下部に（PCだと画面左側にも）表示されるSNSシェアボタンもul・liタグで作成されています。

ボタン全体がul、各ボタンがliで囲まれています。

WordPressではul・liタグがたくさん使用されています。お気に入りのブログやサイトがあれば、ぜひデベロッパーツールを使用して確認してみてください！

実例：olタグ

おさらい：olタグは順番が関係あるリスト作成時に使用する

olタグは、ulタグと比較すると使う頻度が少ないタグです。何かの手順を紹介する時など、流れに沿って説明が必要な際にolタグが使用されることが多いです。

当ブログでolタグがどういった場面で使用されているかご紹介します。

手順の説明

リストの中にリストを作成する

HTMLではul・olの中にul・olを入れ、入れ子構造にすることができます。

入れ子リストの書き方

ul・olタグの中にリストをつくる時は、liの中にul・olを入れて書く必要があります。

<ul>
  <li>親：01</li>
  <li>
    親：02
    <ul>
      <li>子：01</li>
      <li>子：02</li>
    </ul>
  </li>
  <li>親：03</li>
</ul>

今回の例ではliの中にulを入れていますが、olで入れ子構造にしたい場合は同じようにliの中にul・olを入れます。

入れ子実例：目次

記事ページ内の目次ではulタグの中にさらにulタグが入っています。

目次は順番が関係しているので本来はolタグですが、数字が並ぶと見辛いので当ブログではulタグを使用しています。このあたりは好みです。

入れ子実例：ナビゲーションバー

ナビゲーションメニューにあるサブメニューでは、ulタグの中にulタグが入っています。

ul・ol・liタグまとめ

• ul・olの中にliを書く
• liの数に制限はなし
• ulとliで黒丸の箇条書きに
• olとliで番号付きの箇条書きに
• HTMLでの書き方、CSSでの指定方法は基本的にどちらも同じ
• 入れ子構造にする場合はliの中にul・olを入れて書く