扉のページへ前の章へ | 応用のページへ上へ | 前のページ | 次のページ

箇条書き

項目をあげて,箇条書きにすることができます.

HTMLで使うことのできる箇条書きには,記号付き箇条書き,番号順箇条書き,定義型箇条書きの3種類があります.
また,階層構造(入れ子構造)を持たせることができます.

順序無箇条書き

順序無箇条書きの始まりは <UL> ,終わりを </UL> で表します.
各項目は <LI> の後に続けて書きます.

例えば,次のように書きます.

<UL>(順序無箇条書きの第一階層の始まりを表します.)
<LI>第一階層の第一項目
<LI>第一階層の第二項目
<UL>(順序無箇条書きの第二階層の始まりを表します.)
<LI>第二階層の第一項目
<LI>第二階層の第二項目
</UL>(順序無箇条書きの第二階層の終わりを表します.)
<LI>第一階層の第三項目
</UL>(順序無箇条書きの第一階層の終わりを表します.)
dammy

この場合は次のように,先頭に項目を表す記号のついた箇条書きが出来ます.

順序付箇条書き

順序付箇条書きの始まりは <OL> ,終わりを </OL> で表します.
各項目は <LI> の後に続けて書きます.

例えば,次のように書きます.

<OL>(順序付箇条書きの第一階層の始まりを表します.)
<LI>第一階層の第一項目
<LI>第一階層の第二項目
<OL>(順序付箇条書きの第二階層の始まりを表します.)
<LI>第二階層の第一項目
<LI>第二階層の第二項目
</OL>(順序付箇条書きの第二階層の終わりを表します.)
<LI>第一階層の第三項目
</OL>(順序付箇条書きの第一階層の終わりを表します.)

この場合は次のように,先頭に項目の順番を表す番号やアルファベットのついた箇条書きが出来ます.

  1. 第一階層の第一項目
  2. 第一階層の第二項目
    1. 第二階層の第一項目
    2. 第二階層の第二項目
  3. 第一階層の第三項目

項目の番号を変更する

<OL>要素に「start属性」を設定することで,箇条書きの開始番号を変えることができます.

<OL start="3">(番号順箇条書きの始まり.)
<LI>第一項目
<LI>第二項目
<LI>第三項目
</OL>(番号順箇条書きの終わり.)

この様に設定すると次のようになります.

  1. 第一項目
  2. 第二項目
  3. 第三項目

<LI>要素に「value属性」を設定することで,項目の番号を変えることができます.後に続く項目の番号は,変更した番号からの連番になります.

<OL>(順序付箇条書きの始まり.)
<LI>第一項目
<LI value="5">第二項目
<LI>第三項目
</OL>(順序付箇条書きの終わり.)

この様に設定すると次のようになります.

  1. 第一項目
  2. 第二項目
  3. 第三項目

定義型の箇条書き

定義型の箇条書きの始まりは <DL> ,終わりを </DL> で表します.
各項目は <DT> の後に続けて箇条書き項目を書き, <DD> に続けてその項目を定義する箇条書き項目定義を書きます.

例えば,次のように書きます.

<DL>(定義型箇条書きの第一階層の始まりを表します.)
<DT> 第一階層第一項目 <DD> 第一階層第一項目の定義内容
<DT> 第一階層第二項目 <DD> 第一階層第二項目の定義内容
<DL>(定義型箇条書きの第二階層の始まりを表します.)
<DT>第二階層第一項目 <DD> 第二階層第一項目の定義内容
<DT>第二階層第二項目 <DD> 第二階層第二項目の定義内容
</DL>(定義型箇条書きの第二階層の終わりを表します.)
<DT> 第一階層第三項目 <DD> 第一階層第三項目の定義内容
</DL>(定義型箇条書きの第一階層の終わりを表します.)

この場合は,次のようになります.

第一階層の第一項目
第一階層第一項目の定義内容
第一階層の第二項目
第一階層第二項目の定義内容
第二階層の第一項目
第二階層第一項目の定義内容
第二階層の第二項目
第二階層第二項目の定義内容
第一階層の第三項目
第一階層第三項目の定義内容

以上が,箇条書きの作り方です.これを用いればさらに見やすいホームページになるでしょう.


練習3ー5

「renshu5.html」の時間割の下の部分に,箇条書きを使って何か書いてみましょう.例えば料理のレシピやテストの問題など.この時,3種類全ての書き方を使用して下さい.できれば,複合して使用すること.


練習3ー6

「renshu6.html」を作成し,自分の履修している講義の簡単な説明を見出し付きで記述し,練習3−4で作成した時間割の表の各科目からハイパーリンクで呼び出せるようにして下さい.


扉のページへ前の章へ | 応用のページへ上へ | 前のページ | 次のページ