ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、あなたのためのページです。

5.リスト表示

リストを作るには<li>タグを使います。

“li”は List Item という意味です。

しかし、より正確には、リストの種類を指定する必要があります。

リストには、大別して順番リストと箇条書きリストがあります。

順番リスト

まずは先頭に数字のついた順番リストを作成します。

順番リストは<ol>タグ の中に<li>タグを入れ子にして作ります。
 
“ol”は Orderd List で順番のあるリストという意味です。
 
 

ブラウザで確認してみましょう

 

箇条書きリスト 

 

次に先頭に何も付かない箇条書きリストを作成します。

箇条書きリストは<ul>タグ の中に<li>タグを入れ子にして作ります。
 
“ul”は Unorderd List で順番のないリストという意味、“li”はここでも List Item という意味です。
 

ブラウザで確認してみましょう

 

定義リスト

 

最後に用語と定義をリスト表示にする定義リストを作成します。

Q&A集や用語集を作る時に便利に使えます。

定義リストは、<dl>タグの中に<dt>タグと<dd>タグを交互に入れることで作ります。

“dl”は description list の略で記述式リストという意味、

“dt”は description term の略で項目名という意味、

“dd”は description,definition の略で内容や説明文という意味です。

ブラウザで確認してみましょう

 

今回は「順番リスト、箇条書きリスト、定義リスト」を作りました。

次回は、「属性の設定」について学んでいきましょう。