list-style-position

リスト項目のマークの表示位置を指定します。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ list-style-position : 値; }

▲PageTop

指定できる値

値 初期値 意味
outside ○ リスト項目の外側に配置されます。。
inside リストの項目の内側に配置されます。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        list-style-type : square;
        list-style-position : outside;
      }
      #sample2 {
        list-style-type : square;
        list-style-position : inside;
      }
    </style>
  </head>
  <body>
    <ul id="sample1">
      <li>list-style-positionサンプル1</li>
    </ul>
    <br>
    <ul id="sample2">
      <li>list-style-positionサンプル2</li>
    </ul>
  </body>
</html>

表示結果


▲PageTop

関連項目

HTML

<ul> / <ol>


CSS

list-style / list-style-image / list-style-type

▲PageTop

▲