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

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

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

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

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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>