Webサイトを作ろう！（HTML編）

5. リスト

1. 番号つきリスト

頭に番号のついた箇条書きの、タグと表示サンプルは以下の通りです。

<ol>

<li> 自治創造 </li>

<li> 明朗親和 </li>

</ol>

番号つきリストのサンプル

「ol」は「orderd list（順序のあるリスト）」の略、「li」は「list（リスト）」の略です。

2. 番号なしリスト

頭に番号のつかない箇条書きの、タグと表示サンプルは以下の通りです。

<ul>

<li> 自治創造 </li>

<li> 明朗親和 </li>

</ul>

番号つきリストのサンプル

「ul」は「unorderd list（順序のないリスト）」の略です。

3. 説明つきリスト

語句とその説明が1対となったリストです。

<dl>

<dt> 自治創造 </dt>

<dd> 正を愛し邪を排し、自己の良心と責任において行動する自主自律の精神を養い、常に科学的研究的態度を持し、先人を超えて新しい文化を創造しつつ進歩向上していく創造能力を練磨する。 </dd>

<dt> 明朗親和 </dt>

<dd> 明朗は清純な心のあらわれであり、いささかもわだかまりのない状態である。親和は愛であり、協調であり、平和である。この精神によって明るい学校社会を建設する。 </dd>

</dl>

説明つきリストのサンプル

「dl」は「definition list（定義リスト）」の略、「dt」は「definition term（定義語）」の略、「dd」は「definition description（定義説明）」の略です。

4. 練習問題2

  1. 「練習問題2」をクリックしてください。
  2. ブラウザのメニューバーの[表示]＞[ソース]をクリックしてください。
  3. メモ帳のメニューバーの[ファイル]＞[名前をつけて保存]をクリックしてください。
  4. マイドキュメントの「web」フォルダに、ファイル名はそのまま（「practice02.html」）で保存してください。
  5. メモ帳で「practice02.html」ファイルに、番号つきリスト・番号なしリスト・説明つきリストのタグを正しく記述してください。
  6. [マイドキュメント]＞「web]＞[practice02.html]のアイコンをダブルクリックして、以下のように表示されるか確認してみましょう。

練習問題2の完成サンプル

←2-4 見出し・段落　　Topページ　　2-6 表→