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

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

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

本書情報
著者	Mana
発売日	2019/3/16
ページ数	280ページ
Kindle版	○
レビュー (Amazon)	(1,654件)

１冊ですべて身につくＨＴＭＬ＆ＣＳＳとＷｅｂデザイン入門講座 /ＳＢクリエイティブ/Ｍａｎａ

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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

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

動画の詳細はこちら

Contents

1 ドットの箇条書き(ulタグ)
- 1.1 ulタグを使ったサンプルコード
2 番号の箇条書き(olタグ)
- 2.1 olタグを使ったサンプルコード
3 liタグの中にulタグを組み込む

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

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

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>