HTMLでの箇条書き「ul」「ol」「li」

2021年4月6日

ウェブページを作成する際、箇条書きを用いて、説明やリストアップすることがよくあります。

HTMLコードを用いて、箇条書きする際の書き方を紹介します。

スポンサーリンク

ulとliでの箇条書き

html" data-lang="HTML"><ul>
<li>一行目</li>
<li>二行目</li>
<li>三行目</li>
</ul>

<ul>~</ul>の中に箇条書きしたいリストを書き入れます。
<li>~</li>の中に各行の内容を書き入れます。

上記のコードのように書き入れると以下の様にリストの先頭に「・」を表示することができます。

  • 一行目
  • 二行目
  • 三行目

olとliでの箇条書き

html" data-lang="HTML"><ol>
<li>一行目</li>
<li>二行目</li>
<li>三行目</li>
</ol>

<ol>~</ol>の中に箇条書きしたいリストを書き入れます。
<li>~</li>の中に各行の内容を書き入れます。

上記のコードのように書き入れると以下のようにリストの先頭に行数を表示することができます。

  1. 一行目
  2. 二行目
  3. 三行目