MENU

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

2021 2/13
ul・ol・liタグの基礎知識から書き方まで!

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

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

目次

ul・ol・liの使い方

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

<ul>
  <li>リスト1つめ</li>
  <li>リスト2つめ</li>
  <li>リスト3つめ</li>
</ul>
  1. ul(またはol)を書く
  2. その中にliを書く
  3. liの中に各項目を書く

手順はこれだけです!

ulol)だけ、liだけという使い方はしません。必ず両方必要だと覚えておきましょう!

ul…番号なしリスト

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

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

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

ol…番号ありリスト

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

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

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

ulとolの違いは?

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

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

かもめ かもめ

ulol2つをセットに考え、使い方を学ぶことをおすすめします!

実例:ulタグ

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

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

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

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

ナビゲーションメニュー

クリック / タップで拡大

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

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

かもめ かもめ

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

カテゴリ・アーカイブ

クリック / タップで拡大

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

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

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

SNSシェアボタン

クリック / タップで拡大

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

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

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

実例:olタグ

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

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

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

手順の説明

  1. ul(またはol)を書く
  2. その中にliを書く
  3. liの中に各項目を書く

この記事の上の方でも使用していますが、では主に手順を説明する際に使用しています。

「1.… 2.…」というデフォルトの状態でないのは、CSSで調整しているからですね。

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

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

入れ子リストの書き方

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

<ul>
  <li>親:01</li>
  <li>
    親:02
    <ul>
      <li>子:01</li>
      <li>子:02</li>
    </ul>
  </li>
  <li>親:03</li>
</ul>
  • 親:01
  • 親:02
    • 子:01
    • 子:02
  • 親:01

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

入れ子実例:目次

クリック / タップで拡大

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

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

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

クリック / タップで拡大

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

ul・ol・liタグまとめ

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

この記事が気に入ったら
フォローしてね!

この記事を書いた人

都内勤務のフロントエンドエンジニア。初心者の方向けにブログを更新中。webに萌えてもっと楽しく、もっと素敵に!

目次
閉じる