list-style-typeプロパティの使い方・サンプルコード
Sara
list-style-typeプロパティ
list-style-typeプロパティは、表示するリスト項目のマーカーの種類を指定します。
独自の文字列や画像など自分で用意したマーカーを指定したい場合は @counter-style を使うこともできます。（Firefox のみ対応）
使用できる値
ol, ul {
list-style-type: ここに値を指定
}| 値 | |
|---|---|
| disc（デフォルト） | ●（黒い丸） |
| circle | ◯（白い丸） |
| square | ■（黒い四角） |
| decimal | 1, 2, 3…（数値） |
| decimal-leading-zero | 01, 02, 03…（ゼロ埋めされた数値） |
| lower-roman | ⅰ, ⅱ, ⅲ…（小文字のローマ数字） |
| upper-roman | Ⅰ, Ⅱ, Ⅲ…（大文字のローマ数字） |
| lower-greek | α, β, γ…（小文字のギリシャ文字） |
| lower-alpha | a, b, c…（小文字の ASCII 文字） |
| upper-alpha | A, B, C…（大文字の ASCII 文字） |
| lower-latin | a, b, c…（小文字の ASCII 文字） |
| upper-latin | A, B, C…（大文字の ASCII 文字） |
注意
日本語マーカーも用意されていますが、Internet Explorer や Edge など一部のブラウザで非対応となっているのでご注意ください。
一部ブラウザ非対応の日本語マーカー：hiragana（ひらがな）, hiragana-iroha（いろは）, katakana（カタカナ）, katakana-iroha（カタカナいろは）, cjk-decimal（漢数字）
使用例
HTML
<ol>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ol>CSS
ol {
list-style-type: square;
}
ul {
list-style-type: lower-roman;
}実行結果
対応ブラウザ
関連するHTML要素
関連するCSSプロパティ
Subscribe
0 Comments
古い順
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
