HTML入門 | HTML基本要素 | HTMLリスト(list)

Tags:

リスト(list)とは、複数の要素を一列に並べた一覧や名簿を意味する。HTMLでは、複数の要素を一列に並べた一覧や名簿を表現できるタグが提供されている。

  1. 順序付きリスト(ordered list)
  2. 順序なしリスト(unordered list)
  3. 定義リスト(definition list)

順序付きリスト(ordered list)

順序付きリストは<ol>タグで作成し、そこに含まれる各リスト要素は<li>タグで作成する。各リスト要素の前には、デフォルトのマーカー(marker)としてアラビア数字が表示される。

<ul>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

コード実行

CSSのlist-style-typeプロパティを使用すると、リスト要素の前に位置するマーカー(marker)を別の形に変更できる。

  • decimal: 数字(デフォルト設定)
  • upper-alpha: 英大文字
  • lower-alpha: 英小文字
  • upper-roman: ローマ数字大文字
  • lower-roman: ローマ数字小文字
<p>decimal : 숫자 (기본설정)</p>
<ol>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-alpha : 영문 대문자</p>
<ol style="list-style-type: upper-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-alpha : 영문 소문자</p>
<ol style="list-style-type: lower-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-roman : 로마 숫자 대문자</p>
<ol style="list-style-type: upper-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-roman : 로마 숫자 소문자</p>
<ol style="list-style-type: lower-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>

コード実行

順序なしリスト(unordered list)

順序なしリストは<ul>タグで作成し、そこに含まれる各リスト要素は<li>タグで作成する。各リスト要素の前には、デフォルトのマーカー(marker)として黒い小さな丸(bullet)が表示される。

<ul>
    <li>HTML</li>
    <li>Java</li>
    <li>C++</li>
</ul>

コード実行

CSSのlist-style-typeプロパティを使用すると、リスト要素の前に位置するマーカー(marker)を別の形に変更できる。

  • disc: 黒い小さな丸形(デフォルト設定)
  • circle: 白い小さな丸形
  • square: 四角形
<p>disc : 검정색 작은 원형 모양 (기본설정)</p>
<ul>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>
  
<p>circle : 흰색 작은 원형 모양</p>
<ul style="list-style-type: circle">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

<p>square : 사각형 모양</p>
<ul style="list-style-type: square">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

コード実行

定義リスト(definition list)

定義リストは、用語とその定義を集めた一覧で、<dl>タグで作成する。<dt>タグには用語が入り、<dd>タグにはその用語に対する定義が入る。

<dl>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
  <dt>XML</dt>
  <dd>eXtensible Markup Language</dd>
</dl>

コード実行