トップページ > スタイルシートリファレンス > list-style-type

★スタイルシートリファレンス

list-style-type …… マーカー文字の種類を指定する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Netscape4Netscape6Netscape7Netscape8 Opera6Opera7Opera8Opera9Opera10 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6
広告

list-style-typeプロパティは、リストの先頭に表示するマーカー文字の種類を指定する際に使用します。 閲覧環境により、本来の仕様の通りに表示されない値もあるので注意してください。

尚、list-style-typeと、list-style-imageの値を同時に指定した場合には、 list-style-imageの値が優先されます。

■使用例

HTMLソース

<b>list-style-type: none</b> マーカーなし
<ul style="list-style-type: none">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ul>

<b>list-style-type: disc</b> 黒丸
<ul style="list-style-type: disc">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ul>

<b>list-style-type: circle</b> 白丸
<ul style="list-style-type: circle">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ul>

<b>list-style-type: square</b> 黒四角
<ul style="list-style-type: square">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ul>

<b>list-style-type: lower-roman</b> 小文字のローマ数字
<ol style="list-style-type: lower-roman">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: upper-roman</b> 大文字のローマ数字
<ol style="list-style-type: upper-roman">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: lower-greek</b> 小文字のギリシャ文字
<ol style="list-style-type: lower-greek">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: decimal</b> 算用数字
<ol style="list-style-type: decimal">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: decimal-leading-zero</b> 先頭に0をつけた算用数字
<ol style="list-style-type: decimal-leading-zero">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: lower-latin</b> 小文字のアルファベット
<ol style="list-style-type: lower-latin">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: lower-alpha</b> 小文字のアルファベット
<ol style="list-style-type: lower-alpha">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: upper-latin</b> 大文字のアルファベット
<ol style="list-style-type: upper-latin">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: upper-alpha</b> 大文字のアルファベット
<ol style="list-style-type: upper-alpha">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: cjk-ideographic</b> 漢数字
<ol style="list-style-type: cjk-ideographic">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: hiragana</b> ひらがなのあいうえお順
<ol style="list-style-type: hiragana">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: katakana</b> カタカナのアイウエオ順
<ol style="list-style-type: katakana">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: hiragana-iroha</b> ひらがなのいろはにほへと順
<ol style="list-style-type: hiragana-iroha">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: katakana-iroha</b> カタカナのイロハニホヘト順
<ol style="list-style-type: katakana-iroha">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: hebrew</b> ヘブライ数字
<ol style="list-style-type: hebrew">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: armenian</b> アルメニア数字
<ol style="list-style-type: armenian">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<b>list-style-type: georgian</b> グルジア数字
<ol style="list-style-type: georgian">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>
↓↓↓

ブラウザ上の表示

list-style-type: none マーカーなし
  • いちご
  • 人参
  • サンダル
list-style-type: disc 黒丸
  • いちご
  • 人参
  • サンダル
list-style-type: circle 白丸
  • いちご
  • 人参
  • サンダル
list-style-type: square 黒四角
  • いちご
  • 人参
  • サンダル
list-style-type: lower-roman 小文字のローマ数字
  1. いちご
  2. 人参
  3. サンダル
list-style-type: upper-roman 大文字のローマ数字
  1. いちご
  2. 人参
  3. サンダル
list-style-type: lower-greek 小文字のギリシャ文字
  1. いちご
  2. 人参
  3. サンダル
list-style-type: decimal 算用数字
  1. いちご
  2. 人参
  3. サンダル
list-style-type: decimal-leading-zero 先頭に0をつけた算用数字
  1. いちご
  2. 人参
  3. サンダル
list-style-type: lower-latin 小文字のアルファベット
  1. いちご
  2. 人参
  3. サンダル
list-style-type: lower-alpha 小文字のアルファベット
  1. いちご
  2. 人参
  3. サンダル
list-style-type: upper-latin 大文字のアルファベット
  1. いちご
  2. 人参
  3. サンダル
list-style-type: upper-alpha 大文字のアルファベット
  1. いちご
  2. 人参
  3. サンダル
list-style-type: cjk-ideographic 漢数字
  1. いちご
  2. 人参
  3. サンダル
list-style-type: hiragana ひらがなのあいうえお順
  1. いちご
  2. 人参
  3. サンダル
list-style-type: katakana カタカナのアイウエオ順
  1. いちご
  2. 人参
  3. サンダル
list-style-type: hiragana-iroha ひらがなのいろはにほへと順
  1. いちご
  2. 人参
  3. サンダル
list-style-type: katakana-iroha カタカナのイロハニホヘト順
  1. いちご
  2. 人参
  3. サンダル
list-style-type: hebrew ヘブライ数字
  1. いちご
  2. 人参
  3. サンダル
list-style-type: armenian アルメニア数字
  1. いちご
  2. 人参
  3. サンダル
list-style-type: georgian グルジア数字
  1. いちご
  2. 人参
  3. サンダル

■関連項目

list-style …… マーカーに関する指定をまとめて行う
list-style-image …… マーカー画像を指定する
list-style-type …… マーカー文字の種類を指定する
list-style-position …… マーカーの表示位置を指定する
marker-offset …… マーカーとの間隔を指定する
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ