リスト関連サンプル

目次

<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