生活情報オンライン

ITエンジニアが役立つ情報を発信します。

HTML5/CSS3 様々なリストの作り方

HTML / CSS

リストの作り方

情報を整理して伝えるにはリスト形式が便利ですね。今回の記事では、様々なリストの作り方をご紹介します。リストは次のように３つのタイプに大別することが出来ます。

・順序の関係ないリスト（Unordered list）
・順序の関係あるリスト（Ordered list）
・定義型リスト（description list）

それではそれぞれのリストについて詳しく見ていきましょう。

順序の関係ないリスト（Unordered list）

順序の関係ないリストの中でも、３つのタイプに分類することが出来ます。

・デフォルトの場合
・ネストした場合
・type指定した場合

それでは詳しく見ていきます。

デフォルトの場合

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul>
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


ネストした場合

ネストするとこんな感じになります。リストがインデントされて白抜きになるんですね。

  • 最初のリスト
    • 最初のリスト
    • 真中のリスト
    • 最後のリスト
  • 真中のリスト
  • 最後のリスト

<ul>
  <li>最初のリスト</li>
  <ul>
    <li>最初のリスト</li>
    <li>真中のリスト</li>
    <li>最後のリスト</li>
  </ul>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type指定した場合

type="disc"ではこのようになります。デフォルトと同じですね。

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul type="disc">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type="circle"ではこのようになります。ネストしたときと同じになります。

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul type="circle">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type="square"ではこのようになります。リストスタイルが四角になりますね。

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul type="square">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>

上記のtypeはulに指定しましたが、liにも個別に指定することも出来ます。つまり、順序の関係ないリスト（ul）に関わらず「順序の関係あるリスト」や「定義リスト」のliにも指定すことが出来るのです。

順序の関係あるリスト（Ordered list）

順序の関係あるリストの中で４つに分類することが出来ます。

・デフォルトの場合
・ネスト指定した場合
・type指定した場合
・value指定した場合

それぞれ見ていきましょう。

デフォルトの場合

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ul>
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


ネスト指定した場合

ネストするとこんな感じになります。リストがインデントされますね。数字の階層化はされません。

  1. 最初のリスト
    1. 最初のリスト
    2. 真中のリスト
    3. 最後のリスト
  2. 真中のリスト
  3. 最後のリスト

<ul>
  <li>最初のリスト</li>
  <ul>
    <li>最初のリスト</li>
    <li>真中のリスト</li>
    <li>最後のリスト</li>
  </ul>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type指定した場合

文字の属性を指定することも出来ます。
type="a"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="a">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>


type="A"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="A">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>


type="i"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="i">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>


type="I"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="I">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>

上記のtypeはolに指定しましたが、liにも個別に指定することも出来ます。つまり、順序の関係あるリスト（ol）に関わらず「順序の関係ないリスト」や「定義リスト」のliにも指定すことが出来るのです。

value指定した場合

順番も指定できます。
・value

  1. リスト１
  2. リスト２
  3. リスト３
  4. リスト４
  5. リスト５

<ol>
  <li value="5">リスト１</li>
  <li>リスト２</li>
  <li>リスト３</li>
  <li>リスト４</li>
  <li>リスト５</li>
</ol>


定義型リスト（description list）

定義１
定義１の説明文１
定義１の説明文２
定義２
定義２の説明文１
定義２の説明文２

<dl>
  <dt>定義１</dt>
  <dd>定義１の説明文１</dd>
  <dd>定義１の説明文２</dd>
  <dt>定義２</dt>
  <dd>定義２の説明文１</dd>
  <dd>定義２の説明文２</dd>
</dl>


アレンジを加えたリスト

次にアレンジを加えたリストを２つご紹介します。まずはランキングを構成するリストの作り方。

タヌキ
キリン
キツネ

<style>
dt.sample:before {
  counter-increment:sample;
  content:counter(sample) "位　";
}
div.div_reset {
  counter-reset:sample;
}
</style>
<div class="div_reset">
<dl>
  <dt class="sample">タヌキ</dt>
  <dt class="sample">キリン</dt>
  <dt class="sample">キツネ</dt>
</dl>



次に章立てを構成するリストの作り方。

  1. item
  2. item
    1. item
    2. item
    3. item

<style>
#original_count ol {
/* ol要素にsectionカウンタを生成 */
  list-style-type: none;
  counter-reset: section;
}

#original_count li {
/*  list-style-type: none;*/
}

#original_count li:before {
/* section カウンタをインクリメントする */
  counter-increment: section;
/* "." で区切られた section カウンタのインスタンスの値を付加 */
  content: "第" counters(section, "-") "章 ";

}
</style>
<div id="original_count">
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
</ol>
</div>



以上、「HTML5/CSS3 様々なリストの作り方」でした。