リスト(箇条書)

 箇条書を行うタグを紹介します。これが使えると、閲覧者がどのような大きさの画面で見ていようとも、その画面の大きさに合わせて適宜、改行された箇条書きの文章となります。なお、タグの名称が何の略称かを()で表記しました。


  • 最初の番号の指定
  • 番号の種類の指定
  • 番号の種類を変える
  • 番号の数字を変える
  • 練 習 問 題

  •   箇条書きの基本形式は、下記のとおりです。


    <UL>
     <LI>(項目)</LI>
    </UL>

    (UL=Unordered List)



     例えば、


    <UL>
     <LI>明治</LI>
     <LI>生田</LI>
     <LI>神田</LI>
     <LI>和泉</LI>
    </UL>




     と指定すると、ブラウザ上では下記のように表現されます。


    • 明治
    • 生田
    • 神田
    • 和泉



      箇条書の記号の種類は下記の属性タグにより指定できます。


    <LI TYPE="x"></LI>
     x=disk  黒丸
     x=circle 白丸
     x=square 黒四角




     例えば、下記のように入力すると、


    <UL>
     <LI TYPE="disk">明治</LI>
     <LI TYPE="circle">生田</LI>
     <LI TYPE="square">神田</LI>
    </UL>



     ブラウザ上では下記のように表示されます。


    • 明治
    • 生田
    • 神田



      番号つき箇条書の基本形式は下記の通り。


    <OL>
     <LI> </LI>
    </OL>

    (OL=Oredered List)



     例えば、下記のように入力すると、


    <OL>
     <LI>御茶ノ水</LI>
     <LI>明大前</LI>
     <LI>生田</LI>
    </OL>



     ブラウザ上では下記のように表示されます。


    1. 御茶ノ水
    2. 明大前
    3. 生田



      定義型リストの作成(用語解説に向いています)


    <DL>
     <DT>用語<DD>解説
    </DL>

    (DT=Data Title, DD=Data Difinition)



     例えば、下記のように入力すると、


    <DL>
     <DT>明治大学<DD>東京六大学の一つ </DL>



     ブラウザ上では下記のように表示されます。


    明治大学
    東京六大学の一つ



      リストのネストについて  下記のように入力すると、


    <OL>
     <LI>御茶ノ水</LI>
     <LI>明大前</LI>

    <OL>
     <LI>御茶ノ水</LI>
     <LI>明大前</LI>
     <LI>生田</LI>
    </OL>

     <LI>生田</LI>
    </OL>



     ブラウザ上では下記のように表示されます。


    1. 御茶ノ水
    2. 明大前
      1. 御茶ノ水
      2. 明大前
      3. 生田
    3. 生田



      箇条書の最初の番号を指定する場合
    <OL START=N><LI> </LI></OL>
     nが4であれば、4から始まる箇条書となります。


      番号の種類を指定することができます。
    <OL><LI TYPE="x"> </LI></OL>
     x=1 数字 何も指定しなければ数字となる
     x=A 英大文字
     x=a 英小文字
     x=I 大文字のローマ数字
     x=i 小文字のローマ数字


      途中で番号の種類を自由に変えられます
    <LI Type="xxx"> (<OL>内でのみ使用可)
     x=1 数字 何も指定しなければ数字となる
     x=A 英大文字
     x=a 英小文字
     x=I 大文字のローマ数字
     x=i 小文字のローマ数字


      途中で番号の数字を自由に変えられます
    <LI Value=x> (<OL>内でのみ使用可)
     x :変更する番号を指定



     
    練習問題
    次の文書をHTMLのリスト・タグを利用して作成しよう。リストの冒頭には名前、学年、組、番号を明記し提出すること。フォントの修飾(大きさ、色等)を施し、他の人の課題と差別化すること。