大学に入ったばかりの頃、HTMLを軽く習った記憶があるんですが……ほとんど覚えてない！ ということで、復習がてらリスト表示について改めてまとめてみます。<ol>、<ul>、<li>タグの使い方と、入れ子構造の作り方を解説します。
1. 順序付きリスト：<ol>タグ
<ol>タグは、番号付きのリストを作成するために使用します。リストの項目は自動的に番号が振られ、順番が明確になります。
<ol>
<li>最初の項目</li>
<li>2番目の項目</li>
<li>3番目の項目</li>
</ol>
出力結果:
- 最初の項目
- 2番目の項目
- 3番目の項目
<ol>タグには、番号の開始値や種類を指定する属性があります。
-
type属性: 番号の種類を指定します。-
1(デフォルト): アラビア数字 (1, 2, 3...) -
A: 大文字アルファベット (A, B, C...) -
a: 小文字アルファベット (a, b, c...) -
I: 大文字ローマ数字 (I, II, III...) -
i: 小文字ローマ数字 (i, ii, iii...)
-
-
start属性: 番号の開始値を指定します。
<ol type="A" start="3">
<li>3番目の項目 (C)</li>
<li>4番目の項目 (D)</li>
<li>5番目の項目 (E)</li>
</ol>
出力結果:
C. 3番目の項目 (C)
D. 4番目の項目 (D)
E. 5番目の項目 (E)
2. 順序なしリスト：<ul>タグ
<ul>タグは、箇条書きのリストを作成するために使用します。リストの項目には、デフォルトで黒丸が表示されます。
<ul>
<li>最初の項目</li>
<li>2番目の項目</li>
<li>3番目の項目</li>
</ul>
出力結果:
- 最初の項目
- 2番目の項目
- 3番目の項目
<ul>タグでは、type属性を使って箇条書きの種類を変更できますが、現在ではCSSでスタイルを設定するのが一般的です。
3. リストの入れ子構造
<ol>タグと<ul>タグは、入れ子にして階層構造を持ったリストを作成できます。<li>タグの中に、さらに<ol>タグや<ul>タグを配置することで実現します。
<ol>
<li>果物
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
</li>
<li>野菜
<ul>
<li>にんじん</li>
<li>トマト</li>
<li>きゅうり</li>
</ul>
</li>
</ol>
出力結果:
- 果物
- りんご
- バナナ
- オレンジ
- 野菜
- にんじん
- トマト
- きゅうり
4. まとめ
<ol>、<ul>、<li>タグを適切に使うことで、Webページの情報を整理し、ユーザーにとって見やすく理解しやすいコンテンツを作成できます。入れ子構造を活用することで、より複雑な情報を階層的に表現することも可能です。 リストのスタイルはCSSで細かく調整できるので、Webサイトのデザインに合わせてカスタマイズしましょう。