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

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

4.リスト表示

<アウトプットイメージ>
  • ひつまぶし
  • 味噌カツ
  • 手羽先
<ソースコード>

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

ちなみに、“li”は List Item という意味です。

これで一応のリスト表示はできました。

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

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

順番リスト

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

<アウトプットイメージ>
  1. 買い物に行く
  2. 料理する
  3. 食べる
<ソースコード>

順番リストは<ol> の中に<li>を入れ子にして作ります。

“ol”は Orderd List で順番のあるリストという意味です。
 

箇条書きリスト 

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

<アウトプットイメージ>
  • ひつまぶし
  • 味噌カツ
  • 手羽先
 <ソースコード> 
箇条書きリストは<ul> の中に<li>を入れ子にして作ります。
 
“ul”は Unorderd List で順番のないリストという意味、“li”はここでも List Item という意味です。

定義リスト

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

<アウトプットイメージ>
質問1
答え1
質問2
答え2
質問3
答え3
<ソースコード>

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

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

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

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

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

 

以上、今回は「順番リスト、箇条書きリスト、定義リスト」について学びました。

次回は、「スタイルを設定して表現力をアップする」方法について学んでいきましょう。