アジェンダ
- HTMLのタグ
- リスト
- ol
- ul
- li
- 定義リスト
- dl
- dt
- dd
- リスト
- 実践
HTMLのタグ
リスト
同類の項目を列挙するのに。リストを使用する。
ol
順序の関係するリストを示すタグ。
ordered list のol。
ul
順序の関係しないリストを示すタグ。
unordered list のul。
li
リストの項目を示すタグ。
上記のolタグ、ulタグと合わせて使用する。
list のli。
定義リスト
定義リストとは、「項目名とその内容」を合わせて一つの項目、となっているリストである。
dl
定義リストを示すタグ。
definition list のdl。
dt
定義リストの項目のうち、項目名を示すタグ。
definition term のdt。
dd
定義リストの項目のうち、内容を示すタグ。
definition description のdd。
実践
上記のタグを使用して、以下のindex.htmlを作成した。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ki-ta</title>
</head>
<body>
<h1>アジェンダ</h1>
<hr>
<ol>
<li>
HTMLのタグ
<ul>
<li>
リスト
<ul>
<li>ol</li>
<li>ul</li>
<li>li</li>
</ul>
</li>
<li>
定義リスト
<ul>
<li>dl</li>
<li>dt</li>
<li>dd</li>
</ul>
</li>
</ul>
</li>
<li>実践</li>
<li>
用語説明
<dl>
<dt>リスト</dt>
<dd>同類の項目を列挙する。</dd>
<dt>定義リスト</dt>
<dd>「項目名とその内容」一つの項目として、項目を列挙する。</dd>
</dl>
</li>
</ol>
</body>
</html>
これをWebブラウザに表示させるとこんな感じ。
リストを入れ子にすると、インデントを深くして表示してくれる。
おわりに
今回は、リストに関する内容だった。
実践では、イメージ通りのものを作成できたので満足。
次回 >> ここ