list-style-type:リスト項目の先頭に表示するマーカーの種類を指定する
初期値 | disc |
適用対象 | リスト項目 |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
list-style-typeプロパティの説明
list-style-type
は、リスト項目の先頭に表示するマーカーの種類を指定します。マーカーの種類は、あらかじめ用意されているキーワードや任意の文字で指定します。マーカーに画像を表示させる場合は、list-style-image
を使用して下さい。
マーカーを表示する位置はlist-style-position
で指定します。これらをまとめて指定する場合には、ショートハンド・プロパティのlist-style
を使用して下さい。
その他、CSSでリストをデザインするテクニックは、CSSリファレンスで詳しく解説しています。入れ子構造、開閉できる多段式のリスト、横並びのレイアウトの具体的なサンプルも参照できます。
list-style-typeに指定できる値
- <custom-ident>
- 特定のスタイルを表すキーワード値、または
@counter-style
が定義できます。キーワードは以下の項目で解説します。 - symbols()
- シンボルを定義する関数です。<custom-ident>よりも簡潔な無名のリストスタイルを作成できます。
- <string>
- 特定の文字をリストマーカーとして使用します。
- none
- リストマーカーを表示しません。
- disc
- 塗りつぶされた円です。これが初期値です。
- circle
- 中抜きの円です。
- square
- 塗りつぶされた四角形です。
- decimal
1
から始まる順序付きの数字です。- decimal-leading-zero
0
から始まる順序付きの数字です。- cjk-decimal
一
から始まる順序付きの漢数字です。- lower-roman
- 小文字の
i
から始まる順序付きのローマ数字です。 - upper-roman
- 大文字の
I
から始まる順序付きのローマ数字です。 - lower-greek
- 小文字の
α
から始まる順序付きのギリシャ数字です。 - lower-alpha, lower-latin
- 小文字の
a
から始まる順序付きのASCII文字です。 - upper-alpha, upper-latin
- 大文字の
A
から始まる順序付きのASCII文字です。 - arabic-indic
- アラビア・インド数字です。
- armenian
- アルメニア語の数値表記です。
- bengali
- ベンガル語の数値表記です。
- cambodian, khmer
- カンボジア/クメール語の数値表記です。
- cjk-earthly-branch
- 漢字の十二支を用いた表記です。
- cjk-heavenly-stem
- 漢字の十干を用いた表記です。
- cjk-heavenly-stem
- 漢字の十干を用いた表記です。
- devanagari
- インド文字のデーヴァナーガリーを用いた表記です。
- devanagari
- インド文字のデーヴァナーガリーを用いた表記です。
- ethiopic-numeric
- エチオピア語を用いた順序付きの表記です。
- georgian
- ジョージア語を用いた順序付きの表記です。
- georgian
- ジョージア語を用いた順序付きの表記です。
- gujarati
- グジャラート語を用いた順序付きの表記です。
- gurmukhi
- グルムキー語を用いた順序付きの表記です。
- hebrew
- ヘブライ語を用いた順序付きの表記です。
- hiragana
- ひらがなを用いた順序付きの表記です。
- hiragana
- ひらがなを用いた順序付きの表記です。
- hiragana-iroha
- ひらがなを用いたいろは順の表記です。
- japanese-formal
- 日本語のフォーマルな文書で用いられる漢字の順序付きの表記です。
- japanese-informal
- 日本語の一般的な文書で用いられる漢字の順序付きの表記です。
- kannada
- カンナダ語を用いた順序付きの表記です。
- katakana
- カタカナを用いた順序付きの表記です。
- katakana-iroha
- カタカナを用いたイロハ順の表記です。
- korean-hangul-formal
- 韓国のフォーマルな文書で用いられる順序付きのハングル表記です。
- korean-hanja-formal
- 韓国の公的な漢数字を用いた表記です。
- korean-hanja-informal
- 韓国の一般的な漢数字を用いた表記です。
- lao
- ラオス語の数値表記です。
- lower-armenian
- アルメニア語の小文字の数値表記です。
- upper-armenian
- アルメニア語の大文字の数値表記です。
- malayalam
- マラヤーラム語の数値表記です。
- mongolian
- モンゴル語の数値表記です。
- myanmar
- ミャンマー語の数値表記です。
- oriya
- オリヤー語の数値表記です。
- persian
- ペルシャ語の数値表記です。
- simp-chinese-formal
- 中国の公的な文書に見られる簡体数字を用いた表記です。
- simp-chinese-informal
- 中国の一般的な文書に見られる簡体数字を用いた表記です。
- tamil
- タミル語の数値表記です。
- telugu
- テルグ語の数値表記です。
- thai
- タイ語の数値表記です。
- tibetan
- チベット語の数値表記です。
- trad-chinese-formal
- 中国の公的な文書に見られる繁体数字を用いた表記です。
- trad-chinese-informal
- 中国の一般的な文書に見られる繁体数字を用いた表記です。
- disclosure-open
- ディスクロージャー・ウィジェットが開いている状態を表す記号です。
<details>
で使用されます。 - disclosure-closed
- ディスクロージャー・ウィジェットが閉じている状態を表す記号です。
<details>
で使用されます。
list-styleの使い方とサンプル
list-style
プロパティの構文は以下の通りです。
CSS
/* 汎用的なキーワード値 */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
/* 言語ごとのキーワード値 */
list-style-type: hiragana;
list-style-type: japanese-informal;
list-style-type: katakana-iroha;
/* <string>値 */
list-style-type: '・';
list-style-type: "◆";
/* マーカーなし */
list-style-type: none;
/* グローバル値 */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: unset;
list-style-typeの実例
それでは実際にlist-style-type
プロパティの書き方を見ていきましょう。以下の例は、マーカーのスタイルを変更したリストを並べて比較したものです。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 1rem;
background: #eee;
display: grid;
grid: repeat(2, auto) / repeat(3, 1fr);
gap: 1rem;
}
.samp_box > div {
padding: .3rem;
background: #fff;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
#lst_1 ul {
list-style-type: disc;
}
#lst_2 ul {
list-style-type: circle;
}
#lst_3 ul {
list-style-type: square;
}
#lst_4 ul {
list-style-type: decimal;
}
#lst_5 ul {
list-style-type: upper-alpha;
}
#lst_6 ul {
list-style-type: katakana-iroha;
}
HTML
<section class="samp_box">
<div id="lst_1">
<h2>disc</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="lst_2">
<h2>circle</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="lst_3">
<h2>square</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="lst_4">
<h2>decimal</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="lst_5">
<h2>upper-alpha</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="lst_6">
<h2>katakana-iroha</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
list-style-typeに関連するCSSプロパティ
リスト(list)関連 | |
---|---|
list-style | リストマーカーに関するスタイルを一括で指定する |
list-style-image | リスト項目のマーカーに画像を指定する |
list-style-position | リスト項目の先頭に表示するマーカーの位置を指定する |
list-style-type | リスト項目の先頭に表示するマーカーの種類を指定する |