list-style-typeプロパティの説明
CSSの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- 塗りつぶされた四角形です。
decimal1から始まる順序付きの数字です。decimal-leading-zero0から始まる順序付きの数字です。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プロパティの構文は以下の通りです。
/* 汎用的なキーワード値 */
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プロパティの書き方を見ていきましょう。以下の例は、マーカーのスタイルを変更したリストを並べて比較したものです。
<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>
.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;
}