一覧やメニューに利用 ul、ol、liのリストタグ(要素)
箇条書きや番号つきのリストを作成するにはリストに関連するタグ(要素)を利用します。
リストに関連するタグにはul、ol、li、dl、dt、dd等があります。
今回は一番良く利用されるul、ol、liの要素について解説します。
箇条書きリストと番号付きリスト
まず、リストは一覧の作成やメニューなどに利用されるもので、代表的なリストには箇条書きリストと番号付きリストがあります。
(他にも定義リストがあります。)
箇条書きリスト例
- html
- head
- body
番号付きリスト例
- はじめに
- タグとは
- 要素、属性、属性値
違いは上のとおり、番号か番号じゃないかなのですが、箇条書きリストは番号付きリストと違い、並び順を持っていません(序列なし)。
箇条書きリストと番号付きリストのタグ記述
リストを箇条書きリストにする際にはulという要素を利用し、番号付きリストにする際にはolという要素を利用します。
また、入れ子で各リストをli要素で設定します。上のリスト例をHTMLタグで表記すると、以下のようになります。
箇条書きリスト例(タグ)
<ul>
<li>html</li>
<li>head</li>
<li>body</li>
</ul>
番号付きリスト例(タグ)
<ol>
<li>はじめに</li>
<li>タグとは</li>
<li>要素、属性、属性値</li>
</ol>
要素 | ul | 箇条書き(非序列)リストを設定する |
---|---|---|
属性 | type | リストマークを設定する |
要素 | ol | 番号付き(序列)リストを設定する |
---|---|---|
属性 | type | リストマークを設定する |
start | 開始番号を設定する |
要素 | li | ulやolの入れ子で記述され、各リストを設定できる |
---|---|---|
属性 | value | リストマークの設定ができる |
type | リストマークの設定ができる。値にはdisc(黒丸)、square(四角)、circle(白丸)があり、ブラウザによって若干表示は異なる。 |
---|
type | リストマークの設定ができる。値には1、a、A、i、I※があり、ブラウザによって若干表示は異なる。 |
---|---|
start | 開始番号の設定ができる。 |
※1(アラビア数字)、a(アルファベット小文字)、A(アルファベット大文字)、i(ローマ数字小文字)、I(ローマ数字大文字)の設定となります。
value | リストマークの設定ができる。例えばolで囲まれたリストは連番になるが、番号を飛ばしたりすることも可能※ |
---|
※以下例
- liのvalue属性の値が30
- liのvalue属性の値が50
- liのvalue属性は設定しない
練習
下のリストをタグで入力欄に記述して下さい。
- 電源を入れよう
- 表示画面の説明
- 文字の打ち方
結果が表示されます
スポンサードリンク
スポンサードリンク