リスト関連サンプル

目次

<dl>【定義リスト】 ・<dt>【定義リストの用語】・<dd>【定義リストの説明】

・用語：説明 (1：1)

<dl>
  <dt>用語1
    <dd>説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

・用語：説明 (多：1)

<dl>
  <dt>用語1
  <dt>用語2
    <dd>説明1
</dl>
用語1
用語2
説明1

・用語：説明 (1：多)

<dl>
  <dt>用語1
    <dd>説明1
    <dd>説明2
</dl>
用語1
説明1
説明2

・用語：説明 (多：多)

<dl>
  <dt>用語1
  <dt>用語2
    <dd>説明1
    <dd>説明2
</dl>
用語1
用語2
説明1
説明2

・<dt>【定義リストの用語】修飾 (dt:after【コンテンツ直後】)

<style>
.sample-after dt:after {
  content: ":【dt:after】";
  color: blue;
  background-color: lightgray;
}
</style>

<dl class="sample-after">
  <dt>用語1
    <dd>説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

・<dl> style属性 (color：文字色・background-color：背景色)

<dl style="color:red; background-color:yellow;">
  <dt>用語1
    <dd>説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

・<dt> style属性 (color：文字色・background-color：背景色)

<dl>
  <dt style="color:red; background-color:yellow;">用語1
    <dd>説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

・<dd> style属性 (color：文字色・background-color：背景色)

<dl>
  <dt>用語1
  <dd style="color:red; background-color:yellow;">説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

・<dl> style属性 (margin・padding 未指定)

<dl style="border:thin blue solid;">
  <dt style="border:thin red solid;">用語1
  <dd style="border:thin green solid;">説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

・<dl> style属性 (margin：外側間隔)

<dl style="margin:20px; border:medium blue solid;">
  <dt style="border:thin red solid;">用語1
  <dd style="border:thin green solid;">説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

・<dl> style属性 (padding：内側間隔)

<dl style="padding:20px; border:medium blue solid;">
  <dt style="border:thin red solid;">用語1
  <dd style="border:thin green solid;">説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

・<dt> style属性 (margin：外側間隔)

<dl style="border:thin blue solid;">
  <dt style="margin:20px; border:medium red solid;">用語1
  <dd style="border:thin green solid;">説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

・<dt> style属性 (padding：内側間隔)

<dl style="border:thin blue solid;">
  <dt style="padding:20px; border:medium red solid;">用語1
  <dd style="border:thin green solid;">説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

・<dd> style属性 (margin：外側間隔)

<dl style="border:thin blue solid;">
  <dt style="border:thin red solid;">用語1
  <dd style="margin:20px; border:medium green solid;">説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

・<dd> style属性 (padding：内側間隔)

<dl style="border:thin blue solid;">
  <dt style="border:thin red solid;">用語1
  <dd style="padding:20px; border:medium green solid;">説明1
  <dt>用語2
    <dd>説明2
</dl>
用語1
説明1
用語2
説明2

<ol>【項目番号ありリスト】

・属性指定なし

<ol>
  <li>項目1
  <li>項目2
  <li>項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3

・reversed属性

<ol reversed>
  <li>項目1
  <li>項目2
  <li>項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3

・start属性

<ol start="101">
  <li>項目1
  <li>項目2
  <li>項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3

・type属性：項目番号の種類

<ol type="a">
  <li>項目1
  <li>項目2
  <li>項目3
  <li>項目4
  <li>項目5
</ol>
  1. 項目1
  2. 項目2
  3. 項目3
  4. 項目4
  5. 項目5

・style属性 (list-style-type：項目番号の種類)

<ol style="list-style-type:decimal-leading-zero">
  <li>項目1
  <li>項目2
  <li>項目3
  <li>項目4
  <li>項目5
</ol>
  1. 項目1
  2. 項目2
  3. 項目3
  4. 項目4
  5. 項目5

・style属性 (list-style-position：項目番号位置)

<ol style="list-style-position:inside">
  <li>項目1
  <li>項目2
  <li>項目3
</ol>
<ol style="list-style-position:outside">
  <li>項目1
  <li>項目2
  <li>項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3
  1. 項目1
  2. 項目2
  3. 項目3

・style属性 (margin-left：インデント)

<ol style="margin-left:30px; border:thin blue solid;">
  <li>項目1
  <li>項目2
  <li>項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3

・style属性 (line-height：行間)

<ol style="line-height:40px; border:thin blue solid;">
  <li>項目1
  <li>項目2
  <li>項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3

・style属性 (color：文字色・background-color：背景色)

<ol style="color:red; background-color:yellow;">
  <li>項目1
  <li>項目2
  <li>項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3

<ul>【項目番号なしリスト】

・属性指定なし

<ul>
  <li>項目1
  <li>項目2
  <li>項目3
</ul>
  • 項目1
  • 項目2
  • 項目3

・style属性 (list-style-type：項目マーカースタイル)

<ul style="list-style-type:circle">
  <li>項目1
  <li>項目2
  <li>項目3
</ul>
  • 項目1
  • 項目2
  • 項目3

・CSS (list-style-type：ユーザ定義) 実装依存

<style>
  .marker { list-style-type:"★"; }
</style>

<ul class="marker">
  <li>項目1
  <li>項目2
  <li>項目3
</ul>
  • 項目1
  • 項目2
  • 項目3

・style属性 (list-style-position：項目番号位置)

<ul style="list-style-position:inside">
  <li>項目1
  <li>項目2
  <li>項目3
</ul>
<ul style="list-style-position:outside">
  <li>項目1
  <li>項目2
  <li>項目3
</ul>
  • 項目1
  • 項目2
  • 項目3
  • 項目1
  • 項目2
  • 項目3

・style属性 (margin-left：インデント)

<ul style="margin-left:30px; border:thin blue solid;">
  <li>項目1
  <li>項目2
  <li>項目3
</ul>
  • 項目1
  • 項目2
  • 項目3

・style属性 (line-height：行間)

<ul style="line-height:40px; border:thin blue solid;">
  <li>項目1
  <li>項目2
  <li>項目3
</ul>
  • 項目1
  • 項目2
  • 項目3

・style属性 (color：文字色・background-color：背景色)

<ul style="color:red; background-color:yellow;">
  <li>項目1
  <li>項目2
  <li>項目3
</ul>
  • 項目1
  • 項目2
  • 項目3

<li>【リスト項目】

・属性指定なし

<ol>
  <li>項目1
  <li>項目2
  <li>項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3

・value属性【リスト項目番号】

<ol>
  <li>項目1
  <li value="102">項目2
  <li>項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3

・属性指定なし

<ol>
  <li style="border:thin blue solid;">項目1
  <li style="margin-left:20px; border:thin blue solid;">項目2
  <li style="border:thin blue solid;">項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3

・style属性 (margin-top・margin-bottom：行間)

<ol>
  <li style="border:thin blue solid;">項目1
  <li style="margin-top:20px; margin-bottom:40px; border:thin blue solid;">項目2
  <li style="border:thin blue solid;">項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3

・style属性 (color：文字色・background-color：背景色)

<ol>
  <li>項目1
  <li style="color:red; background-color:yellow;">項目2
  <li>項目3
</ol>
  1. 項目1
  2. 項目2
  3. 項目3