箇条書きの書き方

リストの種類

HTMLで、項目を箇条書きで書く方法を紹介します。

今回紹介する方法を使えば、

  • りんご
  • オレンジ
  • メロン

  1. メールを打つ
  2. 送信ボタンを押す
  3. 返信をまつ

といった表記をすることができます。

箇条書きで書き出す

「●」を先頭にして、箇条書きにする場合は以下の様な命令を使います。

<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>

これにより

  • リスト1
  • リスト2

のように表示できます。

文頭の種類を変える

●ではなくて○や□にしたいなら

<ul type="マークの種類">
<li>リスト1</li>
<li>リスト2</li>
</ul>

とします。マークの種類には

  • disk:●(黒い丸)
  • circle:○(白い丸)
  • square:□(四角)

を設定します。また、

<li type=”種類”>

で個別に対応させることもできます。

番号のついたリストをつくる

先頭を丸ではなく番号にしたい場合は

<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

 とします。こうすることで

  1. リスト1
  2. リスト2
  3. リスト3

と表記できます。

番号の種類を変える

番号の種類を「A,B,C,..」などに変更することができます。変更する場合は

<ol type="種類>
<li>リスト1</li>
<li>リスト2</li>
</ol>

とします。ここで種類には

  • A:英字の大文字(A,B,C,…)
  • a:英字の小文字(a,b,c,…)
  • I(英語の大文字のI):ローマ数字の大文字(Ⅰ,Ⅱ,Ⅲ,…)
  • i(英語の小文字のi):ローマ数字の小文字(ⅰ,ⅱ,ⅲ,…)

があります。

type=”A”

のように設定すればOKです。

番号を変える

1,2,3,4,…ではなく4,5,6,…という順でも記述できます。その場合は

<ol start=”4″>

のようにします。

1,2,7,8

のように途中から変更したい場合は

<ol>
<li>リスト1</li>
<li>リスト2</li>
<li value="7">リスト7</li>
<li>リスト8</li>
</ol>

のように設定します。

著者:安井 真人(やすい まさと)