HTML/CSS

【HTML】テキストを箇条書きにする方法(ul,ol,li)

本記事では、HTMLで表示させているテキストを箇条書きにすることができる、ulタグ・olタグ・liタグの使い方と違いについて解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

ドットの箇条書き(ulタグ)

テキストの先頭にドットが付いている箇条書きリストを作成したい場合は、ulタグを使用します。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ul>

ulタグ内ではliタグを使用することができ、liタグに箇条書きにしたいテキストを記載します。

ulタグを使ったサンプルコード

実際にulタグとliタグを使用して、テキストを箇条書きにするサンプルコードと表示結果を確認してみましょう。

<ul>
  <li>リンゴ</li>
  <li>バナナ</li>
  <li>イチゴ</li>
</ul>
ulタグを使用した表示結果
ulタグを使用した表示結果

ulタグ内に記載したテキストの先頭にドットが追加されており、正しく箇条書きになっていることが確認出来ました。

番号の箇条書き(olタグ)

テキストの先頭に番号が振られている箇条書きリストを作成したい場合は、olタグを使用します。

<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ol>

ulタグと同様にolタグ内ではliタグを使用することができ、liタグに箇条書きにしたいテキストを記載します。

olタグを使ったサンプルコード

実際にolタグとliタグを使用して、テキストを箇条書きにするサンプルコードと表示結果を確認してみましょう。

<ol>
  <li>カレー</li>
  <li>ラーメン</li>
  <li>ステーキ</li>
</ol>
olタグを使用した表示結果
olタグを使用した表示結果

olタグ内に記載したテキストの先頭に番号が振られており、正しく箇条書きになっていることが確認出来ました。

liタグの中にulタグを組み込む

目次
目次

皆さん一度はブログやサイトなどの目次でこのような形を見かけたことはないでしょうか?

これはulタグまたはolタグで作られており、階層になっている箇所はliタグの中にさらにulタグまたはolタグを組み込んで表示させています。

<ol>
  <li>
    赤いフルーツ
    <ul>
      <li>リンゴ</li>
      <li>イチゴ</li>
      <li>スイカ</li>
    </ul>
  </li>
  <li>
    青いフルーツ
    <ul>
      <li>ブドウ</li>
      <li>プルーン</li>
      <li>ブルーベリー</li>
    </ul>
  </li>
</ol>
liタグ内にulタグを組み込んだ表示結果
liタグ内にulタグを組み込んだ表示結果

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村