【HTML】ol要素、li要素の使い方【順序のあるリストを表します】

Program

順序のあるリストは、ol要素とli要素を使って表しましょう。

ol要素とli要素の基本的な使い方

まずは、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ol要素、li要素</title>
</head>
<body>
    <ol>
        <li>鳥取県</li>
        <li>島根県</li>
        <li>岡山県</li>
        <li>広島県</li>
        <li>山口県</li>        
    </ol>
</body>
</html>

body要素の中に、順序のあるリストを表すol要素があります。

ol要素の中には、一つ一つのリスト項目を示すli要素が、5つあります。

このため、ブラウザでの表示結果の通り、5つのリスト項目が、1から5の順序(正順)に沿った番号を付与されて表示されました。

リスト項目に逆順の番号を付与する

次に、リスト項目に逆順の番号を付与する例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ol要素、li要素</title>
</head>
<body>
    <ol reversed>
        <li>鳥取県</li>
        <li>島根県</li>
        <li>岡山県</li>
        <li>広島県</li>
        <li>山口県</li>        
    </ol>
</body>
</html>

先ほどのプログラムのol要素に、reversed属性を追加しました。

そして、ブラウザでの表示結果の通り、5つのリスト項目が、5から1の順序(逆順)に沿った番号を付与されて表示されました。

このように、ol要素にreversed属性を付与することで、リスト項目に逆順の番号を付与することができます。

つまり、ol要素に含まれる複数のli要素について、最初のli要素から最後のli要素に亘って表示される番号を、反転させて付与することができます。

リスト項目に「最初の番号(1)」以外の番号から開始する順番を付与する

次に、リスト項目に「最初の番号(1)」以外の番号から開始する順番を付与する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ol要素、li要素</title>
</head>
<body>
    <ol>
        <li value="3">鳥取県</li>
        <li>島根県</li>
        <li>岡山県</li>
        <li>広島県</li>
        <li>山口県</li>        
    </ol>
    <ol>
        <li>鳥取県</li>
        <li>島根県</li>
        <li>岡山県</li>
        <li value="10">広島県</li>
        <li>山口県</li>        
    </ol>
</body>
</html>

プログラムの記述の通り、複数のli要素を含むol要素を2ブロック記述しました。

1つ目のol要素のブロックでは、最初のli要素に、value属性(属性値:3)を付与しました。

そして、ブラウザでの表示結果の通り、最初のリスト項目(value属性を付与したリスト項目)に3の番号が付与され、2つ目以降のli要素について4〜7の番号が付与されて表示されました。

また、2つ目のol要素のブロックでは、4番目のli要素について、value属性(属性値:10)を付与しました。

そして、ブラウザでの表示結果の通り、4番目のli要素(value属性を付与したリスト項目)に10の番号が付与され、5番目のli要素に11の番号が付与されて表示されました。その一方で、1番目〜3番目のli要素には、1〜3の番号が付与されて表示されました。

このように、複数あるリスト項目のうち、「特定のリスト項目」にvalue属性によって「特定の数字」の属性値を付与することで、「特定のリスト項目」以降の番号は「特定の数字」を開始の番号として、順番に番号が表示されることになります。

リスト項目の番号の表示形態を指定する(アラビア数字)

次に、リスト項目の番号の表示形態を指定する例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ol要素、li要素</title>
</head>
<body>
    <ol start="6" type="1">
        <li>鳥取県</li>
        <li>島根県</li>
        <li>岡山県</li>
        <li>広島県</li>
        <li>山口県</li>        
    </ol>
</body>
</html>

プログラムの記述の通り、複数のli要素を含むol要素を記述しました。

ol要素には、start属性(属性値:6)とtype属性(属性値:1)とが付与されています。

そして、ブラウザでの表示結果の通り、5つのリスト項目が、6から10の順序に沿った番号を付与されて表示されました。

また、type属性の属性値として「(数字の)1」を指定しているため、アラビア数字の表示形態として番号が表示されています。

このように、start属性と共にtype属性(属性値:1)を付与することで、リスト項目の番号をアラビア数字で表示することができます。

リスト項目の番号の表示形態を指定する(アルファベット順)

次に、リスト項目の番号の表示形態について、アルファベット順に指定する例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ol要素、li要素</title>
</head>
<body>
    <ol start="6" type="a">
        <li>鳥取県</li>
        <li>島根県</li>
        <li>岡山県</li>
        <li>広島県</li>
        <li>山口県</li>        
    </ol>
    <ol start="6" type="A">
        <li>鳥取県</li>
        <li>島根県</li>
        <li>岡山県</li>
        <li>広島県</li>
        <li>山口県</li>        
    </ol>
</body>
</html>

プログラムの記述の通り、複数のli要素を含むol要素を2つ記述しました。

1つ目のol要素には、start属性(属性値:6)とtype属性(属性値:a)とが付与されています。

そして、ブラウザでの表示結果の通り、5つのリスト項目が、アルファベットの順番として6番目の「f」から10番目の「j」の順序に沿った順序で、順番が付与されました。

また、2つ目のol要素には、start属性(属性値:6)とtype属性(属性値:A)とが付与されています。

そして、ブラウザでの表示結果の通り、5つのリスト項目が、アルファベットの順番として6番目の「F」から10番目の「J」の順序に沿った順序で、順番が付与されました。

このように、start属性と共にtype属性(属性値:aまたはA)を付与することで、リスト項目の順番をアルファベット順で表示することができます。

リスト項目の番号の表示形態を指定する(ローマ数字)

次に、リスト項目の番号の表示形態について、ローマ数字を指定する例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ol要素、li要素</title>
</head>
<body>
    <ol start="6" type="i">
        <li>鳥取県</li>
        <li>島根県</li>
        <li>岡山県</li>
        <li>広島県</li>
        <li>山口県</li>        
    </ol>
    <ol start="6" type="I">
        <li>鳥取県</li>
        <li>島根県</li>
        <li>岡山県</li>
        <li>広島県</li>
        <li>山口県</li>        
    </ol>
</body>
</html>

プログラムの記述の通り、複数のli要素を含むol要素を2つ記述しました。

1つ目のol要素には、start属性(属性値:6)とtype属性(属性値:i(アルファベットの小文字のi))とが付与されています。

そして、ブラウザでの表示結果の通り、5つのリスト項目が、ローマ数字の順番として6番目の「vi」から10番目の「x」の順序に沿った順序で、順番が付与されました。

また、2つ目のol要素には、start属性(属性値:6)とtype属性(属性値:I(アルファベットの大文字のI))とが付与されています。

そして、ブラウザでの表示結果の通り、5つのリスト項目が、ローマ数字の順番として6番目の「VI」から10番目の「X」の順序に沿った順序で、順番が付与されました。

このように、start属性と共にtype属性(属性値:iまたはI)を付与することで、リスト項目の順番をローマ数字の順番で表示することができます。

各種ブラウザでの表示結果

ol要素、li要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
ol要素
li要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、ol要素、li要素の使い方について、ご参考になさってください。

タイトルとURLをコピーしました