CSS | list-style-position | 箇条書きの点の位置

.sampleクラスを持つ<ol>要素を作ります。

見やすいように境界線(border)を付けます。箇条書きの点は子要素(青線)の外側に出ています。

HTML


<ul class="sample">
    <li>りんご</li>
    <li>レモン</li>
    <li>メロン</li>
</ul>

CSS


ul {
    border:          solid red;
}

li {
    border:          solid blue;
}

実行結果初期状態

list-style-position: insideを設定すると、マーカーは子要素(青線)の内側に入ります。

HTML


<ul class="sample">
    <li>りんご</li>
    <li>レモン</li>
    <li>メロン</li>
</ul>

CSS


ul {
    border:          solid red;
}

li {
    border:          solid blue;
}

CSS


.sample {
    list-style-position: inside;
}

実行結果inside

list-style-position: outsideはデフォルトです。

HTML


<ul class="sample">
    <li>りんご</li>
    <li>レモン</li>
    <li>メロン</li>
</ul>

CSS


ul {
    border:          solid red;
}

li {
    border:          solid blue;
}

CSS


.sample {
    list-style-position: outside;
}

実行結果outside

併用するCSSプロパティ `padding-left`

list-style-position: insideを指定すると子要素の左側に余白ができます。

HTML


<ul class="sample">
    <li>りんご</li>
    <li>レモン</li>
    <li>メロン</li>
</ul>

CSS


ul {
    border:          solid red;
}

li {
    border:          solid blue;
}

CSS


.sample {
    list-style-position: inside;
}

実行結果inside

これは親要素に設定されているpadding-leftであり、0にすると無くなります。

HTML


<ul class="sample">
    <li>りんご</li>
    <li>レモン</li>
    <li>メロン</li>
</ul>

CSS


ul {
    border:          solid red;
}

li {
    border:          solid blue;
}

CSS


.sample {
    list-style-position: inside;
    padding-left:        0;
}

実行結果inside

このままlist-style-position: outsideに戻すと左側にはみ出すことに注意してください。

HTML


<ul class="sample">
    <li>りんご</li>
    <li>レモン</li>
    <li>メロン</li>
</ul>

CSS


ul {
    border:          solid red;
}

li {
    border:          solid blue;
}

CSS


.sample {
    list-style-position: outside;
    padding-left:        0;
}

実行結果outside