1.「箇条書きリスト」「番号付きリスト」「説明リスト」とは？
これまで文章を書くときには、見出しを示すh1〜h6タグや段落を示すpタグなどが出てきました。これ以外にも文章の中の構造を示すタグが用意されており、今回は「箇条書きリスト」「番号付きリスト」「説明リスト」について解説します。
箇条書きリストとは
いくつかの項目を分けて書き並べたものを「箇条書き」と言いますが、HTMLでもこのような箇条書きを示すことができます。例えば箇条書きリストを使うと以下のような表示になります。
- りんご
- バナナ
- みかん
箇条書きの項目の左側に付く「・」の記号はCSSを使って変更することができます。
番号付きリストとは
箇条書きの左側に番号をふったものが「番号付きリスト」です。番号付きリストを使うと以下のような表示になります。
- りんご
- バナナ
- みかん
番号をテキストで記述しなくても、自動的に「1.」「2.」「3.」が表示されます。
説明リストとは
説明リストは用語の解説などをする際に使用するリスト形式です。箇条書きリストとは違い、「説明するもの」と「説明するものに対する説明」に分けて書きわけます。箇条書きのような「・」や番号付きリストのような数字の表示はありませんが、デフォルトでは「説明するものに対する説明」の左側に余白ができます。
- HTML
- Hyper Text Markup Langageの略
- CSS
- Cascading Style Sheetsの略
それではそれぞれのリストの使い方を詳しく説明していきます。
2.箇条書きリストを示すタグ（ul・li）
箇条書きリストを示すタグはulとliというタグです。箇条書き全体をulタグで囲って、項目をliで囲います。ulはUnordered List（順序のないリスト）の略です。
<section>
<h1>ミックスジュースの材料</h1>
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ul>
</section>
ブラウザでは以下のように表示されます。
3.番号付きリストを示すタグ（ol・li）
番号付きリストを示すタグはolとliというタグです。番号付きリスト全体をolタグで囲って、項目をliで囲います。olはOrder Listの略です。
<section>
<h1>アプリの起動方法</h1>
<ol>
<li>まずはアプリを検索しましょう</li>
<li>検索画面で検索後クリックしましょう</li>
<li>インストールボタンをクリックしましょう</li>
</ol>
</section>
ブラウザでは以下のように表示されます。
4.説明リストを示すタグ（dl・dt・dd）
説明リストを示すタグはdlとdt、ddというタグです。説明リスト全体をdlタグで囲って、説明する用語をdtで囲い、用語に対する説明をddで囲います。dlはDefinition Listの略です。
<secion>
<dl>
<dt>HTML</dt>
<dd>文章構造を作成するマークアップ言語です。</dd>
</dl>
</section>
以下のようにブラウザで表示されます。
