リスト編


このページはＨＴＭＬ講座のリスト編です。リストをマスターしましょう！
ではリスト編行ってみましょう！！
まずは基本です。リストを作るには<ul><li>〜</li></ul>で囲みます。
早速やってみましょう。

<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>


てな感じになります。

次は番号Ｐａｒｔ１です。 <ol><li>〜</li></ol>で囲みます

<ol>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ol>

  1. リスト１
  2. リスト２
  3. リスト３

です

次は番号付きＰａｒｔ２です。<ol><li type="i">〜</li></ol>で囲みます

<ol>
<li type="i">リスト１</li>
<li type="i">リスト２</li>
<li type="i">リスト３</li>
</ol>

  1. リスト１
  2. リスト２
  3. リスト３

ですね。

次はリストのマークを変更してみましょう。<ul><li type="square">〜</li></ul>で囲みます

<ul>
<li type="square">リスト１</li>
<li type="square">リスト２</li>
<li type="square">リスト３</li>
</ul>


ですよ。

次はリストの開始番号を変更します。<ol start="数字"><li>〜</li></ol>で囲みます

<ol start="2">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ol>

  1. リスト１
  2. リスト２
  3. リスト３

になりますよ。

次はリストの連番の変更です。実際に書いてみましょう。変えたい番号をVALUE属性で変更します。

<ol>
<li>リスト１</li>
<li value="6">リスト２</li> ←ここです。
<li>リスト３</li>
</ol>

  1. リスト１
  2. リスト２
  3. リスト３

ですです。

最後は用語を定義したみたいに見せるやり方です。一応リストに入れてみました。
<dl><dt>〜</dt><dd>〜</dd></dl>で囲みます

<dl>
<dt>D's Freenailとは？</dt>
<dd>読者投稿型＋αのホームページです！！応援宜しく！！</dd>
</dl>

D's Freenailとは？
読者投稿型＋αのホームページです！！応援宜しく！！

以上でリスト編終了です。もう半分を過ぎました！！