HTML ol liタグで番号付きリストを作る方法

📌

結論

<ol> と <li> で番号付きリストが作れます

手順やランキングなど、順番が大事なリストには <ol> を使います。

📝 実際のコードはこちら

<ol>
  <li>材料を切る</li>
  <li>鍋に入れる</li>
  <li>煮る</li>
</ol>

番号は自動で付くので、自分で1. 2. 3.と書く必要はありません。

olとulの違い

タグ	名前	表示	使いどころ
`<ol>`	順序付きリスト	1. 2. 3.	手順、ランキング
`<ul>`	順序なしリスト	・・・	箇条書き

迷ったら順番を入れ替えても意味が変わらないか？と考えてみてください。入れ替えても問題ないなら <ul>、順番に意味があるなら <ol> です。

・番号付きリストは <ol> + <li> で作る・<ol> は順番に意味があるときに使う・番号は自動で付く

好きな手順やランキングを3ステップで書いてみましょう。（例：料理の手順、好きなものランキングなど）

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

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

■ 演習

好きな手順やランキングをolとliで3ステップ書いてください。（例：料理の手順、好きなものランキングなど）

詰まったらヒント

olはordered list（順序付きリスト）です。