番号付きリストを記述する方法 - OLタグ、LIタグの基本と使い方
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 表示に変える場合はこちらの記事を参照してください。
- 項目の先頭に画像を使用する場合はこちらの記事を参照してください。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
掲載日: 2012-09-02
改訂日: 2024-09-21
