<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>順序なしリストに関して</title>
  </head>

  <body>
    <ul>
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ul>
  </body>
</html>

出力結果

項目1
項目2
項目3

属性値

コマンド	説明
type	黒丸、白丸、黒い四角の指定

type

黒丸、白丸、黒い四角の指定ができます。

reversed属性

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>順序なしリスト(type属性)に関して</title>
  </head>
  <body>
    <ul type="disc">
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ul>
    <ul type="circle">
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ul>
    <ul type="square">
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ul>
  </body>
</html>

出力結果

項目1
項目2
項目3

項目1
項目2
項目3

項目1
項目2
項目3

順序つきリスト

順序つきリストは、ol要素とli要素で構成される番号付きリストを作成するための要素になります。

ol要素、li要素

記法

<ol>
　<li>リストの項目</li>
</ol>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>順序つきリストに関して</title>
  </head>

  <body>
    <ol>
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ol>
  </body>
</html>

出力結果

項目1
項目2
項目3

属性値

コマンド	説明
reversed	リスト順を逆
start	リスト項目のスタート番号指定
type	リストの番号タイプを指定

reversed

リストの順番を逆にします。

reversed属性

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>順序つきリスト(reversed属性)に関して</title>
  </head>
  <body>
    <ol reversed>
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ol>
  </body>
</html>

出力結果

項目1
項目2
項目3

start

リスト項目のスタート番号を指定します。

start属性

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>順序つきリスト(start属性)に関して</title>
  </head>
  <body>
    <ol start="10">
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ol>
  </body>
</html>

出力結果

項目1
項目2
項目3

type

リストの番号タイプを指定するために使用できるタイプになります。

type属性

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>順序つきリスト(type属性)に関して</title>
  </head>
  <body>
    <ol type="1">
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ol>
    <ol type="A">
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ol>
    <ol type="a">
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ol>
    <ol type="I">
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ol>
    <ol type="i">
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
    </ol>
  </body>
</html>

出力結果

項目1
項目2
項目3

項目1
項目2
項目3

項目1
項目2
項目3

項目1
項目2
項目3

項目1
項目2
項目3