Webページで手順書やランキング、目次などを作成する際、「1. 2. 3. …」と順番に番号が振られたリストは欠かせません。
HTMLでは <ol> タグを使うことで簡単に実装できますが、デフォルトのままでは「ただの数字」しか表示されません。
「(1) や [1] のように括弧をつけたい」
「途中から番号をスタートさせたい」
このような要望に応えるためには、HTMLの属性やCSSの知識が必要です。
この記事では、HTMLの番号付きリスト（<ol>）の基本的な使い方から、属性によるカスタマイズ、そしてCSSを使ったおしゃれなデザイン（括弧付きなど）まで、現在のWeb制作で役立つテクニックをサンプルコード付きで詳しく解説します。
 執筆者：マヒロ |
|
番号付きリストの基本：olタグとliタグ
番号付きリストを作成するには、親要素として <ol>（Ordered List）タグを使い、その中に子要素として <li>（List Item）タグを記述します。
ちなみに、番号なしの箇条書き（・）を作りたい場合は <ul>（Unordered List）を使います。
基本的な書き方
<ol>
<li>下準備をする</li>
<li>野菜を切る</li>
<li>肉を炒める</li>
</ol>
実行結果
- 下準備をする
- 野菜を切る
- 肉を炒める
<ol> で囲まれた範囲が「番号付きリスト」として認識されます。
ブラウザが自動的に上から順に「1. 2. 3. …」と番号を振ってくれるため、手動で「1.」と入力する必要はありません。
項目が増減しても自動で番号が採番され直すのが最大のメリットです。
番号の種類を変更する（type属性）
「1. 2. 3.」ではなく、「a. b. c.」や「I. II. III.」のように番号のスタイルを変えたい場合は、<ol> タグに type 属性を指定します。
CSSの list-style-type プロパティでも変更可能ですが、HTMLの属性として指定する方法が最も手軽です。
指定できる値の一覧
| type属性の値 | 表示形式 | 例 |
|---|---|---|
1 （デフォルト） |
算用数字 | 1. 2. 3. |
a |
英小文字 | a. b. c. |
A |
英大文字 | A. B. C. |
i |
ローマ数字（小） | i. ii. iii. |
I |
ローマ数字（大） | I. II. III. |
実装例：ローマ数字にする
<ol type="I">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ol>
実行結果
I. 第一章 II. 第二章 III. 第三章
開始番号や順序を変更する（start / reversed）
ランキングの続きを別の場所で書きたい場合や、カウントダウン形式にしたい場合など、番号のルールをカスタマイズしたいことがあります。
途中から番号を始める（start属性）
<ol> タグに start 属性を指定すると、その数字からカウントを開始できます。
<!-- 4からスタートする -->
<ol start="4">
<li>4位の項目</li>
<li>5位の項目</li>
<li>6位の項目</li>
</ol>
番号を逆順（カウントダウン）にする（reversed属性）
<ol> タグに reversed 属性を付けると、番号が大きい方から小さい方へと減っていく逆順リストになります。
<ol reversed>
<li>1位（番号は3と表示される）</li>
<li>2位（番号は2と表示される）</li>
<li>3位（番号は1と表示される）</li>
</ol>
reversed 属性は論理属性と呼ばれるもので、値（="true"など）を記述する必要はありません。
タグの中に reversed と書くだけで機能します。
項目の数に合わせて自動的に最大の数字からスタートしてくれます。
リストを「入れ子（ネスト）」にする方法
「1. メイン項目」の中に「1-1. サブ項目」を作りたい場合のように、リストの中にリストを入れる構造を「入れ子（ネスト）」と呼びます。
マニュアルや目次を作成する際によく使われます。
正しい入れ子の書き方
重要なルールは、<li> タグの中に、新たな <ol>（または <ul>）を書くということです。
<ol> の直下に <ol> を書いてしまうのはHTMLの文法違反です。
<ol>
<li>
野菜
<!-- liタグの中に新しいolを入れる -->
<ol>
<li>キャベツ</li>
<li>トマト</li>
</ol>
</li>
<li>
果物
<ol>
<li>リンゴ</li>
<li>ミカン</li>
</ol>
</li>
</ol>
実行結果
- 野菜
- キャベツ
- トマト
- 果物
- リンゴ
- ミカン
親の <li> の中に子の <ol> が包まれている構造です。
ブラウザのデフォルトスタイルでは、入れ子になったリストは自動的にインデント（字下げ）されて表示されます。
【CSS】括弧付き「(1)」やスタイルのカスタマイズ
HTMLの type 属性だけでは、「(1)」や「[1]」のような括弧付きの番号や、オリジナルのデザインを作ることはできません。
これらを実現するには、CSSの counter（カウンタ） 機能を使用します。
括弧付きの番号にするCSSコード
<ol> のデフォルトの番号を消して、CSSで番号を生成し直す手法です。
<ol class="parenthesis-list">
<li>重要ポイントA</li>
<li>重要ポイントB</li>
<li>重要ポイントC</li>
</ol>
<style>
/* デフォルトの番号を消す */
.parenthesis-list {
list-style-type: none;
counter-reset: my-counter; /* カウンタを初期化 */
padding-left: 0;
}
.parenthesis-list li {
position: relative;
padding-left: 2em; /* 番号の分だけ余白を空ける */
}
/* 擬似要素で番号を生成 */
.parenthesis-list li::before {
counter-increment: my-counter; /* カウンタを1増やす */
content: "(" counter(my-counter) ")"; /* (1) の形式で表示 */
/* 位置や色の調整 */
position: absolute;
left: 0;
color: #007bff;
font-weight: bold;
}
</style>
コードの解説
list-style-type: none;：HTML標準の数字（1. 2. 3.）を非表示にします。counter-reset：CSS内で数値を数えるための「カウンタ変数（ここではmy-counter）」をセットします。::before擬似要素：各<li>の前に要素を作り、contentプロパティで好きな文字を表示させます。content: "(" counter(...) ")";：ここがポイントです。カウンタの数字の前後に(と)を文字として結合させています。これにより(1)[1]Step.1など自由な表現が可能になります。
番号が表示されない時の原因と対処法
「<ol> タグを書いたのに数字が出ない！」というトラブルは、CSSのリセットや設定ミスが原因であることが多いです。
原因1：リセットCSSの影響
多くのWebサイトで使用されている「リセットCSS」には、ブラウザ間の差異をなくすために ol { list-style: none; } が設定されていることがあります。
これが効いていると番号は消えてしまいます。
対処法
番号を表示したい箇所にだけ、スタイルを上書きします。
/* クラスを指定して上書き */
.my-list {
list-style: decimal; /* 数字を表示する設定に戻す */
margin-left: 20px; /* 左の余白がないと画面外に切れることがあるので追加 */
}
原因2：overflow: hidden で切れている
番号（マーカー）は通常、コンテンツ領域の外側（左側）に表示されます（list-style-position: outside;）。
そのため、親要素に overflow: hidden; がかかっていたり、padding-left が 0 だったりすると、左側にはみ出した番号が見えなくなってしまうことがあります。
対処法
番号を内側に表示するように設定変更するか、左側の余白（padding）を確保します。
ol {
/* 番号をボックスの内側に入れる */
list-style-position: inside;
}
/* または */
ol {
/* 番号が表示されるスペースを確保 */
padding-left: 1.5em;
}
HTML/CSSのスキルを活かして年収を上げる方法
以上、HTML/CSSでの番号付きリストの作り方について解説してきました。
なお、HTMLやCSSのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。
エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。
