リスト基本形

sample

<ul>

<li>幼稚園</li>

<li>小学校</li>

<li>中学校</li>

</ul>

preview

  • 幼稚園
  • 小学校
  • 中学校

explain

初期値では●がついたリスト形式で表示。インデントして表示されます。

CSSと組み合わせて、メニュー項目で使用したりします。

リスト(番号付

sample

<ol>

<li>幼稚園</li>

<li>小学校</li>

<li>中学校</li>

</ol>

preview

  1. 幼稚園
  2. 小学校
  3. 中学校

explain

1. 2. 3. と番号付のリスト形式で表示されます。

>
定義リスト

sample

<dl>

<dt>白ニキビ</dt>
<dd>皮脂が内部にたまって白くなっている状態のもの</dd>

<dt>黒ニキビ</dt>
<dd>皮脂や老廃物などが混ざり合って酸化して黒くなっている状態</dd>

<dt>赤ニキビ</dt>
<dd>悪化して炎症をおこしている状態</dd>

</dl>

preview

explain

<dt>~</dt>で用語を定義し、<dd>~</dd>でその用語の内容を記述し、全体を<dl>~</dl>で囲います。

リストのマーク変更

sample

<ul type="circle">

<li>小学校</li>
<li>
中学校</li>
<li>
高校</li>

</ul>

<ul>

<li>小学校</li>
<li type="square">
中学校</li>
<li>
高校</li>

</ul>

preview

  • 小学校
  • 中学校
  • 高校
  • 小学校
  • 中学校
  • 高校

explain

<ul type=" ">
<li type=" ">
リスト項目の先頭のマークを変更することができます。
<ul type=" "> で設定するとリスト全体が、<li type=" ">で設定するとその項目のマークだけが変わります。

disc
●(デフォルト)
circle
square
リスト(番号付)のマーク変更

sample

<ol type="a">

<li>小学校</li>
<li>
中学校</li>
<li>
高校</li>

</ol>

<ol>

<li>小学校</li>
<li type="i">
中学校</li>
<li>
高校</li>

</ol>

preview

  1. 小学校
  2. 中学校
  3. 高校
  1. 小学校
  2. 中学校
  3. 高校

explain

<ol type=" ">
<li type=" ">
番号付のリスト項目の先頭のマークを変更することができます。
<ol type=" "> で設定するとリスト全体が、<li type=" ">で設定するとその項目のマークだけが変わります。

1
1.2.3.....(デフォルト)
a
a.b.c.....(小文字アルファベット)
A
A.B.C...(大文字アルファベット)
i
i.ii.iii......(小文字ローマ数字)
I
I.II.III.....(大文字ローマ数字)
リストの開始番号変更

sample

<ol>

<li>小学校</li>
<li>
中学校</li>
<li>
高校</li>

</ol>

<ol start="3">

<li>小学校</li>
<li>
中学校</li>
<li>
高校</li>

</ol>

<ol type="i" start="2">

<li>小学校</li>
<li>
中学校</li>
<li>
高校</li>

</ol>

preview

  1. 小学校
  2. 中学校
  3. 高校
  1. 小学校
  2. 中学校
  3. 高校
  1. 小学校
  2. 中学校
  3. 高校

explain

<ol start=" ">
リストの番号を何番からスタートさせるかという指示です。

<ol type=" " start=" ">
type=" " を同時に指定することも可。

リストの連番変更

sample

<ol>

<li>小学校</li>
<li>
中学校</li>
<li>
高校</li>

</ol>

<ol>

<li>小学校</li>
<li value="5">
中学校</li>
<li>
高校</li>

</ol>

preview

  1. 小学校
  2. 中学校
  3. 高校
  1. 小学校
  2. 中学校
  3. 高校

explain

<li value=" ">
そのリスト項目の番号を指定。このリスト以降はその番号からの連番となる。
※<ol>~</ol>の中の<li>でしか使用できません。