概要へ移動

このページで解説するコードの実行結果。（タイトルの文字列をクリックすると、コードに移動）

ボックスの外側
  1. 牛丼
  2. かつ丼
  3. 親子丼
ボックスの内側
  1. 牛丼
  2. かつ丼
  3. 親子丼
左のスペースを無くす
  1. 牛丼
  2. かつ丼
  3. 親子丼
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
.parent {



    list-style-type:  lower-roman;  /* マーカーの種類  */



    border:     2px solid red;      /* 境界線  */

    font-size:  1.5em;              /* 文字の大きさ */    

}



li  {

    border:     1px solid blue;     /* 境界線  */

    margin:     5px;                /* 外側の余白 */

}
HTML : 適用するHTML
<ol class="parent">

    <li>牛丼</li>

    <li>かつ丼</li>

    <li>親子丼</li>

</ol>
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼

list-style-positionの概要

<li>要素のマーカーの位置を指定する。

親要素である<ol> or <ul>要素に対して設定する。

（表） list-style-positionの設定値
設定値マーカーの表示位置デフォルト
outsideボックスの外側○
insideボックスの内側

outside : ボックスの外側

CSS : outside
.parent  {

    list-style-position:    outside;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼

これはデフォルト値なので、無指定の場合でも同じ。

CSS : outside
.parent  {

                   

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼

inside : ボックスの内側

CSS : inside
.parent  {

    list-style-position:    inside;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼

上記のように、内側（inside）にすると、list-style-typeによってはドット(.)の位置がずれていくことに注意。

また、上記のように内側（inside）にすると、子要素（<li>）の左側にスペースが空く。
これは親要素（.parent）に指定されているpadding-leftプロパティによるものである。

よって、padding-leftを調整することで変更できる。
0にすると、そのスペースを無くせる。

CSS : スペースを無くす
.parent  {

    list-style-position:    inside;

    padding-left:           0;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼

このままlist-style-positionをoutsideにすると、マーカーが親要素(parent)からあふれ出ることに注意。

CSS : outside
.parent  {

    list-style-position:    outside;

    padding-left:           0;

}
実行結果
  1. 牛丼
  2. かつ丼
  3. 親子丼

Emmet

記述Visual Studio Code
lisplist-style-position: inside;
lispolist-style-position: outside;