list-styleプロパティの説明
CSSのlist-styleプロパティは、リストマーカーに関するスタイルを一括で指定します。リストマーカーは箇条書きの一覧として表示されるリスト項目の先頭に置かれる目印のことです。
マーカーの仕様は、リスト項目の内側に生成される::markerという擬似要素によって定義されています。既定値では、<li>要素を配置すると自動的に生成されます。
list-styleは、以下の機能を一括で制御するショートハンド・プロパティです。
list-style-type：リストマーカーの種類を指定list-style-image：リストマーカーを画像にするlist-style-position：リストマーカーの位置を指定
その他、CSSでリストをデザインするテクニックは、CSSリファレンスで詳しく解説しています。入れ子構造、開閉できる多段式のリスト、横並びのレイアウトの具体的なサンプルも参照できます。
list-styleに指定できる値
list-style-typelist-style-typeの値です。マーカーの種類を指定します。list-style-imagelist-style-imageの値です。マーカーに表示させる画像を指定します。list-style-positionlist-style-positionの値です。マーカーの位置を指定します。
list-styleの使い方とサンプルコード
list-styleプロパティの構文は以下の通りです。
/* list-style-type */
list-style: disc;
list-style: square;
/* list-style-image */
list-style: url('../images/marker.png');
/* list-style-position */
list-style: inside;
list-style: outside;
/* type | position */
list-style: circle inside;
list-style: decimal outside;
/* type | image | position */
list-style: disc url('images/marker.png') outside;
/* キーワード値 */
list-style: none;
/* グローバル値 */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;
list-styleの実例
それでは実際にlist-styleプロパティの書き方を見ていきましょう。以下の例は、マーカーのスタイルを変更したリストを並べて比較したものです。
マーカーの位置は、リスト項目のコンテンツ・エリアの内側に収めるか、リスト項目のコンテンツ・エリアの外側に出して表示するかの二種類から選択できます。細かい位置調整は、ボックスのmarginやpaddingで行います。
<section class="samp_box">
<div id="ls_1">
<h2>circle inside</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="ls_2">
<h2>decimal inside</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="ls_3">
<h2>image inside</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="ls_4">
<h2>circle outside</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="ls_5">
<h2>decimal outside</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="ls_6">
<h2>image outside</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;
}
#ls_1 ul {
list-style: circle inside;
}
#ls_2 ul {
list-style: decimal inside;
}
#ls_3 ul {
list-style: disc url(/images/sample_list_marker.png) inside;
}
#ls_4 ul {
list-style: circle outside;
}
#ls_5 ul {
list-style: decimal outside;
}
#ls_6 ul {
list-style: disc url(/images/sample_list_marker.png) outside;
}