リスト項目の挿入

リスト項目の挿入方法について説明したページです。リスト項目の種類、htmlタグでの単純な挿入方法、CSSを利用したスタイル変更方法、入れ子の仕方等を説明しています。

リスト項目の種類

 リスト項目には2種類あります。番号付きと番号なしです。番号付きは以下のように表示されます。

  1. 番号付きリスト1
  2. 番号付きリスト2

 番号なしリストは以下のように表示されます。

  • 番号なしリスト1
  • 番号なしリスト2

単純なリスト項目の挿入

 単純に番号付きリスト項目を挿入する場合はhtmlタグで以下のように記述します。

<ol>
<li>番号付きリスト1</li>
<li>番号付きリスト2</li>
</ol>

 <ol>タグで囲むと番号付きになり、<li>タグでリストを羅列します。

 単純に番号なしリスト項目を挿入する場合はhtmlタグで以下のように記述します。

<ul>
<li>番号なしリスト1</li>
<li>番号なしリスト2</li>
</ul>

 <ul>タグで囲むと番号なしになり、<li>タグでリストを羅列します。

リスト項目のスタイル変更

 リスト項目のスタイルを変更する場合はスタイルシートで以下のように記述します。スタイルについては<ol>タグでも<ul>タグでも同じです。

ol {list-style-type: none;}

 以下のように番号も「・」もなしで表示されます。

  1. 番号付きリスト1
  2. 番号付きリスト2

 none以外の主なものを以下に表で示します。値の部分がlist-style-type:以降で記述する部分です。

【リスト項目のスタイルシート】
項目 表示
白丸 circle
  1. リスト1
  2. リスト2
黒四角 square
  1. リスト1
  2. リスト2
大文字のアルファベット upper-alpha
  1. リスト1
  2. リスト2
小文字のアルファベット lower-alpha
  1. リスト1
  2. リスト2
大文字のローマ数字 upper-roman
  1. リスト1
  2. リスト2
小文字のローマ数字 lower-roman
  1. リスト1
  2. リスト2

 例えば小文字のアルファベットの場合はスタイルシートで以下のように記述します。

ol {list-style-type: lower-alpha;}

 lower-alphaの部分を表の値に変えると表示で示した通りに表示されます。リスト項目を挿入すると上下左右の余白が意図した通りにならない事が多いため、スタイルシートのmarginやpaddingで調整が必要です。

入れ子

 リスト項目は以下のように<ol>タグを閉じる前に<ol>タグを使う事で入れ子にする事も出来ます。

【リスト項目入れ子のhtml例】
<ol>
<li>番号付きリスト1</li>
<ol>
<li>入れ子1</li>
<li>入れ子2</li>
</ol>
<li>番号付きリスト2</li>
</ol>

 赤字の<ol>タグは赤字の</ol>で閉じられており、青字の<ol>タグは青字の</ol>で閉じられています。この場合、以下のように表示されます。

  1. 番号付きリスト1
    1. 入れ子1
    2. 入れ子2
  2. 番号付きリスト2

 入れ子のスタイルを例えば以下のように変更します。

【リスト項目の入れ子に対するスタイルシートの定義例】
.lower-roman {
list-style-type: lower-roman;
}
【リスト項目の入れ子にクラス指定したhtml例】
<ol>
<li>番号付きリスト1</li>
<ol class="lower-roman">
<li>入れ子1</li>
<li>入れ子2</li>
</ol>
<li>番号付きリスト2</li>
</ol>

 この場合、以下のように親と子で異なる種類の番号で表示されるため分かり易くなります。

  1. 番号付きリスト1
    1. 入れ子1
    2. 入れ子2
  2. 番号付きリスト2

その他の使い方

 リスト項目は本文中だけでなくメニューやサブメニューで使われる事も多いです。

 メニューやサブメニューはリンクしているページの題を並べて表示しているため、リスト項目として扱えます。

 例えばサブメニューに対して以下のようにスタイルシートで定義したとします。

【サブメニューのスタイルシート定義例】
.submenu li {
list-style-type: none;
border-bottom: 2px solid rgb(0, 0, 255);
border-right: 5px solid rgb(0, 0, 255);
}

 htmlでは以下のように記述したとします。

【サブメニューのhtml例】
<div class="submenu">
<ul>
<li>サブメニュー1</li>
<li>サブメニュー2</li>
<li>サブメニュー3</li>
</ul>
</div>

 この場合、サブメニューの内、リスト項目だけ以下のように装飾して表示出来ます。

  • サブメニュー1
  • サブメニュー2
  • サブメニュー3
  • このエントリーをはてなブックマークに追加