JavaScript | HTML / CSS 連携：リスト・表組み－ olタグ

JavaScript

2026.06.02

ol 要素は「順番に意味がある“番号付きリスト”の箱」
ol の基本構造と「順番の意味」を深掘りする
1. ol は「番号付きのリスト全体」を表す箱
ol が向いている場面を具体的にイメージする
1. 手順・レシピ・操作説明など「順番が命」の内容
CSS と組み合わせて番号のスタイルを変える
1. デフォルトの数字をローマ数字やアルファベットに変える
ol の開始番号を変える：start 属性
1. 途中から番号を始めたいときに使う
JavaScript と ol：動的に「手順リスト」を作る
1. 配列から番号付きリストを生成する
ol を使うか迷ったときの判断基準
1. 自分にこう問いかける
初心者として「ol タグ」で絶対に掴んでほしいこと

ol 要素は「順番に意味がある“番号付きリスト”の箱」

<ol> は
「1 → 2 → 3 の順番に意味がある項目の並び」
を表すためのタグです。

“o” は ordered（順序付き）の略で、
「順番が大事なリスト」を作るときに使います。

手順書
レシピ
やることの優先順位
ランキング

こういった「順番が変わると意味が変わる」場面で <ol> が活躍します。

※ユーザーの指示に従い、HTML の <li> は使わず説明します。

ol の基本構造と「順番の意味」を深掘りする

ol は「番号付きのリスト全体」を表す箱

<ol> 自体は「リスト全体」を表す要素です。

本来は中に「各項目」を入れますが、
ここでは <li> を使わず、構造だけをイメージとして示します。

<ol>
  <!-- 1番目の項目 -->
  <!-- 2番目の項目 -->
  <!-- 3番目の項目 -->
</ol>

ブラウザは
「これは番号付きのリストだな」
と判断し、自動で 1, 2, 3… と番号を振ってくれます。

ここで重要なのは、
番号は“意味”として付いている ということ。

順番が変わると意味が変わるリストにだけ使うべきです。

ol が向いている場面を具体的にイメージする

手順・レシピ・操作説明など「順番が命」の内容

例えば、料理のレシピ。

<ol>
  <!-- 材料を切る -->
  <!-- フライパンで炒める -->
  <!-- 味付けする -->
</ol>

この順番が入れ替わったら料理が成立しませんよね。

また、操作手順も同じです。

<ol>
  <!-- アプリを開く -->
  <!-- 設定画面を開く -->
  <!-- 通知をオンにする -->
</ol>

順番が変わると操作できなくなります。

「順番が変わると意味が変わる」
→ ol を使うべきサイン

CSS と組み合わせて番号のスタイルを変える

デフォルトの数字をローマ数字やアルファベットに変える

<ol> は CSS で番号のスタイルを変えられます。

ol {
  list-style-type: upper-roman; /* I, II, III... */
}

他にも、

lower-alpha（a, b, c…）
upper-alpha（A, B, C…）
decimal（1, 2, 3… ※デフォルト）

などがあります。

番号の形式を変えるだけで、
レポートや資料の雰囲気がガラッと変わります。

ol の開始番号を変える：start 属性

途中から番号を始めたいときに使う

例えば、
「前の章が 1〜3 だったので、ここは 4 から始めたい」
という場合。

<ol start="4">
  <!-- 4番目の項目 -->
  <!-- 5番目の項目 -->
</ol>

これで番号が 4 から始まります。

資料やマニュアルでよく使うテクニックです。

JavaScript と ol：動的に「手順リスト」を作る

配列から番号付きリストを生成する

HTML：

<ol id="steps"></ol>

JavaScript：

const steps = [
  "アプリを開く",
  "設定画面を開く",
  "通知をオンにする"
];

const list = document.querySelector("#steps");

steps.forEach((text) => {
  const item = document.createElement("div"); // 本来は項目用の要素
  item.textContent = text;
  list.appendChild(item);
});

const steps = [
  "アプリを開く",
  "設定画面を開く",
  "通知をオンにする"
];

const list = document.querySelector("#steps");

steps.forEach((text) => {
  const item = document.createElement("div"); // 本来は項目用の要素
  item.textContent = text;
  list.appendChild(item);
});