HTML ul liタグでリストを作る方法｜順序なしリストの書き方

📌

結論

<ul>と<li>で箇条書きが作れます

Webページで箇条書きを表示したいとき、使うのがリストタグです。

📝 実際のコードはこちら

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

ulとliの親子関係

リストは2つのタグをセットで使います。

タグ	意味	役割
`<ul>`	順序なしリスト（unordered list）	リスト全体の外枠
`<li>`	リスト項目（list item）	各項目

<ul> が箱で、<li> が中身というイメージです。<li> は必ず <ul> の中に入れてください。

順序なしとは、項目の順番に意味がないということです。好きな果物を並べる場合、りんごが先でもみかんが先でもいいですよね。そういうときに <ul> を使います。逆に手順のように順番が大事なときは <ol>（順序付きリスト）を使います。これは後の記事で解説します。

・<li> を <ul> の外に書く → ルール違反。必ず <ul> の中に・<ul> なしで <li> だけ書く → 表示はされるが文法エラー・</li> を忘れる → 閉じタグは必須

・箇条書きは <ul> + <li> のセットで作る・<li> は必ず <ul> の中に入れる・順番が大事なときは <ol> を使う（次回解説）

好きな果物を3つ、リストで表示してみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

好きな果物3つをulとliでリストにしてください。下のひな形の___の部分を書き換えてください。

詰まったらヒント

ulがリストの外側、liが各項目です。liは<ul>と</ul>の間に書きます。