iPentec.com / Doc / HTML / HTMLタグ / HTMLリスト

HTML リストタグ

順序付きリストの記述 (OLタグ) - HTML

HTMLで数字の見出しのついた項目リストを作成するコードを紹介します。

概要

HTMLで順番のある項目のリストを作成するには、OLタグ、LIタグを利用します。

書式

書式は次の通りです。

  <ol>
    <li>項目</li>
    <li>項目</li>
    ......
    <li>項目</li>
  </ol>

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
  <div>順番つきのリストのデモです</div>
  <ol>
    <li>項目A</li>
    <li>項目B</li>
    <li>項目C</li>
    <li>項目D</li>
    <li>項目F</li>
    <li>項目G</li>
    <li>項目H</li>
  </ol> 
</body>
</html>

実行結果

上記のHTMLファイルをWebブラウザで表示します。
下図の画面が表示されます。

項目ごとに改行され、各項目の先頭に数字の見出しがついています。HTMLで順番付きの項目リストを表現できました。

項目の先頭の数値を変える場合

項目の先頭を数値ではなく、a,b,cや　I, II, III 表示に変える場合はこちらの記事を参照してください。
項目の先頭に画像を使用する場合はこちらの記事を参照してください。

このページのキーワード

項目リスト数字
HTML OLタグ

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

HTML リストタグ

順序付きリストの記述 (OLタグ) - HTML

概要

書式

コード

実行結果

関連するページ