【CSS】リストのマークの配置を、内側か外側かに指定する

スポンサーリンク

CSS のリストマークの配置を、ボックスの内側か外側かに指定するには list-style-position プロパティを使用します。

ボックスの外側に配置する場合は「outside」を指定し、 ボックスの内側に配置する場合は「inside」を指定します。 デフォルトは「outside」です。

リストマークの配置を指定するサンプル

リストを2つ用意し、最初のリストは「list-style-position: outside;」を指定し、 マークを外側に表示します。 2番目のリストは「list-style-position: inside;」を指定し、マークを内側に表示します。

外側と内側の違いがわかりやすいように、li 要素に対して枠線(border)を指定しています。

リスト1(外側)

リスト2(内側)


<p><b>リスト1(外側)</b></p>
<ul id="sample1">
    <li>リスト1</li>
    <li>リスト1</li>
    <li>リスト1</li>
</ul>

<p><b>リスト2(内側)</b></p>
<ul id="sample2">
    <li>リスト2</li>
    <li>リスト2</li>
    <li>リスト2</li>
</ul>

<style>
    /* 外側 */
    ul#sample1 {
        list-style-position: outside;
    }
    /* 内側 */
    ul#sample2 {
        list-style-position: inside;
    } 
    #sample1 li, #sample2 li {
        border: 1px solid silver;
    }
</style>

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト