CSS ・ リスト・テーブル
list-style
リストマーカーの種類・位置・画像
ul・ol の行頭に付くマーカー（黒丸や番号）の種類・位置・画像を指定します。list-style はその3つをまとめて書くショートハンドです。
01
サンプルコード
HTML
1<ul class="square">
2 <li>square（四角）</li>
3 <li>outside（外側）</li>
4</ul>
5<ol class="inside">
6 <li>decimal（数字）</li>
7 <li>inside（内側）</li>
8</ol>
9<ul class="none">
10 <li>none（マーカーなし）</li>
11</ul>
CSS
1ul, ol {
2 margin: 0 0 8px;
3 background: #f6ead8;
4}
5.square {
6 list-style: square outside;
7}
8.inside {
9 list-style: decimal inside;
10}
11.none {
12 list-style: none;
13 padding-left: 0;
14}
02
実行結果
ブラウザでの表示
03
解説
list-style は、list-style-type（種類）・list-style-position（位置）・list-style-image（画像）の3つをまとめて指定するショートハンドです。
list-style-type でマーカーの形を変えます。ナビゲーションメニューなど、マーカーが不要なリストには none を指定します。
list-style-position が outside（初期値）だとマーカーは文章の外側に、inside だと文章の中に入り、2行目以降がマーカーの下まで回り込みます。
04
応用例・注意点
指定できるプロパティと値
| プロパティ / 値 | 説明 |
|---|---|
list-style-type: disc | 黒丸（ul の初期値） |
list-style-type: circle / square | 白丸 / 四角 |
list-style-type: decimal | 数字（ol の初期値） |
list-style-type: none | マーカーなし |
list-style-position: outside / inside | マーカーを文章の外側（初期値）/ 内側に置く |
list-style-image: url(…) | マーカーに画像を使う |
ナビゲーションのリストを整える
マーカーと、ブラウザが付ける左の余白をまとめて消します。
CSS
1.nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
マーカーの色だけ変える
::marker 疑似要素を使うと、文字はそのままでマーカーの色や大きさを変えられます。
CSS
1li::marker {
2 color: #b68235;
3}
注意点
- 01list-style: none にしても、ul・ol の左の余白（padding-left）は残ります。必要に応じて 0 にします。
- 02list-style-image は画像の大きさや位置を細かく調整できません。凝ったマーカーは ::before や ::marker で作るのが一般的です。