リストを作る

HTMLを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ul>

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

表示サンプル

  • リスト項目1
  • リスト項目2
  • リスト項目3
  1. リスト項目1
  2. リスト項目2
  3. リスト項目3

解説

順番のないリストを作成する際は「UL」タグ、順番のあるリストを作成する際は「OL」タグを使用します。リストの各項目は「<li>」と「</li>」に囲むことにより示します。各項目の頭につく「マーク」を変える方法は以下を参照下さい。

リストのマークを変える方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
ul.typeA { list-style: none; }
ul.typeB { list-style: disk; }
ul.typeC { list-style: circle; }
ul.typeD { list-style: square; }
ol.typeE { list-style: lower-roman; }
ol.typeF { list-style: upper-roman; }
ol.typeG { list-style: lower-alpha; }
ol.typeH { list-style: upper-alpha; }
-->
</style>
</head>
<body>
<ul class="typeA"><li>項目1</li><li>項目2</li></ul>
<ul class="typeB"><li>項目1</li><li>項目2</li></ul>
<ul class="typeC"><li>項目1</li><li>項目2</li></ul>
<ul class="typeD"><li>項目1</li><li>項目2</li></ul>
<ol class="typeE"><li>項目1</li><li>項目2</li></ol>
<ol class="typeF"><li>項目1</li><li>項目2</li></ol>
<ol class="typeG"><li>項目1</li><li>項目2</li></ol>
<ol class="typeH"><li>項目1</li><li>項目2</li></ol>
</body>
</html>

表示サンプル

  • 項目1
  • 項目2
  • 項目1
  • 項目2
  • 項目1
  • 項目2
  • 項目1
  • 項目2
  1. 項目1
  2. 項目2
  1. 項目1
  2. 項目2
  1. 項目1
  2. 項目2
  1. 項目1
  2. 項目2

解説

それぞれ個別に、

<ol style="list-style:upper-alpha;">

のように記述をすることも出来ます。HTMLタグだけを使用してマークを変える方法もあるのですが見栄えに関する記述ですのでスタイルシートを使用した方が良いでしょうね。

  • 「disk」を指定すると黒丸マークで表示されます。
  • 「none」を指定しますとマーク自体が消えてしまいます。
  • 「circle」を指定しますと白丸になりますよね。
  • 「square」を指定しますと黒四角になります
  • 「lower-roman」はローマ数字(小文字)で表示されます。
  • 「upper-roman」はローマ数字(大文字)で表示されます。
  • 「lower-alpha」はローマ字(小文字)で表示されます。
  • 「upper-alpha」はローマ字(大文字)で表示されます。