A.T-MOON

contents

パンくずリスト

メッセージエリア



    リスト

メッセージエリア


マーク 非序列リスト <ul><li>〜</li></ul>

<ul>〜</ul>に挟まれた部分がリストであることを示します。
表示する項目の順序が重要でないく箇条書きを作成したい場合などに用い、項目を<li>〜</li>で括ります。
行の先頭に『・』のついたリストが作成できます。
※例)
非序列のリスト表示
  • リストの一行目
  • リストの二行目
  • リストの三行目
このような形で表示されます
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 非序列のリスト表示
 <ul>
 <li>リストの一行目 </li>
 <li>リストの二行目 </li>
 <li>リストの三行目 </li>
 </ul>

 このような形で表示されます
 </body>
</html>

リストの上下にスペースが入り、項目の先頭に黒マルが付きます。
リストはインデントして表示されます。

ページTOP



マーク 非序列リストマークの変更 <ul type="A"><li>〜</li></ul>
              もしくは<ul><li type="A">〜</li></ul>


ulタグtype属性を使ってリストマークを変更します。
リスト全体を変更する場合はulタグに。項目ごとに変更する場合はliタグtype属性を加えます。
Aには属性の値を入れましょう。
A マークの種類
disc
  • 黒丸
  • circle
  • 白丸
  • square
  • 四角

  • ※例
    リスト全体のマーク変更
    • リストの一行目
    • リストの二行目
    • リストの三行目
    項目ごとにマーク変更
    • リストの四行目
    • リストの五行目
    • リストの六行目
    このような形で表示されます
    <html>
     <head>
      <title>ココにタイトル</title>
     </head>
     <body>
     <font color=red>※例</font><br>
     リスト全体のマーク変更
     <ul type="square">
     <li>リストの一行目 </li>
     <li>リストの二行目 </li>
     <li>リストの三行目 </li>
     </ul>

     項目ごとにマーク変更
     <ul>
     <li type="disc">リストの四行目 </li>
     <li type="circle">リストの五行目 </li>
     <li type="square">リストの六行目 </li>
     </ul>

     このような形で表示されます
     </body>
    </html>
    <ul>タグの前後には改行と一行分のスペースが入ります。

    ページTOP



    マーク 序列リスト <ol><li>〜</li></ol>

    <ol>〜</ol>に挟まれた部分が序列リストであることを示します。
    表示する項目の順序が重要な場合に用い、項目を<li>〜</li>で括ります。
    行の先頭に番号のついたリストが連番で作成できます。
    ※例)
    序列のリスト表示
    1. リストの一行目
    2. リストの二行目
    3. リストの三行目
    このような形で表示されます
    <html>
     <head>
      <title>ココにタイトル</title>
     </head>
     <body>
     <font color=red>※例</font><br>
     序列のリスト表示
     <ol>
     <li>リストの一行目 </li>
     <li>リストの二行目 </li>
     <li>リストの三行目 </li>
     </ol>

     このような形で表示されます
     </body>
    </html>

    リストの上下にスペースが入り、項目の先頭に黒マルが付きます。
    リストはインデントして表示されます。
    <ol>タグの前後には改行と一行分のスペースが入ります。

    ページTOP



    マーク 序列リストマークの変更 <ol type="A"><li>〜</li></ol>
                もしくは<ol><li type="A">〜</li></ol>


    olタグtype属性を使ってリストマークを変更します。
    リスト全体を変更する場合はolタグに。項目ごとに変更する場合はliタグtype属性を加えます。
    Aには属性の値を入れましょう。
    A マークの種類
    1 1.2.3… アラビア数字
    a a.b.c… 小文字アルファベット
    A A.B.C… 大文字アルファベット
    i i.A.B… 小文字ローマ数字
    I T.U.V… 大文字ローマ数字

    ※例
    リスト全体のマーク変更
    1. リストの一行目
    2. リストの二行目
    3. リストの三行目
    項目ごとにマーク変更
    1. リストの四行目
    2. リストの五行目
    3. リストの六行目
    このような形で表示されます
    <html>
     <head>
      <title>ココにタイトル</title>
     </head>
     <body>
     <font color=red>※例</font><br>
     リスト全体のマーク変更
     <ol type="I">
     <li>リストの一行目 </li>
     <li>リストの二行目 </li>
     <li>リストの三行目 </li>
     </ol>

     項目ごとにマーク変更
     <ol>
     <li type="a">リストの四行目 </li>
     <li type="A">リストの五行目 </li>
     <li type="i">リストの六行目 </li>
     </ol>

     このような形で表示されます
     </body>
    </html>
    <ol>タグの前後には改行と一行分のスペースが入ります。

    ページTOP



    マーク リスト開始番号変更 <ol start"A"><li>〜</li></ol>

    olタグstart属性を使ってリストの開始番号を変更します。
    Aには属性の値を入れましょう。
    ※例
    序列リストの開始番号変更
    1. リストの一行目
    2. リストの二行目
    3. リストの三行目
    このような形で表示されます
    <html>
     <head>
      <title>ココにタイトル</title>
     </head>
     <body>
     <font color=red>※例</font><br>
     序列リストの開始番号変更
     <ol start="3">
     <li>リストの一行目 </li>
     <li>リストの二行目 </li>
     <li>リストの三行目 </li>
     </ol>

     このような形で表示されます
     </body>
    </html>

    <ol type="A" start="B">とすることでtype属性と併用することもできます。

    ページTOP



    マーク リストの連番変更 <ol><li value="A">〜</li></ol>

    liタグvalue属性を使ってリストの開始番号を変更します。
    Aには属性の値を入れましょう。
    ※例
    リストの連番変更
    1. リストの一行目
    2. リストの二行目
    3. リストの三行目
    4. リストの四行目
    5. リストの五行目
    このような形で表示されます
    <html>
     <head>
      <title>ココにタイトル</title>
     </head>
     <body>
     <font color=red>※例</font><br>
     リストの連番変更
     <ol>
     <li>リストの一行目 </li>
     <li>リストの二行目 </li>
     <li value="8">リストの三行目 </li>
     <li>リストの四行目 </li>
     <li>リストの五行目 </li>
     </ol>

     このような形で表示されます
     </body>
    </html>

    value属性を加えた所からは又連番で表示されていきます。
    <ol type="A">< li value="B">とすることでtype属性と併用することもできます。
    <ol>タグの前後には改行と一行分のスペースが入ります。

    ページTOP



    マーク 用語の定義リスト <dl><dt>〜</dt><dd>〜</dd></dl>

    <dl>〜</dl>に定義リストを設定します。
    <dt>〜</dt>には定義したい用語を記述し<dd>〜</dd>に定義した用語の説明を記述します。
    ※例
    用語の定義リスト
    定義用語其の壱
    用語其の壱の説明文をココに記述します
    定義用語其の弐
    用語其の弐の説明文をココに記述します
    定義用語其の参
    用語其の参の説明文をココに記述します
    このような形で表示されます
    <html>
     <head>
      <title>ココにタイトル</title>
     </head>
     <body>
     <font color=red>※例</font><br>
     用語の定義リスト
     <dl>
     <dt>定義用語其の壱</dt>
      <dd>用語其の壱の説明文をココに記述します </dd>
     <dt>定義用語其の弐</dt>
      <dd>用語其の弐の説明文をココに記述します </dd>
     <dt>定義用語其の参</dt>
      <dd>用語其の参の説明文をココに記述します </dd>
     </dl>

     このような形で表示されます
     </body>
    </html>

    定義用語に対して用語の説明文はインデントして表示されます。
    <dl>タグの前後には改行と一行分のスペースが入ります。

    ページTOP

    HTMLタグTOPに戻る