https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

リストマークの種類を指定する

リストのマークは種類を変更することができます。

■ リストの全てのマークの種類を指定する

<ul type="マークの種類">~</ul> でリストの全てのマークの種類を指定することができます。

【ブラウザ表示】

  • 黒四角
  • 黒四角
  • 黒四角

ソース

<ul type="square">
<li>黒四角
<li>黒四角
<li>黒四角
</ul>

■ リストの項目別にマークの種類を指定する

<li type="マークの種類">~ でリストの項目別にマークの種類を指定することができます。

【ブラウザ表示】

  • 黒丸(初期値)
  • 白丸
  • 黒四角

ソース

<ul>
<li type="disc">黒丸(初期値)
<li type="circle">白丸
<li type="square">黒四角
</ul>

■ 小文字のローマ数字のマークを指定する

<ol type="i"><li>~</ol> で小文字のローマ数字のリストマークに変更できます。

【ブラウザ表示】

  1. 小文字のローマ数字の1
  2. 小文字のローマ数字の2
  3. 小文字のローマ数字の3
  4. 小文字のローマ数字の4
  5. 小文字のローマ数字の5

ソース

<ol type="i">
<li>小文字のローマ数字の1
<li>小文字のローマ数字の2
<li>小文字のローマ数字の3
<li>小文字のローマ数字の4
<li>小文字のローマ数字の5
</ol>

■ 大文字のローマ数字のマークを指定する

<ol type="I"><li>~</ol> で大文字のローマ数字のリストマークに変更できます。

【ブラウザ表示】

  1. 大文字のローマ数字の1
  2. 大文字のローマ数字の2
  3. 大文字のローマ数字の3
  4. 大文字のローマ数字の4
  5. 大文字のローマ数字の5

ソース

<ol type="I">
<li>大文字のローマ数字の1
<li>大文字のローマ数字の2
<li>大文字のローマ数字の3
<li>大文字のローマ数字の4
<li>大文字のローマ数字の5
</ol>

■ 小文字の英字のマークを指定する

<ol type="a"><li>~</ol> で小文字の英字のリストマークに変更できます。

【ブラウザ表示】

  1. 小文字の英字のa
  2. 小文字の英字のb
  3. 小文字の英字のc
  4. 小文字の英字のd
  5. 小文字の英字のe

ソース

<ol type="a">
<li>小文字の英字のa
<li>小文字の英字のb
<li>小文字の英字のc
<li>小文字の英字のd
<li>小文字の英字のe
</ol>

■ 大文字の英字のマークを指定する

<ol type="A"><li>~</ol> で大文字の英字のリストマークに変更できます。

【ブラウザ表示】

  1. 大文字の英字のA
  2. 大文字の英字のB
  3. 大文字の英字のC
  4. 大文字の英字のD
  5. 大文字の英字のE

ソース

<ol type="A">
<li>大文字の英字のA
<li>大文字の英字のB
<li>大文字の英字のC
<li>大文字の英字のD
<li>大文字の英字のE
</ol>

上記と同様に<ol type="1">で1、2、3、4、5 のように数字の1から始まるリストを作れますが 前ページのように<ol>~</ol>でolタグにtype属性を指定しなくても 数字の番号付きリストは作成できます。

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

リストに番号を付ける
リストにマークを付ける
定義リストにする

HTMLタグ一覧のページに戻る