TECH I.S.

HTML 順序付きリスト


HTML<ol>タグは順序付きリストを定義します。番号付きリストは、数字またはアルファベット順です。


順序付き HTML リスト

番号付きリストは、<ol>鬼ごっこ。各リスト項目は<li>鬼ごっこ。

リスト項目はデフォルトで数字でマークされます:

<ol>  <li>Coffee</li>   <li>Tea</li>  <li>Milk</li> </ol>

自分で試してみる »


順序付き HTML リスト - Type 属性

typeの属性<ol>タグで、リスト アイテム マーカーのタイプを定義します。


タイプ 説明
タイプ="1" リスト項目には番号が付けられます (デフォルト)
タイプ="A" リスト項目には大文字で番号が付けられます
タイプ="a" リスト項目には小文字で番号が付けられます
タイプ="私" リスト項目には大文字のローマ数字で番号が付けられます
タイプ="私" リスト項目には小文字のローマ数字で番号が付けられます

数字:

<ol type="1">   <li>Coffee</li>   <li>Tea</li>   <li>Milk</li> </ol>

自分で試してみる »

大文字:

<ol type="A">   <li>Coffee</li>   <li>Tea</li>   <li>Milk</li> </ol>

自分で試してみる »

小文字:

<ol type="a">   <li>Coffee</li>   <li>Tea</li>   <li>Milk</li> </ol>

自分で試してみる »

大文字のローマ数字:

<ol type="I">   <li>Coffee</li>   <li>Tea</li>   <li>Milk</li> </ol>

自分で試してみる »

小文字のローマ数字:

<ol type="i">   <li>Coffee</li>   <li>Tea</li>   <li>Milk</li> </ol>

自分で試してみる »



コントロールリストのカウント

デフォルトでは、順序付きリストは 1 からカウントを開始します。指定した数からカウントを開始する場合は、start属性:

<ol start="50">   <li>Coffee</li>   <li>Tea</li>   <li>Milk</li> </ol>

自分で試してみる »


ネストされた HTML リスト

リストはネストできます (リスト内のリスト):

<ol>   <li>Coffee</li>   <li>Tea     <ol>       <li>Black tea</li>       <li>Green tea</li>     </ol>   </li>   <li>Milk</li> </ol>

自分で試してみる »

ノート:リスト項目 (<li>) には、新しいリストや、画像やリンクなどの他の HTML 要素を含めることができます。


章のまとめ

  • HTML を使用する<ol>順序付きリストを定義する要素
  • HTML を使用するtype番号付けタイプを定義する属性
  • HTML を使用する<li>リスト項目を定義する要素
  • リストはネスト可能
  • リスト項目には他の HTML 要素を含めることができます

HTML リスト タグ

鬼ごっこ 説明
<ul> 順序なしリストを定義します
<ol> 順序付きリストを定義します
<li> リスト項目を定義します
<dl> 説明リストを定義します
<dt> 説明リストで用語を定義します
<dd> 説明リストで用語を説明します

利用可能なすべての HTML タグの完全なリストについては、HTML タグ リファレンス.



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細