HTML 入門

基本的なタグをマスターしよう

箇条書きを作る

HTML では次の3種類の箇条書きが利用できます．

1. 箇条書き
2. 番号付きの箇条書き
3. 定義リスト

通常の箇条書き（unordered list：順序なしリスト）を利用するには，箇条書き全体を <ul> ... </ul> で囲い，その中に箇条書きの各項目 (list item) を <li> ... </li> で囲って記述します．各項目の先頭には「・」記号が自動的に付くようになります．

index.html（抜粋）コピー
<ul>
  <li>経営学部</li>
  <li>法学部</li>
  <li>現代社会学部</li>
</ul>

番号付き箇条書き（ordered list：順序付きリスト）を利用するには，箇条書き全体を <ol> ... </ol> で囲い，その中に箇条書きの各項目を <li> ... </li> で囲って記述します．各項目の先頭には番号が自動的に付くようになります．

index.html（抜粋）コピー
<ol>
  <li>経営コース</li>
  <li>会計コース</li>
  <li>データサイエンスコース</li>
</ol>

説明リスト（定義リスト）を利用するには，全体を <dl> ... </dl> で囲い，その中に説明したい用語を <dt> ... </dt> で，その説明文を <dd> ... </dd> で記述します．下の例のように，<dd> ... </dd> の内容は字下げが行われて表示されます（この結果はブラウザの種類によって異なる可能性があります）．なお，<dl> は説明リスト (description list)，<dt> は説明する用語 (description term)，<dd> は定義文または説明文 (definition / description) を意味します．

index.html（抜粋）コピー
<dl>
  <dt>入門演習</dt>
  <dd>１年生前期のゼミです．学籍番号順にクラスが割り当てられます．</dd>
  <dt>基礎演習</dt>
  <dd>2年生のゼミです．具体的には基礎演習Iが2年生の前期に開講され，基礎演習IIが後期に開講されます．基礎演習IIでは学生は基礎演習Iとは異なる教員のゼミに所属することになります．</dd>
</dl>

箇条書きの中にさらに別の箇条書きを配置して入れ子にすることもできます．ただし，入れ子にするときにはリスト項目の閉じタグ </li> を書く位置に注意してください．次の例では3つの学部のそれぞれに学科や専攻が存在することがわかる構造になっています．具体的には2行目の「経営学部」の閉じタグが7行目にあるので，3行目から6行目の箇条書きの要素「経営学科 経営・会計専攻」と「経営学科 データサイエンス専攻」が「経営学部」の子要素であることが明確にわかるようになっています．

index.html（抜粋）コピー
<ul>
  <li>経営学部
    <ul>
      <li>経営学科 経営・会計専攻</li>
      <li>経営学科 データサイエンス専攻</li>
    </ul>
  </li>
  <li>法学部
    <ul>
      <li>法律学科</li>
    </ul>
  </li>
  <li>現代社会学部
    <ul>
      <li>現代社会学科</li>
      <li>社会防災学科</li>
    </ul>
  </li>
</ul>

目次に戻る