順序付きリスト：ol、start、reversed、type
番号付きリストを作成し、その順序をカスタマイズします。
「順序付きリスト：ol、start、reversed、type」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
順序付きリストとは
順序付きリストは、順序が重要な項目を表示します：
<ol>
<li>Install Node.js</li>
<li>Create project folder</li>
<li>Run npm init</li>
<li>Install dependencies</li>
</ol>ol要素
<ol>（順序付きリスト）要素は、デフォルトでリスト項目を連続した番号付きで表示します：
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->start属性
start属性で開始番号を設定します：
<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>
<ol start="4">
<li>Configure the database</li>
<li>Set environment variables</li>
<li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->reversed属性
reversed属性を指定すると、番号が増えるのではなく減っていきます：
<!-- Top 3 countdown -->
<ol reversed>
<li>Bronze: 95 points</li>
<li>Silver: 98 points</li>
<li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->type属性
type属性でマーカーのスタイルを変更します：
<ol type="1">...</ol> <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol> <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol> <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol> <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol> <!-- I, II, III (uppercase Roman) -->CSSとHTMLにおけるtype
HTMLのtype属性よりも、CSSのlist-style-typeを優先してください：
<!-- HTML type (still valid): -->
<ol type="A">
<li>Option A</li>
</ol>
<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
list-style-type: upper-alpha;
}
-->
<ol class="lettered">
<li>Option A</li>
</ol>liのvalue属性
valueを使用すると、個々のリスト項目の番号を上書きできます：
<ol>
<li>First item</li>
<li value="10">Tenth item</li> <!-- jumps to 10 -->
<li>Eleventh item</li> <!-- continues: 11 -->
</ol>olとulの入れ子
リストは入れ子にできます。順序付きリストと順序なしリストを組み合わせることもできます：
<ol>
<li>
Install tools
<ul>
<li>VS Code</li>
<li>Node.js</li>
</ul>
</li>
<li>Create project</li>
<li>Write code</li>
</ol>意味的な使用例
順序に意味がある場合は<ol>を使用します：
- 手順に沿った説明
- ランキング形式の結果（トップ10リストなど）
- 法的文書のセクション
- レシピの手順
- 番号付きセクションを含む目次
CSSでのカウンターリセット
CSSカウンターを使用すると、リストの番号付けスタイルを完全に制御できます：
ol {
list-style: none;
counter-reset: step;
}
ol li {
counter-increment: step;
}
ol li::before {
content: 'Step ' counter(step) ': ';
font-weight: bold;
color: #0070f3;
}パンくずリストにolを使う
パンくずナビゲーションは、意味的には順序付きリストです：
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/docs">Documentation</a></li>
<li><span aria-current="page">HTML Lists</span></li>
</ol>
</nav>クイックチェック
olの番号を逆順にする属性はどれですか？
まとめ：順序付きリスト
順序付きリストの基本：
<ol>— 順序が重要な連続リストstart— カスタム番号から番号付けを開始しますreversed— 番号を減らしていきますtype— マーカーを変更します：1、a、A、i、I<li>のvalue— 個々の項目番号を上書きします- さらに細かく制御するには、CSSの
list-style-typeとカウンターを使用します
よくある質問
「順序付きリスト：ol、start、reversed、type」レッスンは無料ですか？
はい。「順序付きリスト：ol、start、reversed、type」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「順序付きリスト：ol、start、reversed、type」で何を学びますか？
番号付きリストを作成し、その順序をカスタマイズします。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「順序付きリスト：ol、start、reversed、type」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 順序なしリスト：ulとli
- 順序付きリスト：ol、start、reversed、type
- 説明リスト：dl、dt、dd
- 入れ子のリストとリストのスタイル