Webクリエイター【初級/前編】,  ◎ HTMLを学ぶ

リスト

箇条書きリスト

番号なしリスト

HTMLでは箇条書きリスト項目を作ることができます。例えば、果物の種類では、りんご、、バナナ、イチゴなどたくさんの種類をリストアップすることができますよね。リスト項目を一つのグループにしてまとめ、それぞれの項目を記述していきます。ul,ol タグの中に入れることができるのは「li」タグのみです。

[code]
<h1>果物の種類</h1>
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>いちご</li>
</ul>
[/code]
行頭に黒い●が、付いて表示されます。

果物の種類

  • りんご
  • バナナ
  • いちご

番号付きリスト


行頭に番号が付いて表示します。
[code]
<h1>人気のメニューベスト3</h1>
<ol>
<li>唐揚げ</li>
<li>麻婆豆腐</li>
<li>ラーメン</li>
</ol>
[/code]

人気のメニューベスト3

  1. 唐揚げ
  2. 麻婆豆腐
  3. ラーメン
あなたのベスト3も教えてくださいね!

定義リスト


ある「用語」とその「説明」をセットにして記述する際に使用します。例えば、「きりんさん」→「首が長いです」などという意味合いで、用語と説明をペアとして表すことができます。dl タグの中に入れることができるのは「dt」「dd」のみです。それ以外のタグは入れることが出来ません。
[code]
<h1>人気の動物</h1>
<dl>
<dt>きりんさん</dt>
<dd>首が長い動物です。</dd>
<dt>ゾウさん</dt>
<dd>鼻が長い動物です。</dd>
</dl>
[/code]

様々な要素で使われる定義型リスト

用語の定義に限らず、例えば更新情報の「日付」と「更新内容」、Q&A の「質問」と「答え」といった表現にも使用することができます。例えば、「送料はかかりますか?」→「全国無料でお届けします。」といった形式もセット記述が使用されます。