list-style-type

CSSでは、リストのマーカー種類を指定することができます。

本ページでは、list-style-typeプロパティについて説明します。

list-style-typeプロパティとは

list-style-typeプロパティを使うと、リストのマーカー種類を指定することができます。

list-style-typeの定義は、以下のとおりです。

【list-style-typeの定義】
値	disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \| armenian \| georgian \| lower-alpha \| upper-alpha \| none \| inherit
初期値	disc
適用対象	display:list-itemの要素
継承	する

以下は、list-style-typeで使える値と説明、表示例です。

list-style-typeの利用例は、以下のとおりです。

【list-style-typeの利用例】

.test {
  list-style-type: square;
}

上記を、ul要素にクラスtestで適用すると、継承によってdisplayがlist-itemのli要素にも適用されて、マーカーが黒四角になります。ol要素でも、同様に適用可能です。

リストがネストされた(入れ子)時、それぞれ別のマーカーにすることもできます。CSSは、以下です。

【list-style-typeの入れ子での利用例を示すCSS】

.test {
  list-style-type: upper-roman;
}

.test ol {
  list-style-type: lower-roman;
}

HTMLは、以下です。

【list-style-typeの入れ子での利用例を示すHTML】

<ol class="test">
<li>IDを作成する。
  <ol>
  <li>ページを開く。</li>
  <li>IDを入力する。</li>
  </ol>
</li>
<li>登録を完了する。</li>
</ol>

上記は、以下のように表示されます。

マーカーは、大文字ローマ数字と小文字ローマ数字がそれぞれ使われています。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
list-style-type	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
list-style-type	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。

サイト内で関連ページをチェック