<ul><li>リスト項目1</li><li>リスト項目2</li>‥‥(必要数のリスト項目)</ul>
要素名 | 属性名 | 説明 | 非推奨 | 必須属性 |
---|---|---|---|---|
ul | 番号なしリスト | |||
type | マークの種類 | 非推奨 | ||
compact | 詰めて表示 | 非推奨 | ||
class | クラス名 | |||
id | ID名 | |||
title | 補足情報 | |||
style | スタイルシート | |||
lang | 言語コード | |||
dir | 文字表記の方向 | |||
要素名 | 属性名 | 説明 | 非推奨 | 必須属性 |
li | リスト項目 | |||
type | マークの種類 | 非推奨 | ||
value | 番号 | 非推奨 | ||
class | クラス名 | |||
id | ID名 | |||
title | 補足情報 | |||
style | スタイルシート | |||
lang | 言語コード | |||
dir | 文字表記の方向 |
ul要素は、丸や四角などのマークの付いたリスト形式で表示します。リスト全体を<ul>〜</ul>で囲み、
その中で各項目を<li>〜</li>で囲みます。li要素の内容は、インライン要素だけでなくブロックレベル要素(
リストも含む)もいれることができます。
普通は、全体にインデントされた状態で、各項目は自動的に改行されて表示されます。マークは黒丸が一般的ですが、プラウザによっては
黒丸で表示されるとは限りません。
Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<base href="http://www.abcd.com/efg/index.html">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="制作者名">
<meta name="description" content="内容の紹介">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,・・・">
<link rel="start" href="start.html">
<link rel="index" href="index.html">
<title>マーク付きのリストを作る。</title>
</head>
<body>
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
<li>リスト項目4</li>
</ul>
<ul>
<li><p>リスト項目1</p></li>
<li><p>リスト項目2</p></li>
<li><p>リスト項目3</p></li>
<li><p>リスト項目4</p></li>
</ul>
</body>
</html>
<html lang="ja">
<head>
<base href="http://www.abcd.com/efg/index.html">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="制作者名">
<meta name="description" content="内容の紹介">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,・・・">
<link rel="start" href="start.html">
<link rel="index" href="index.html">
<title>マーク付きのリストを作る。</title>
</head>
<body>
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
<li>リスト項目4</li>
</ul>
<ul>
<li><p>リスト項目1</p></li>
<li><p>リスト項目2</p></li>
<li><p>リスト項目3</p></li>
<li><p>リスト項目4</p></li>
</ul>
</body>
</html>
Internet Explorer8での表示例
