• 無料でHTMLが学習できる

ウェブサイト制作

リスト

目次

番号を付けたい

リストに番号を付けたい時は、<ol>タグと<li>タグを使います。
<ol>とはorder listの頭文字をとったもので、順序のあるリストとなります。
<li>はリストの頭文字となっています。

順序のあるとは、1、2、3、・・・番号付きということです。
私が好きな食べ物の順番は、
1番カレーライス、2番ラーメン、3番ハンバーガーです。
これをリストを使って表すとこうなります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ウェブサイト制作の練習</title>
</head>
<body>
<h1>リスト</h1>
<hr>
<h2>番号を付けたい</h2>
<p>今、好きな食べ物は?</p>
<ol>
<li>カレーライス</li>
<li>ラーメン</li>
<li>ハンバーガー</li>
</ol>
</body>
</html>

このページのトップへ

番号は要らない

<ul>タグを使います。
unordered Listの頭文字をとったもので、順序のないリストという意味です。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ウェブサイト制作の練習</title>
</head>
<body>
<h1>リスト</h1>
<hr>
<h2>番号は要らない</h2>
<p>スーパー行くけど、買うものは?</p>
<ul>
<li>キャベツ</li>
<li>人参</li>
<li>玉葱</li>
</ul>
</body>
</html>

このページのトップへ

定義リストを作りたい

definition list と definition data

定義リストを作りたいときは<dl>と<dd>タグを使います。
definition = 定義

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ウェブサイト制作の練習</title>
</head>
<body>
<h1>リスト</h1>
<hr>
<h2>定義リストを作りたい</h2>
<dl>
<dt>卵100円</dt>
<dd>1000円以上お買い物を頂くと、卵1個100円でお買い求め頂けます。
</dd>
<dt>ポイント3倍の日</dt>
<dd>毎週水曜日のお買い物は、ポイント3倍お付けします。
</dd>
</dl>
</body>
</html>

このページのトップへ